Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reload javascript without refreshing the page

Tags:

javascript

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

like image 930
MyDaftQuestions Avatar asked Oct 05 '16 17:10

MyDaftQuestions


People also ask

How do I refresh a page without reloading?

How do you refresh the page without reload in react? reload(false); This method takes an optional parameter which by default is set to false. If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page.

How do I reload the page again in JavaScript?

You can use the location. reload() JavaScript method to reload the current URL. This method functions similarly to the browser's Refresh button. The reload() method is the main method responsible for page reloading.

What is reload in JavaScript?

Definition and Usage. The reload() method reloads the current document. The reload() method does the same as the reload button in your browser.

How can I tell if JavaScript is refreshing a page?

A better way to know that the page is actually reloaded is to use the navigator object that is supported by most modern browsers. It uses the Navigation Timing API. thanks buddy this is accurate solution to detect either the page is reloaded from right click/refresh from the browser or reloaded by the url.


2 Answers

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.

like image 142
svidgen Avatar answered Nov 03 '22 00:11

svidgen


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.

like image 44
Maxim Egorushkin Avatar answered Nov 03 '22 00:11

Maxim Egorushkin