Как принудительно перезагрузить и повторно выполнить скрипт?
у меня есть страница, которая загружает скрипт от третьего лица (лента новостей). 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");
это не будет иметь никаких проблем, связанных с пути.