Loading JSON from a local HTML5 web app using JavaScript - Stack Overflow

admin管理员组

文章数量:1313750

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

Share Improve this question Follow edited May 23, 2017 at 11:56 CommunityBot 111 silver badge asked Feb 14, 2013 at 20:16 MarcelMarcel 15.7k2222 gold badges104104 silver badges164164 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

本文标签： Loading JSON from a local HTML5 web app using JavaScriptStack Overflow