CODEWITHSUNDEEP
javascripthtml
Trevor Freeman
Trevor Freeman

Reputation: 7242

Dynamically reload local JavaScript source / JSON data

What are the possible cross-browser (at least Firefox & Chrome) methods to dynamically reload a local JavaScript file that is referenced by a locally loaded HTML file?

Background:

A local HTML page is being used to render some data that is formatted and displayed by two referenced JavaScript files. One file contains the JavaScript code and the other file contains JSON data.

This JSON data is updated on disk by another program and it would be nice to have the UI automatically incorporate these updates without manually reloading the page (or opening a new page).

In Firefox, I believe the issue could be resolved using AJAX to load the HTML, but in Chrome this will not work due to the same origin policy failures (I unfortunately cannot necessarily rely on --disable-web-security to mitigate this since all prior instances of Chrome must be closed for that to work).

The only solution I see is to run a local web server, but I am hoping for something simpler and less invasive (Perhaps loading the JavaScript in an iframe and reloading the iframe, although I imagine this would be prevented by browser security).

Does anyone have any recommendations?

Upvotes: 3

Views: 8412

Answers (2)

Matthias Braun
Matthias Braun

Reputation: 34373

I use the following code to reload JavaScript and JSON files.

/* Load a JavaScript or JSON file to use its data */    
function loadJsFile(filename, dataIsLoaded){
    var fileref = document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", filename);
    fileref.onload = dataIsLoaded;

    if (typeof fileref!="undefined"){
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }  
}

/* The callback that is invoked when the file is loaded */
function dataIsLoaded(){
    console.log("Your data is ready to use");
}

Usage when the JSON file is in the same directory as the website:

var jsonFile= "myData.json";
loadJsFile(jsonFile, dataIsLoaded);

I tested it successfully in IE10 and Firefox 22; it doesn't work in Chrome though.

Upvotes: 2

Greg Ross
Greg Ross

Reputation: 3498

If your app starts up Chrome then you can include the --allow-file-access-from-files flag in the start command.

Upvotes: 2

Related Questions