不刷新HTML页面重新加载JavaScript文件

Question

我有一个HTML文件，其中加载了多个Javascript文件：

<script src="assets/js/a.js"></script>
<script src="assets/js/b.js"></script>
<script src="assets/js/jquery.min.js"></script>

我在浏览器控制台中调试/测试我的JavaScript，是否可以重新加载这些JavaScript文件而无需重新加载整个HTML页面？

- tommi

---

如果你在调试，你想要调试用户体验。如果你只是重新加载脚本，你就会从一个不同的上下文开始，而不是用户所处的上下文。因此，在调试过程中重新加载整个HTML并不是一件坏事。 - huysentruitw

好问题。但它已经被提出并回答了。[在开发时有没有一种方法可以仅刷新 JavaScript 包含？] (https://dev59.com/c1XTa4cB1Zd3GeqPyyjF) - naveen

感谢所有的答案和评论。 - tommi

我认为在调试期间遇到的问题更加严重：使用Ctrl+F5重新加载HTML无法重新加载任何已更改的资产文件，例如.JS文件。 - David Spector

Answer 1

你可以先移除，然后再重新添加它们：

$('script').each(function() {
    if ($(this).attr('src') !== 'assets/js/jquery.min.js') {
        var old_src = $(this).attr('src');
        $(this).attr('src', '');
        setTimeout(function(){ $(this).attr('src', old_src + '?'+new Date()); }, 250);
    }
});

- PitaJ

---

@Truth - 他的问题代码中有一个 jQuery 脚本元素！ - PitaJ

+1 表示否定 -1。@Truth：3 并不代表全部 :) 至少在 StackOverflow 上是这样的 :) 但是 PitaJ 的代码有 bug。1. 在此代码中，setTimeout 不起作用。2. 更重要的是，在此处替换脚本是行不通的。你只能添加一个新脚本 使用 jQuery 替换脚本 src 不被执行。 - naveen

我认为你的意思是使用Date.now()而不是new Date()。 - Dirigible

Answer 2

不行（至少没有通过黑客手段），事实上，重新加载太多要非常小心。很可能你的JavaScript被缓存了，这会导致许多头痛的调试，因为你的更新没有应用。

https://superuser.com/questions/36106/force-refreshing-only-javascript-files-in-firefox-and-chrome

- Jordan Scales

---

你可以使用Ctrl+F5重新加载页面，这将刷新缓存。 - huysentruitw

Answer 3

基于PitaJ的解决方案。

在一个函数中重新加载所有的JavaScript。您可以在任何地方调用此函数。

 $('script').each(function () {
        if ($(this).attr('src') != undefined && $(this).attr('src').lastIndexOf('jquery') == -1) {
            var old_src = $(this).attr('src');
            var that = $(this);
            $(this).attr('src', '');

            setTimeout(function () {
                that.attr('src', old_src + '?' + new Date().getTime());
            }, 250);
        }
    });

- Andras Sebo

Answer 4

已在jQuery 2.0.3和Chrome 43上进行测试

 function reloadScript(id) {

    var $el =  $('#' + id);

    $('#' + id).replaceWith('<script id="' + id + '" src="' + $el.prop('src') + '"><\/script>');
}

Chrome 报错，但仍能正常使用：

在主线程上同步使用XMLHttpRequest已被弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助，请查阅http://xhr.spec.whatwg.org/。

您的脚本标签必须具有ID。 在控制台中调用：

reloadScript('yourid');

不会移除事件监听器，因此例如按钮点击如果重新加载，则会执行两次。

- Dariux