Question

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

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

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

BTW，我使用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.)

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

1 个答案: