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

Question

我有一个页面，是从第三方(新闻馈送)加载脚本。脚本的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被重新加载到其中。

知道我做错了什么吗？

Answer 1

添加一个新的脚本标签到要(重新)加载的脚本怎么样？如下所示：

<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的建议，只需删除旧的script标记(只是为了保持DOM的精简性，它不会影响结果)，然后重新插入一个具有相同src的新script标记，以及一个cachebuster。