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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10868277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:21:19  来源:igfitidea点击:

Reload JavaScript files without refreshing HTML

javascripthtml

提问by tommi

I've a HTML which loads several Javascript files:

我有一个 HTML,它加载了几个 Javascript 文件:

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

As I debug/test my Javascripts in my browser's console, is it possible to reload these Javascript files without the need to reload the entire HTML page?

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

回答by PitaJ

You could remove and then re-add them:

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

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

回答by Jordan Scales

Nope (at least not without a hack), in fact - be very careful reloading so much. It's quite possible that your javascripts become cached, which leads to many-a-headache trying to debug, since your updates are not applying.

不(至少不是没有黑客),事实上 - 要非常小心地重新加载这么多。您的 javascript 很可能被缓存,这导致尝试调试时很头疼,因为您的更新没有应用。

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

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

回答by Darius.V

Tested with jQuery 2.0.3 and chrome 43

使用 jQuery 2.0.3 和 chrome 43 测试

 function reloadScript(id) {

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

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

Chrome is complaining, but works:

Chrome 正在抱怨,但有效:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

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

Your script tag has to have id. Call in console:

你的脚本标签必须有 id。在控制台中调用:

reloadScript('yourid');

Does not remove event listeners, so for for example button click gets executed twice if once reloaded.

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

回答by Andras Sebo

Based on PitaJ's solution.

基于 PitaJ 的解决方案。

Reload all javascript in a function. You can call this from anywhere you want.

在函数中重新加载所有 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);
        }
    });