重新加载 JavaScript 文件而不刷新 HTML答案

【问题标题】：Reload JavaScript files without refreshing HTML重新加载 JavaScript 文件而不刷新 HTML
【发布时间】：2012-06-03 06:07:30
【问题描述】：

我有一个加载多个 Javascript 文件的 HTML：

<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 页面？

【问题讨论】：

如果您正在调试，您希望调试用户体验。如果您只是重新加载脚本，那么您将从与用户不同的上下文开始。所以在调试时重新加载整个 HTML 并不是一件坏事。
好问题。但它已经被询问和回答了。 Is there a way to refresh just the javascript include while doing development?
感谢所有答案和 cmets。
我认为调试时的问题更严重：使用Ctrl+F5重新加载HTML无法重新加载任何资产文件，例如.JS文件，可能已经改变了。

标签： javascript html

【解决方案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);
    }
});

【讨论】：

@Truth - 他在问题代码中有一个 jquery 脚本元素！
+1 否定 -1。 @Truth：3 并不意味着全部:) 至少在 StackOverflow :) 但是 PitaJ 你的代码有问题。 1. setTimeout 在这段代码中不会做任何事情。 2. 更重要的是，替换脚本在这里不起作用。你只能添加一个新脚本Replacing script src using jquery not executed
我认为你的意思是 Date.now() 而不是 new Date()

【解决方案2】：

不（至少不是没有破解），事实上 - 重新加载这么多要非常小心。您的 javascript 很可能会被缓存，这会导致尝试调试时头疼，因为您的更新未应用。

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

【讨论】：

您可以随时使用Ctrl+F5重新加载，这将刷新缓存

【解决方案3】：

使用 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');

不删除事件侦听器，例如，如果重新加载按钮单击，则会执行两次。

【讨论】：

【解决方案4】：

基于 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);
        }
    });

【讨论】：