All geek questions in one place

Refresh updated java <script> code without completely reloading the html page

I am developing a one-page web application that has many different functions and forms. When developing deep (I mean something that is not on the main page), I go through this cycle:

  • develop code, edit classes and functions
  • refresh the whole page
  • pressing all the way until I get to the part that I need to test (sometimes it takes about a minute)
  • testing new code
  • back to the code editor (1) performing updates.

after making about 15 small changes, it may take 30 minutes to reboot again and pressing

Is there any plugin, javascript piece, or method that allows you to reload updated javascript without reloading everything, so you can skip 2 and 3. from the loop above and continue running live tests?

If this does not happen, I plan to develop a small javascript plugin that will reload the scripts and, possibly, use socket.io connect to the node.js server, which will look at the files for any updates and click on download events to the browser.

So, I'm interested in any idea about this, any thing that I should consider when writing a plugin.

Thanks:)

+6
source share
4 answers

You can do something like this.

 function LoadMyJs(scriptName) { var docHeadObj = document.getElementsByTagName("head")[0]; var dynamicScript = document.createElement("script"); dynamicScript.type = "text/javascript"; dynamicScript.src = scriptName; docHeadObj.appendChild(newScript); }

Call the LoadMyJs function when the page loads

 <body onLoad="LoadMyJs()">

Then reboot with the click of a button (or from the console)

 <input type="button" name="reloadjs" value="Reload JavaScript" onclick="LoadMyJs('my_live_loading_script.js')">

This can be simplified using, for example, jQuery

Thanks: http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/

+2
source

Here's what I came up with: a Node.js module that monitors changes in .js and. coffee and push changes in the browser when editing files.

  • It works autonomously, even if you are developing the file:/// file system without using a web server.
  • It works with any framework, just run a stand-alone script and point it to the js/ directory.
  • He has an express.js helper that will launch it using the same server instance.

It is as simple as

  • adding a separate line of the <script> to the existing code and
  • the live script works, pointing it to the root of the html.

code: 🐱 / etabits / live.js

+1
source

This may not be the best answer, but for local development I use firefox plugins:

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/

This reloads css, js or anything present in the directory

For dev, which really should be remotely, I use this little js code that you can adapt to reload js.

 function refreshCss(rule){ if (rule == null) rule = /.*/; var links = document.getElementsByTagName("link"); for(var i=0;i<links.length;i++) { if (!links[i].href.match(rule)) continue; if (! links[i].href.match(/(.*)time=/)){ if (links[i].href.match(/\?/)) var glue = '&'; else var glue = '?'; links[i].href += glue+"time="+new Date().getTime(); } else{ links[i].href.replace(/time=\d+/, "time"+new Date().getTime()); } } if (!no_refresh) { setTimeout(function(){refreshCss(rule)}, 5000); } }; // and then call it refreshCss("regex to match your css, or not"); var no_refresh=false;

Edit: this is the version with "setTimeout", but you can easily make the "keypress" version of it

0
source

Replace with a dynamic script.

 function LoadMyJs(scriptName) { var docHeadObj = document.getElementsByTagName("head")[0]; var dynamicScript = document.createElement("script"); dynamicScript.type = "text/javascript"; dynamicScript.src = scriptName; docHeadObj.appendChild(dynamicScript); }
0
source

Source: https://habr.com/ru/post/956472/

More articles:


All Articles