How to reload javascript without refreshing the page

Question

We have some software which re-creates javascript files. We need to be able to re-load them into the DOM without refreshing the page. This means that the original javascript file (already loaded by the browser) has changed. Usually a refresh of the browser gets around this, but we can't do that due to losing state in other controls.

My searches for this have only returned results about refreshing the browser with javascript, which is not what I want.

Is it possible to reload the javascript file without refreshing the browse with only JavaScript (no JQuery/Angular or any third party library/framework etc)?

Answer 1

If your intention is to provide data or new widgets:

Vanilla AJAX is simple and ubiquitous. Do that.

If you're averse to that, for whatever reason, and if you're pulling new data exclusively from boxes you control , you could also give JSONP a try.

var s = document.createElement('script');
s.src = 'path/to/script-that-injects-data-or-NEW-widgets.js';
document.body.appendChild(s);

If your intention is to "upgrade" the page or replace functionality:

Just don't do this. While you can easily add new scripts, you can't reliably "cleanse" the page of old scripts or variables without a lot of bookkeeping. Unless your scripts are very very very simple, you can expect no small amount of trouble.

A better solution would be to notify the user of upgrades, ask them to refresh the page, and make sure your app can quickly reinitialize to it's previous state.

Ultimately, if you want to "upgrade" the application in-place, you'll want to refresh everything behind the scenes anyway. And that means you need to know how to rebuild everything to match the existing/prior state anyway. And, you could do this. But, it'll be easier to just refresh the page, which better ensures a clean, compatible state without a lot of fuss.

Answer 2

It is possible.

Have a look at lite-server :

Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.

It uses BrowserSync internally, which:

... injects a small script into every page which communicates with the server via WebSockets. When an event occurs — such as a file modification or scroll action — the server sends an update notification to all connected devices.

If you cannot use 3rd-party code you can reimplement something like that yourself.

Answer 3

function loadScript(src, callback)
{
  var script,
      scriptTag;
  script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.onload = script.onreadystatechange = function() {
    if (!this.readyState || this.readyState == 'complete' )
    {
      callback();
    }
  };
  scriptTag = document.getElementsByTagName('script')[0];
  scriptTag.parentNode.insertBefore(script, sriptTag);
}

Answer 4

Add another < script src="xxx"/ > tag to the bottom of your page. It should load the js and 'override' the objects defined in your previous script.