如何强制重新加载脚本并重新执行？

IT技术 javascript html feed script-tag
2021-01-21 19:52:28

我有一个页面正在加载来自第三方的脚本（新闻提要）。src脚本的url 在加载时动态分配（每个第三方代码）。

<div id="div1287">
    <!-- dynamically-generated elements will go here. -->
</div>

<script id="script0348710783" type="javascript/text">
</script>

<script type="javascript/text">
    document.getElementById('script0348710783').src='http://oneBigHairyURL';
</script>

加载的脚本http://oneBigHairyURL然后创建和加载包含来自新闻提要的各种内容的元素，具有漂亮的格式等div1287（传入 Id“div1287”，http://oneBigHairyURL因此脚本知道在哪里加载内容）。

唯一的问题是，它只加载一次。我希望它每 n 秒重新加载（从而显示新内容）。

所以，我想我会试试这个：

<div id="div1287">
    <!-- dynamically-generated elements will go here. -->
</div>

<script id="script0348710783" type="javascript/text">
</script>

<script type="javascript/text">
    loadItUp=function() {
        alert('loading...');
        var divElement = document.getElementById('div1287');
        var scrElement = document.getElementById('script0348710783');

        divElement.innerHTML='';
        scrElement.innerHTML='';
        scrElement.src='';
        scrElement.src='http://oneBigHairyURL';
        setTimeout(loadItUp, 10000);
    };
    loadItUp();
</script>

我收到警报，div 清除，但没有重新加载动态生成的 HTML。

知道我做错了什么吗？

6个回答

向 <head> 添加一个新的脚本标签如何（重新）加载脚本？像下面这样：

<script>
   function load_js()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.src= 'source_file.js';
      head.appendChild(script);
   }
   load_js();
</script>

要点是插入一个新的脚本标签——你可以删除旧的标签而不会有任何后果。如果您有缓存问题，您可能需要向查询字符串添加时间戳。

@Juan Mendes，这是正确的，因为必须再次加载新闻提要。仅在需要缓存时才跳过它，以防只需要重新运行并且新的不必要的负载会减慢速度，例如不会更改的脚本。
2021-03-24 19:52:28
对于缓存问题，最好的办法是给url加时间戳 'hello.js?cachebuster='+ new Date().getTime()
2021-03-31 19:52:28

这是一种类似于 Kelly 的方法，但会删除任何具有相同源的预先存在的脚本，并使用 jQuery。 

<script>
    function reload_js(src) {
        $('script[src="' + src + '"]').remove();
        $('<script>').attr('src', src).appendTo('head');
    }
    reload_js('source_file.js');
</script>

请注意，从 HTML5 开始，脚本不再需要 'type' 属性。（http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element）

你可以添加新的JS，但你不能摆脱旧的。即使您删除其脚本标记，原始脚本中的任何侦听器等仍将处于活动状态。
2021-03-15 19:52:28
伟大的！！经过大量搜索后，它对我有很大帮助。谢谢。
2021-03-26 19:52:28

您是否尝试将其从 DOM 中删除，然后再次插入？

我刚刚做了，这不起作用。然而，创建一个新的脚本标签并复制现有脚本标签的内容，然后添加它，效果很好。

看我的例子 http://jsfiddle.net/mendesjuan/LPFYB/

var scriptTag = document.createElement('script');
scriptTag.innerText = "document.body.innerHTML += 'Here again ---<BR>';";
var head = document.getElementsByTagName('head')[0];
head.appendChild(scriptTag);

setInterval(function() {
    head.removeChild(scriptTag);
    var newScriptTag = document.createElement('script');
    newScriptTag.innerText = scriptTag.innerText;
    head.appendChild(newScriptTag);
    scriptTag = newScriptTag;    
}, 1000);

如果您希望脚本每次都更改，这将不起作用，我相信这是您的情况。您应该遵循 Kelly 的建议，只需删除旧的 script 标签（只是为了保持 DOM 苗条，它不会影响结果）并重新插入一个具有相同 src 的新 script 标签，加上一个缓存破坏器。

对卢克回答的小调整，

 function reloadJs(src) {
    src = $('script[src$="' + src + '"]').attr("src");
    $('script[src$="' + src + '"]').remove();
    $('<script/>').attr('src', src).appendTo('head');
}

并称之为， 

reloadJs("myFile.js");

这不会有任何与路径相关的问题。

@JonathanM 我们通常将脚本保留在正文的末尾。当我发布这个时，这对我有用。如果需要，我认为您也可以附加到头部。
2021-03-22 19:52:28
这是一个
2021-03-22 19:52:28
不应该.appendTo('head')用身体代替吗？
2021-03-31 19:52:28

使用此函数查找包含某个单词的所有脚本元素并刷新它们。

function forceReloadJS(srcUrlContains) {
  $.each($('script:empty[src*="' + srcUrlContains + '"]'), function(index, el) {
    var oldSrc = $(el).attr('src');
    var t = +new Date();
    var newSrc = oldSrc + '?' + t;

    console.log(oldSrc, ' to ', newSrc);

    $(el).remove();
    $('<script/>').attr('src', newSrc).appendTo('head');
  });
}

forceReloadJS('/libs/');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

其它你可能感兴趣的问题
上一篇您需要在 <script> 标签中指定 text/javascript 吗？ 下一篇如何在 Javascript 中创建一个新行？