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

у меня есть страница, которая загружает скрипт от третьего лица (лента новостей). The 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 (идентификатор "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 не перезагружается.

есть идеи, что я делаю неправильно?

4 ответов


Как насчет добавления нового тега скрипта в

со скриптом для (повторной)загрузки? Что-то вроде ниже:
<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>

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


вот метод, который похож на Келли, но удалит любой ранее существующий скрипт с тем же источником и использует 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)


вы пытались удалить его из 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 slim, это не повлияет на результат) и повторно вставьте новый тег скрипта с тем же src, а также cachebuster.


небольшая настройка на ответ Люка,

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

и назвать его как

relaodJs("myFile.js");

это не будет иметь никаких проблем, связанных с пути.