3

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?

Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
Trevor Freeman
  • 7,112
  • 2
  • 21
  • 40

2 Answers2

2

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

Greg Ross
  • 3,479
  • 2
  • 27
  • 26
  • Accepted, but this runs into the same issue (that you note) whereby you have to ensure it is the first instance of chrome started (and I cannot ensure this in all cases). – Trevor Freeman Aug 28 '12 at 21:47
2

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.

Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
  • As I am a beginner, I then was wondering how is the data accessible from the function you call that function? As I dont see a return function / variable. – Jasper Jul 22 '13 at 12:13
  • 1
    @Jasper: The data from `myData.json` is globally accessible within your JavaScript. Let's say, in your JSON file is a `var externalInfo`. An external program or script updates that variable every so often. So in your JavaScript you write a method that calls `loadJsFile("myData.json")` every five seconds. Finally, you use that updated `externalInfo` in `dataIsLoaded`. – Matthias Braun Jul 23 '13 at 10:34
  • "it doesn't work in Chrome though"--Chrome has ~50% market share. I am *hating* JavaScript. – Shon Nov 28 '14 at 08:35
  • It's nine years later. Does it work in Chrome now? – WinEunuuchs2Unix Feb 28 '22 at 12:42