jQuery – How to Load a Local File with file://

jquery

Is there any way to load data from a data file (eg a JSON .js file) using jQuery?

eg:

$.get("file:///C:/objectData.js", function() { alert('Load was performed.'); });

At the moment, instead of doing a simple HTTP GET, JQuery appears to be trying to do an OPTIONS request on it, which fails on a file:// URI. I just want to load the data in so that the site can be used in an offline environment (without a web server installed).

Best Answer

GET requires an HTTP connection, so without a local web servber it won't work. While you can open and read a file using HTML5, you can't load a JavaScript resource that way.

If the page is loaded locally, you'd usually load the JS using a script tag.

<script type='text/javascript' src='/objectData.js'></script>

The only way around this may be in this answer: Is it possible to load in a local version of a JavaScript file instead of the server version?

or this (both require making a local pseudo-server) :

Related Solutions

Javascript – How to Load Local Files Without a Web Server

If you insist on using Chrome, it have some command line flags to allow access to/from local originated files (--allow-file-access-from-files / --disable-web-security). Do note that you need to run entire browser from scratch with those flags - i.e. if there's already any other Chrome windows open flags WON'T have any effect and that effect persists across ALL windows until Chrome is closed, which is, obviously huge hole in security.

You can set up a lightweight local server if you pack your "application" with some kind of automated setup script. This is still not very good, because you'd need to install executable that user might not want or even be completely unable to install due to restrictions.

You can pack your HTML/JS-based app as Chrome extension - extensions have much wider permissions than random code, but then you'd need to either distribute it through Google Play or provide instructions to manually install extensions for your users.

And finally, you can format all the data, including your configuration and text files your mentioned as valid JavaScript code - i.e. pack a story1.txt to story1.js like:

var myapp.story1 = "Complete text of story1.txt"

and then just dynamically select stuff you need from corresponding vars or even use DOM manipulation to only load scripts you need through dynamically adding <script> tags. In my opinion that would be best option because it is less intrusive: it doesn't requires any installation/reconfiguration, it just works out-of-box.

Best Answer

Related Solutions

Javascript – How to Load Local Files Without a Web Server

Related Question