I am developing a small HTML5 web app, that users can use offline with their browsers, cross-platform. They will receive the wep app on a CD or USB-Stick and double-click the HTML file. The HTML file then loads CSS, JavaScript files etc... all locally from the same directory/subdirectories.

So far, everything is fine. But I want also to load a file (also local, from the very same directory) that contains JSON, and use that data to build part of the DOM.

    $.getJSON("playlistcontent.json", function (json) {
        //use the data...
    });

Here I ran into the famous

Origin null is not allowed by Access-Control-Allow-Origin

error. There are a lot of resources about this, even quite similar questions. But since this is intentionally locally, the proposed solutions do not work.

However, since AJAX is "Asynchronous" I thing there is probably a more "synchronous" or otherwise better approach? What about JSONP?

Note: I know that I can start the browser (especially Chrome) with the security check disabled, but this is not an option for my users.

I am developing a small HTML5 web app, that users can use offline with their browsers, cross-platform. They will receive the wep app on a CD or USB-Stick and double-click the HTML file. The HTML file then loads CSS, JavaScript files etc... all locally from the same directory/subdirectories.

So far, everything is fine. But I want also to load a file (also local, from the very same directory) that contains JSON, and use that data to build part of the DOM.

    $.getJSON("playlistcontent.json", function (json) {
        //use the data...
    });

Here I ran into the famous

Origin null is not allowed by Access-Control-Allow-Origin

error. There are a lot of resources about this, even quite similar questions. But since this is intentionally locally, the proposed solutions do not work.

However, since AJAX is "Asynchronous" I thing there is probably a more "synchronous" or otherwise better approach? What about JSONP?

Note: I know that I can start the browser (especially Chrome) with the security check disabled, but this is not an option for my users.

• javascript
• json
• web-applications
• local
• offline

• 4 JSONP is nothing else than a JavaScript file containing a function call. So why don't you just make a JavaScript file out of your JSON file, by prepending var data = and simply include the file as script. Then the ex-JSON data is interpreted as object literal and the data is available in the global variable data. – Felix Kling Commented Feb 14, 2013 at 20:21

3 Answers 3

I answered a similar question here.

You can use HTML5's File API, which includes a FileReader, and then call JSON.parse on the result.

I would use Felix Kling's approach with JSONP. Wrap your data file in in a callback function:

(function(data) {
  // Do things with your data object here
})(
  // Put your data object here as the argument to the callback
);

When you include this script file with a tag, the callback function will automatically be executed.

I like Felix Kling's approach, if all you need is JSON data, you can just load your data by setting JS variables and load the JSON files using script tags. However, if that's not enough for your needs, you can use a solution like http://www.server2go-web.de/ which will run a webserver from the CD, therefore bypassing the local file restrictions.