Как заставить скрипт перезагрузиться и выполнить заново?
У меня есть страница, которая загружает скрипт от третьей стороны (новостная лента). 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 не загружается в него.
Есть идеи, что я делаю не так?
9 ответов
Как насчет добавления нового тега script в
со скриптом для (повторной) загрузки? Что-то вроде ниже:<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)
Вы пытались удалить его из 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, а также кешбастером.
Небольшая поправка к ответу Люка,
function reloadJs(src) {
src = $('script[src$="' + src + '"]').attr("src");
$('script[src$="' + src + '"]').remove();
$('<script/>').attr('src', src).appendTo('body');
}
и называть это как,
relaodJs("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>Используя PipesJS, я могу разбавить это до
<dyn insert="here" id="clickity" ajax="url">Click for refresh</dyn>
<!-- <dyn> is a dynamic linker in PipesJS -->
<article id="here"></article>
Вы можете использовать это состояние, чтобы повлиять на статью так же, как на источник JS.
Итак, используя
<dyn attribution="src-attr" class-attr="src:newjs.js;" id="clickity">Click for refresh</dyn>
<!-- attribution is the class of tags getting the new attr, src="newjs.js"-->
<script class="src-attr" src="scripty.js"></script>
сделаю то же самое, что и<article>в этом объеме. Он заполнит внутренний HTML.
если хотите, используйте идентификатор на<head>ярлык.
Вы можете вставлять вытесняющие функции и использовать их в тандеме с PipesJS. вы также можете использовать функции, которые идут после вызова.
Если вы предпочитаете использовать таймер, это можно сделать, создав
setInterval(function(input) { document.getElementById("clickity").click(); }, 3000);
объект setInterval(). 3000 это в мс.
Вы можете увидеть PipesJS здесь.
добавьте класс в тег сценария, а затем оберните свой сценарий в функцию и добавьте имя функции-оболочки в качестве атрибута
тогда сделай это
Я просто вызываю функцию для новых элементов после того, как они добавлены в DOM, вместо перезагрузки всех скриптов.
Я знаю, что это слишком поздно, но хочу поделиться своим ответом. Что я сделал, так это сохранил теги скрипта в файле HTML, заблокировав скрипты в моем индексном файле в div с идентификатором, что-то вроде этого.
<div id="ScriptsReload"><script src="js/script.js"></script></div>
и когда я хотел обновить, я просто использовал.
$("#ScriptsReload").load("html_with_scripts_tags.html", "", function(
response,
status,
request
) {
});