如何強制重新加載腳本並重新執行？

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加載的腳本，然後創建和（ID爲「div1287」在http://oneBigHairyURL傳遞負荷元素與來自新聞源的各種東西，有漂亮的格式化等進入div1287所以腳本知道在哪裏加載內容）。

唯一的問題是，它只加載一次。我希望它每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

如何使用腳本（重新）加載新腳本標記到< head>？如下所示：

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

要點是插入一個新的腳本標記 - 您可以刪除舊的腳本標記，而不會產生任何後果。如果您有緩存問題，您可能需要爲查詢字符串添加時間戳。

Answer 2

你有沒有嘗試從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，再加上一個緩存。

Answer 3

下面是一個類似於凱利的方法，但會刪除任何已有的腳本，並使用相同的源代碼，並使用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 4

小的調整，盧克的回答，

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

，並這樣稱呼它，

relaodJs("myFile.js"); 

這不會有任何路徑相關的問題。