在窗口调整大小时重新加载 JS 文件答案

【问题标题】：Reload JS file on window resize在窗口调整大小时重新加载 JS 文件
【发布时间】：2014-10-09 09:59:28
【问题描述】：

如何在窗口调整大小时重新加载单个 JS 文件？每次调整窗口大小时，我只需要重新加载一个 JS 文件，这样它就会重置 JS 文件。很久以前在这里找到了一个脚本，但我找不到他。

<script src="js/scripts.js" type="text/javascript"></script>

Thnx gr 帕斯卡

【问题讨论】：

标签： javascript resize window reload

【解决方案1】：

我没有看到 jQuery 标记，因此其他响应可能对您不起作用。

您基本上需要捕获窗口调整大小事件，该事件发生在（实际上）浏览器调整大小的每个像素上。这意味着您需要使用 setTimeout 来等待完成调整大小（否则，每次调整大小都会重新加载 1000 倍的脚本）。然后，您可以将脚本的源设置为同一个文件，并附加一个将强制进行非缓存刷新的时间戳。

以下是我将如何实现它：(http://jsfiddle.net/gbez11h2/)

HTML：

<script id="scriptToReload" type="text/javascript" src="path/to/script.js">

Javascript：

;(function (w, d) {
    "use strict";

    var timeout = null,
        scriptEl = d.getElementById('scriptToReload'),
        scriptSrc = scriptEl.src,
        delay = 500; // How long to wait (in ms) before deciding resize is complete

    w.onresize = function () {
        // Clear previous timeout to indicate resizing is still occurring
        w.clearTimeout(timeout);

        timeout = w.setTimeout(function () {
            // Resizing is (probably) done, now we can reload the script
            // Start by destroying previous script element
            scriptEl.parentElement.removeChild(scriptEl);

            // Now we recreate the same element, with a timestamp cache-buster
            scriptEl = d.createElement('script');
            scriptEl.type = 'text/javascript';
            scriptEl.src = scriptSrc + '?_=' + (new Date().getTime());

            // And insert it into the DOM to be (re-)loaded
            d.getElementsByTagName('head')[0].appendChild(scriptEl);
        }, delay);
    };
})(window, document);

请注意，Javascript 需要遵循原始的 <script> 定义，或者放入 window.onload 函数中。

【讨论】：

【解决方案2】：

你可以尝试像这样附加新的脚本标签：

$(function(){
$('button').click(function(){
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = 'https://**.js';
    $("head").append( script );

});

})

【讨论】：

【解决方案3】：

像这样：

function bind()
        {
            $(window).resize(function () { $("#scriptToReload").attr("src",   "reloadedScript.js"); });
        }

$(document).ready( function () { bind();} );

【讨论】：