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?


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).

Anyone have any recommendations?


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

  • 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

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("src", filename);
    fileref.onload = dataIsLoaded;

    if (typeof fileref!="undefined"){

/* 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.

  • 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 8:35

Your Answer

