Как заставить скрипт перезагрузиться и выполнить заново? - PullRequest
Новая
       25

Как заставить скрипт перезагрузиться и выполнить заново?

58 голосов
/ 10 марта 2012

У меня есть страница, которая загружает скрипт от третьей стороны (лента новостей). URL-адрес src для сценария назначается динамически при загрузке (для стороннего кода). 

<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 (идентификатор "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 не загружается в него.

Есть идеи, что я делаю не так?

Ответы [ 5 ]

59 голосов
/ 10 марта 2012

Как насчет добавления нового тега скрипта в со скриптом для (повторной) загрузки?Примерно так: 

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

Главное - вставить новый скрипт-тег - вы можете удалить старый без последствий.Вам может потребоваться добавить метку времени в строку запроса, если у вас есть проблемы с кэшированием.

33 голосов
/ 15 мая 2013

Вот метод, который похож на метод Келли, но удалит все существующие сценарии с тем же источником и использует jQuery.

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

Обратите внимание, что атрибут «type» больше не требуется для сценариев начиная с HTML5.(http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element)

7 голосов
/ 10 марта 2012

Вы пытались удалить его из 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);

Это не сработает, если вы ожидаете, что сценарий будет меняться каждый раз, что, как я полагаю, является вашим случаем. Вы должны следовать предложению Келли, просто удалите старый тег сценария (просто чтобы DOM был тонким, это не повлияет на результат) и заново вставьте новый тег сценария с тем же src плюс кешбастер.

3 голосов
/ 14 сентября 2015

Небольшая поправка к ответу Люка, 

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

и назовите это как 

reloadJs("myFile.js");

У этого не будет проблем с путями.

1 голос
/ 06 ноября 2018

Используйте эту функцию, чтобы найти все элементы скрипта, содержащие какое-то слово, и обновить их. 

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