Question

我有一个从第三方加载脚本的页面（新闻Feed）。脚本的src网址是在加载时动态分配的（每个第三方代码）。

<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加载的脚本然后使用新闻Feed中的各种内容创建并加载元素，其中包含相当格式化等等div1287（Id“div1287”传递到{{1}所以脚本知道加载内容的位置。）

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

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

http://oneBigHairyURL

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

知道我做错了吗？

Answer 1

如何将新脚本标记添加到＆lt; head＆gt;用脚本来（重新）加载？如下所示：

<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>

重点是插入一个新的脚本标记 - 您可以删除旧标记而不会产生任何后果。如果遇到缓存问题，可能需要为查询字符串添加时间戳。

Answer 2

这是一个类似于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）

Answer 3

您是否尝试过从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的建议，只需删除旧的脚本标签（只是为了保持DOM的纤薄，它不会影响结果）并重新插入一个新的脚本标签，使用相同的src，再加上一个缓存清单。 / p>

Answer 4

对卢克回答的小调整，

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

并称之为，

relaodJs("myFile.js");

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

Answer 5

使用此功能查找包含某些单词的所有脚本元素并刷新它们。

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>

Answer 6

我知道这太迟了，但是我想分享我的答案。我所做的就是将脚本的标记保存在HTML文件中，用一个ID将div中的索引文件锁定在div中。

<div id="ScriptsReload"><script src="js/script.js"></script></div>

当我想刷新时，我就用过。

$("#ScriptsReload").load("html_with_scripts_tags.html", "", function(
    response,
    status,
    request
  ) {

  });

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

6 个答案: