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

我有一个从第三方加载脚本的页面(新闻提要)。脚本的 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中(在 http://oneBigHairyURL中传递 Id“ 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 重新加载到它。

知道我哪里做错了吗？

248138 次浏览
小开
最佳答案

How about adding a new script tag to <head> with the script to (re)load? Something like below:

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

The main point is inserting a new script tag -- you can remove the old one without consequence. You may need to add a timestamp to the query string if you have caching issues.

小开

Creating a new script tag and copying the contents of the existing script tag, and then adding it, works well.

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

This won't work if you expect the script to change every time, which I believe is your case. You should follow Kelly's suggestion, just remove the old script tag (just to keep the DOM slim, it won't affect the outcome) and reinsert a new script tag with the same src, plus a cachebuster.

小开

Here's a method which is similar to Kelly's but will remove any pre-existing script with the same source, and uses jQuery. 

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

Note that the 'type' attribute is no longer needed for scripts as of HTML5. (http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element)

小开

Small tweak to Luke's answer,

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

and call it like, 

reloadJs("myFile.js");

This will not have any path related issues.

小开

Use this function to find all script elements containing some word and refresh them.

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>

小开

I know that is to late, but I want to share my answer. What I did it's save de script's tags in a HTML file, locking up the scripts on my Index file in a div with an id, something like this.

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

and when I wanted to refresh I just used.

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


});

提交答案