Jon*_*n M 62 html javascript script-tag news-feed
我有一个页面正在从第三方加载脚本(新闻源).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重新加载到它.
知道我做错了什么吗？
Kel*_*lly 63
如何使用脚本(<re)加载新的脚本标记到<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>
重点是插入一个新的脚本标记 - 您可以删除旧标记而不会产生任何后果.如果存在缓存问题,则可能需要向查询字符串添加时间戳.
Luk*_*uke 36
这是一个类似于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)
您是否尝试将其从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的新脚本标记,以及一个缓存清单.
对卢克回答的小调整，
function reloadJs(src) {
src = $('script[src$="' + src + '"]').attr("src");
$('script[src$="' + src + '"]').remove();
$('<script/>').attr('src', src).appendTo('head');
}
并称之为，
reloadJs("myFile.js");
这不会有任何与路径相关的问题。
使用此函数查找包含某个单词的所有脚本元素并刷新它们。
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>