I have developed some touchscreen content that will be run on a local machine at an event. It will be run full screen using Chrome, and I need to load various html content dynamically into a container. Is this possible, as the usual JQuery load() and ajax methods only seem to work when running off of a server. All the content sits in its own folder as a html file, so I just need to point to the correct html file as and when needed.
Is there a way to do this when all content is being run locally?
It sounds like you're not running an http server. You can't get ajax from the file:// protocol. You need to run a local http server.
If your backend language is javascript, you should run nodejs
If your backend is php you should probably run apache2
Related
I'd like to use html+css+js to create an interface for setting up a simulation. The interface is used to create a visualisation of the simulation, and an output parameters file, by using several input files.
This web-page does NOT need to run on a server and is only run locally on the same machine.
I understand why a sever page is not allowed to access a client file, and that a server page may access another server file. Is it possible for a LOCAL web-page to access a local file?
It is possible to view the contents of any file using file:///path/to/file.txt so I presume that it is somehow possible to pull the result into a running page in the form of a string. However I'm having very little success.
If it is possible please could you detail a simple example of how the contents of a txt file could be read into a string?
Thank you very much
node.js is a javascript implementation that can easily do such things because it is a process running on the machine. A web page is running in a browser which does not have access to the file system, so that would not be possible, however you could bundle your web application into an electron application which would be able to access the osand file system, so while it would use html and javascript it would still require an installation.
If you are using Chrome, you can launch it with the --allow-file-access-from-files flag. Then you can do:
fetch('file:///path/to/file.txt')
.then(function(response) {
// do something with it
})
I have a locally-stored project whose directory structure is the following (I minimized non-relevant folders):
What I want to do is that in an HTML file, like index.html, to add a <header> such that its contents would be loaded from an external HTML file, so all of what I'll have to write in index.html would be <header>, and my solution would load the content automatically.
To do this, I'd like to use JavaScript (preferably jQuery, but I'll accept other solutions if they work and jQuery doesn't, or if they work and executed faster than jQuery).
I don't think that I should use an <iframe> due to the fact that it'd probably increase loading times more than using jQuery/JavaScript (which, like I said, is what works now, when the website is live).
Right now, I'm using the jQuery .load() function. I don't know much about jQuery, but I've been told that it should work locally - and it doesn't, for me.
My browser's console shows me the problem:
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
And I'm trying to overcome it.
This code works on my live website - it might not be updated to the code of the files that I linked to below, but it doesn't matter - their code matters.
This is the index.html file:
index.html
This is the header.html file:
header.html
This is `main_script.js:
main_script
The reason you're having a problem with this locally is mainly down to security measures in your browser.
Essentially whenever you're using jQuery's load() function it makes a separate HTTP request (approach known as AJAX) for the file or URL you give it.
Modern browsers enforce that the URL you request using AJAX methods is from the same origin (server) as a security feature to stop pages randomly loading content from anywhere on the internet in the background. In your case it seems like this shouldn't affect you because you're browsing your pages locally and the request you're making using load() is also for a local file (header.html).
However, I am assuming you're just opening up the page directly in your browser, so your browser's URL will look something like 'file:///C:/Users...' (similar example in the error message you gave). This means your browser is directly reading the file from disk and interpreting it as HTML to display the page. It seems likely you don't actually have a local HTTP server hosting the page, otherwise the URL would start with 'http://'. It is for this reason that the browser is giving the security error, even though your AJAX request for header.html is technically from the same source as the page it is executed on.
Your server will have an HTTP server which it's using to host the pages, and so everything works fine as you're then using HTTP as normal, and this security feature does not get in your way.
I would suggest that you simply install an HTTP server locally on your dev machine. You don't even need to 'install' one per-se, there are loads of development HTTP servers that just run standalone, so you start them up when you want to browse your local HTML files. As you appear to be on Windows, I'd check out either IIS (Windows' HTTP server) or IIS Express (like IIS but runs standalone). There are also many others available like Apache, Nginx, etc. etc.
If you do this, you can host your pages on something like 'http://localhost/index.html'. Then, any AJAX requests you make for local files will work fine, just like your server.
Hope that makes sense, and I'm not telling you something you already know?
Why not using something more straight foreword like mustache.js ?
I found a solution:
Using phpStorm's built-in localhost, I was able to emulate a server that handles my requests and responses.
I'm writing a chrome extension that injects a content script into every page the user goes to. What i want to do is to get the output of a python function for some use in the content script (can't write it in javascript, since it requires raw sockets to connect to my remote SSL server).
I've read that one might use CGI and Ajax or the like, to get output from the python code into the javascript code, but i ran into 3 problems:
I cannot allow hosting the python code on a local server, since it is security sensitive data that only the local computer should be able to know.
Chrome demands that HTTP and HTTPS can not mix- if the user goes to an HTTPS website, i can't host the python code on a HTTP server.
I don't think Chrome even supports CGI on extensions-when i try to access a local file, all it does is print out the text (the python code itself) instead of what i defined to be its output (I tried to do so using Flask). As I said in 1, I shouldn't even try this anyway, but this is just a side note.
So my question is, how do i get the output of my python functions inside a Content Script, built with javascript?
Native Messaging may be your answer here.
You can designate a Native Host application that an extension or app will be able to invoke (probably through a background page in case of an extension), and that can be a Python script.
In fact, the sample app for it uses a Python script.
The only way to get the output of a Python script inside a content script built with Javascript is to call the file with XMLHttpRequest. As you noted, you will have to use an HTTPS connection if the page is served over HTTPS. A workaround for this is to make a call to your background script, which can then fetch the data in whichever protocol it likes, and return it to your content script.
I am trying to load some content inside a div #display. I have read many questions regarding this matter here, but still I have been unable to get it working. The alert function which I have just added for testing purpose works without any problem.
Here is what I have tried
$(document).ready(function(){
$('#townships').click(function() {
$('#display').load("helloworld.html");
alert("Hi");
});
});
I am trying this offline. The helloworld.html file is in the same folder with the homepage file.
I am trying this offline
I believe this is your problem. AJAX requests to the local filesystem will be blocked by the browsers' security settings.
You need to run it under a webserver, either on your local machine, such as WAMP/LAMP/IIS or on a remote machine.
You can not do AJAX request without loading files from some server. Doing it by loading files from file system won't work because of SAME ORIGIN policy. Since there is no domain to compare to the AJAX requests fail. You can see the exception while doing it in Chrome.
This is relevant
AJAX code do not run locally
You should put your html file in a web server. If you have python installed, you can just type
python -m SimpleHTTPServer [port]``
In order to have a rapid web server in your working directory.
I'm using w3schools to try to understand how simple AJAX requests work and I came across this exercise page:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load
I thought it was a simple example of an ajax request, so I copied and pasted the code into a plain ajax.htm file and copied and pasted the txt file it refers to:
http://www.w3schools.com/jquery/demo_test.txt
...and saved it as demo_test.txt file it refers to and saved them both in the same folder. (Keep in mind, I have an Apache server that processes PHP locally with no problem, so I would think a simple request like this would work on my local machine).
However when I click the button locally I get nothing. Then, when I upload the files to a different server (a "web host") suddenly it works.
So, this works on a webhost and it works at w3schools but it doesn't work locally on my machine in my root folder (where php works without a problem).
I would prefer to not have to upload my code before being able to test whether it works and would rather be able to process everything locally, like I do with PHP. Is it possible to do this locally or can I only make these requests remotely from my web host?
Why is my machine not processing this code? Any help would be appreciated. Thanks.
There are a lot of reasons you might not be able to load the file locally, but most will have to do with how you're serving the files. If you're using file:// you're going to run into problems; you said you have an Apache server, but didn't mention whether you were actually serving this site from it.
Have you checked to make sure that the route you're loading via your AJAX call is actually loading properly? E.g. if the ajax file is at your web root (http://local.site/ajax.html) and so is your txt file (http://local.site/demo_test.txt).
In this situation you can also always check your browser's Javascript console to see if you get any errors or if the files are actually loaded correctly. Depending on how you're serving and accessing the various files, you might be getting CORS errors as well.
The simplest solution is to make sure you're running on a local webserver (your Apache) instead of directly viewing files.