javascript - 如何在网页上重新加载 Javascript 文件？

Question

当我在浏览器中调试 Javascript 函数并修改服务器上的代码时，我想在浏览器中重新加载该函数，而不必刷新整个页面。

我尝试使用 Firebug 的 Net 面板重新发送特定 JS 文件的 GET 请求。 JS文件的内容被重新加载，但是当我在脚本面板中调试时，它仍然执行旧的代码。

这对我的项目来说非常重要，因为它有一个单页面工作流程。如果我想测试第2步的逻辑，我每次都必须刷新页面并再次执行第1步。

顺便说一句，我使用 RequireJS 来加载依赖项。

Answer 1

还没有对此进行彻底的测试，但我认为您可以通过创建一个新的脚本标记(使用更改后的查询字符串强制浏览器将其视为新脚本)来做到这一点。

function reload_script_id(id) {
    return reload_script(document.getElementById(id));
}

function reload_script(old_script) {
    var new_script = document.createElement('script');
    new_script.src = change_query_string(old_script.src);
    replace_preserving_id(old_script, new_script);
    return new_script;
}

function replace_preserving_id(old_el, new_el) {
    var id = old_el.id;
    old_el.parentNode.appendChild(new_el);
    old_el.remove();
    new_el.id = id;
}

function change_query_string(url) {
    return [url.split('?')[0], Math.random()].join('?');
}

例如，如果您有

<script id="abc" src="some-script.js"></script>

然后你就可以打电话了

reload_script_id('abc');

它将被替换为类似的内容

<script id="abc" src="some-script.js?0.7407381518278271"></script>

(Here's a jsfiddle demonstrating this.)