스크립트를 강제로 다시로드하고 다시 실행하는 방법은 무엇입니까?
제 3 자 (뉴스 피드)에서 스크립트를로드하는 페이지가 있습니다. 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이 다시로드되지 않습니다.
내가 뭘 잘못하고 있는지 아십니까?
(재)로드 할 스크립트와 함께 <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>
The main point is inserting a new script tag -- you can remove the old one without consequence. You may need to add a timestamp to the query string if you have caching issues.
Here's a method which is similar to Kelly's but will remove any pre-existing script with the same source, and uses jQuery.
<script>
function reload_js(src) {
$('script[src="' + src + '"]').remove();
$('<script>').attr('src', src).appendTo('head');
}
reload_js('source_file.js');
</script>
Note that the 'type' attribute is no longer needed for scripts as of HTML5. (http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#the-script-element)
Have you tried removing it from the DOM, then inserting it back again?
I just did, that doesn't work. However, creating a new script tag and copying the contents of the existing script tag, then adding it, works well.
See my example 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);
This won't work if you expect the script to change every time, which I believe is your case. You should follow Kelly's suggestion, just remove the old script tag (just to keep the DOM slim, it won't affect the outcome) and reinsert a new script tag with the same src, plus a cachebuster.
Small tweak to Luke's answer,
function reloadJs(src) {
src = $('script[src$="' + src + '"]').attr("src");
$('script[src$="' + src + '"]').remove();
$('<script/>').attr('src', src).appendTo('head');
}
and call it like,
reloadJs("myFile.js");
This will not have any path related issues.
Use this function to find all script elements containing some word and refresh them.
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>참고URL : https://stackoverflow.com/questions/9642205/how-to-force-a-script-reload-and-re-execute
'developer tip' 카테고리의 다른 글
| Emacs에서 시맨틱 Jump to Symbol을 사용한 후 이전 줄 위치로 돌아가는 방법은 무엇입니까? (0) | 2020.12.01 |
|---|---|
| 문자열을 char * 포인터에 할당 할 수 있지만 char [] 배열에는 할당 할 수없는 이유는 무엇입니까? (0) | 2020.12.01 |
| 기본 이메일 클라이언트를 자동으로 열고 콘텐츠를 미리 채 웁니다. (0) | 2020.12.01 |
| 숫자의 자릿수 합산-파이썬 (0) | 2020.12.01 |
| C ++ 11 스레드로부터 안전한 큐 (0) | 2020.12.01 |