在不刷新 HTML 的情况下重新加载 JavaScript 文件

Reload JavaScript files without refreshing HTML

本文关键字：加载 文件 JavaScript 新加载 刷新 HTML 情况下      更新时间：2023-09-26

我有一个加载几个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页面？

您可以删除然后重新添加它们：

$('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);
    }
});

不（至少不是没有黑客），事实上 - 非常小心地重新加载这么多。您的 javascript 很可能会被缓存，这会导致许多人在尝试调试时头疼，因为您的更新不适用。

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

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

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

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

相关文章：