重新加载更新的java <script>代码，而无需完全重新加载html页面

Question

I am developing a single page web application, that has many different features and forms. 我正在开发一个单页面Web应用程序，它具有许多不同的功能和形式。 When developing a deep (I mean something that is not on the home page) feature, I go through this cycle: 在开发深度（我的意思是主页上没有的东西）功能时，我会经历这个循环：

develop the code, editing classes and functions 开发代码，编辑类和函数
refresh the whole page 刷新整个页面
clicking all the way till I get to the part that I need to test (that adds up to about a minute sometimes) 一路点击直到我到达我需要测试的部分（有时加起来大约一分钟）
testing the new code 测试新代码
back to the (1) code editor doing updates 回到（1）代码编辑器进行更新

doing about 15 minor edits, can take a frustrating 30 minutes of repeated reloading and clicking 进行大约15次小编辑，可以在30分钟内反复重装和点击

Is there any plugin, piece of javascript, or method, that allows to reload the updated javascript without reloading everything, so one can skip the 2. and 3. from the cycle above and continue doing live tests? 是否有任何插件，javascript或方法，允许重新加载更新的JavaScript而无需重新加载所有内容，因此可以跳过上面的循环中的2.和3.并继续进行实时测试？

If there's no such thing, I am planning on developing a little javascript plugin that will reload the scripts, and probably with socket.io connection to a backend node.js server that will watch the files for any updates and push the load events to the browser. 如果没有这样的东西，我打算开发一个小的javascript插件，它将重新加载脚本，并且可能与socket.io连接到后端node.js服务器，它将监视文件中的任何更新并将加载事件推送到浏览器。

So, I am interested in any idea about this, any thing that I should take into consideration when writing the plugin. 所以，我对这个问题感兴趣，在编写插件时我应该考虑的任何事情。

Thanks : ) 谢谢：）

Answer 1

You could 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 on page load 在页面加载时调用LoadMyJs函数

<body onLoad="LoadMyJs()">

Then reload with the click of a button (or from your console) 然后单击按钮（或从控制台）重新加载

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

This could be simplified using eg jQuery 这可以使用例如jQuery简化

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

Answer 2

Here's what I came up with: a Node.js module that watches for changes in .js & .coffee scripts, and pushes the changes to the browser upon editing the files. 以下是我提出的：一个Node.js模块，它监视.js和.coffee脚本中的更改，并在编辑文件时将更改推送到浏览器。

It works standalone, even if you are developing on filesystem file:/// without using a web server. 即使您在文件系统file:///上进行开发而不使用Web服务器，它也可以独立运行。
It works with any framework, just launch the standalone script and point it to your js/ directory. 它适用于任何框架，只需启动独立脚本并将其指向您的js/目录。
It has an express.js helper, that make it run using the same server instance. 它有一个express.js帮助程序，使它使用相同的服务器实例运行。

It is as easy as 这很简单

adding a single line of <script> tag to your existing code, and 在现有代码中添加一行<script>标记，以及
running the live script, pointing it to the html root. 运行live脚本，将其指向html根目录。

code: 🐱/etabits/live.js 代码： 🐱/ etabits / live.js

Answer 3

That's may be not the best answer but for local developments I use that firefox plugins: 这可能不是最好的答案，但对于我使用firefox插件的本地开发：

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

This reload the css, js or anything present in a directory 这会重新加载目录中存在的css，js或任何内容

For dev which really needs to be remotely , I use that small js code you can adapt for reloading js. 对于真正需要远程的开发，我使用你可以适应重新加载js的小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 a version with "setTimeout", but you can easily made a "keypress" version of it 编辑：这是一个带有“setTimeout”的版本，但您可以轻松制作它的“按键”版本

Answer 4

Replace with 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);
}

重新加载更新的java <script>代码，而无需完全重新加载html页面

问题描述

4 个解决方案

解决方案1
2 2013-10-22 10:19:13

解决方案2
1 2013-10-27 12:44:21

解决方案3
0 2013-10-22 10:53:54

解决方案4
0 2019-01-22 12:19:58

重新加载更新的java <script>代码，而无需完全重新加载html页面

问题描述

4 个解决方案

解决方案1 2 2013-10-22 10:19:13

解决方案2 1 2013-10-27 12:44:21

解决方案3 0 2013-10-22 10:53:54

解决方案4 0 2019-01-22 12:19:58

解决方案1
2 2013-10-22 10:19:13

解决方案2
1 2013-10-27 12:44:21

解决方案3
0 2013-10-22 10:53:54

解决方案4
0 2019-01-22 12:19:58