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


78

我有一个页面正在从第三方(新闻提要)加载脚本。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重新加载到该警报。

知道我在做什么错吗?


我不知道浏览器是否了解您是否希望它再次下载js,因为您试图一遍又一遍地加载相同的url。它可能认为它是相同的,并且不会打扰。更改src时,请尝试使用缓存技术:scrElement.src='http://oneBigHairyURL?v=2'; //auto-increment this value
Matt K

@Matt K.是的,我应该发布我已经尝试过的方法,但无济于事。抱歉,这不是原始帖子的一部分。
乔纳森·M

@JonathanM我陷入同样的​​困境,您找到解决方案了吗?添加版本无效。
Parth 2015年

1
@ Dr.Net,选择的答案对我有用。
Jonathan M

@JonathanM通过生成新的脚本标记,它确实起作用。如何加载相同的标签但仅更改'src'属性的值呢?
Parth 2015年

Answers:


73

如何将新脚本标记添加到<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>

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


22
对于缓存问题,最好的办法是在网址中添加时间戳记'hello.js?cachebuster='+ new Date().getTime()
Juan Mendes 2012年

@Juan Mendes,没错,因为必须重新加载新闻提要。仅在需要重新运行时才需要缓存时才跳过它,并且新的不必要的负载将减慢运行速度,例如脚本不变。

41

这是一种与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


1
大!!经过大量搜索,它对我有很大帮助。谢谢。
萨拉赫丁(Mal。Salahuddin)2014年

2
您可以添加新的JS,但不能摆脱旧的JS。原始脚本中的所有侦听器等都将保持活动状态,即使您删除其脚本标签也是如此。
user984003

9

您是否尝试过将其从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和cachebuster重新插入新的脚本标签。


4

略微调整卢克的答案,

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

并称它为

reloadJs("myFile.js");

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


1
不应该.appendTo('head')代替身体吗?
乔纳森·M

@JonathanM我们通常将脚本保留在正文的末尾。当我发布此消息时,这对我有用。我认为,如果需要,您也可以附加在头上。
Maleen Abewardana '16

1
这是一个

2

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

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>


0

我知道这太迟了,但是我想分享我的答案。我所做的是将脚本的标记保存在HTML文件中,将索引文件中的脚本锁定在具有ID的div中,类似这样。

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

当我想刷新时,我只是用过。

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

  });
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.