javascript 重新加载更新的 java<script> 代码而不完全重新加载 html 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19514993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload updated java<script> code without fully reloading the html page
提问by aularon
I am developing a single page web application, that has many different features and forms. When developing a deep (I mean something that is not on the home page) feature, I go through this cycle:
我正在开发一个单页 Web 应用程序，它具有许多不同的功能和形式。在开发深度（我的意思是主页上没有的东西）功能时，我会经历这个循环：
- 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.ioconnection to a backend node.jsserver 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 : )
谢谢 ： ）
回答by subZero
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 e.g 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/
回答by aularon
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. - It works with any framework, just launch the standalone script and point it to your
js/directory. - It has an express.js helper, that make it run using the same server instance.
- 即使您在
file:///不使用 Web 服务器的情况下在文件系统上进行开发，它也可以独立工作。 - 它适用于任何框架，只需启动独立脚本并将其指向您的
js/目录。 - 它有一个 express.js 帮助程序，使其使用相同的服务器实例运行。
It is as easy as
就这么简单
- adding a single line of
<script>tag to your existing code, and - running the
livescript, pointing it to the html root.
<script>在现有代码中添加一行标记，以及- 运行
live脚本，将其指向 html 根目录。
code: /etabits/live.js
回答by Arnab Nath
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);
}
回答by Asenar
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”的版本，但您可以轻松制作它的“按键”版本
