[javascript] 스크립트를 강제로 다시로드하고 다시 실행하는 방법은 무엇입니까?

Program / 글쓴이

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

요점은 새 스크립트 태그를 삽입하는 것입니다. 결과없이 이전 태그를 제거 할 수 있습니다. 캐싱 문제가있는 경우 쿼리 문자열에 타임 스탬프를 추가해야 할 수 있습니다.

답변

다음은 Kelly와 유사하지만 동일한 소스를 가진 기존 스크립트를 제거하고 jQuery를 사용하는 방법입니다. 

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

HTML5부터는 ‘type’속성이 더 이상 스크립트에 필요하지 않습니다. ( 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);

스크립트가 매번 변경 될 것으로 예상하면 작동하지 않습니다. Kelly의 제안에 따라 이전 스크립트 태그를 제거하고 (DOM을 슬림하게 유지하기 위해 결과에 영향을주지 않음) 동일한 src 및 캐시 버스터가있는 새 스크립트 태그를 다시 삽입해야합니다.

답변

Luke의 대답에 약간의 조정,

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

다음과 같이 부릅니다. 

reloadJs("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>

스 니펫 확장

답변

늦었 음을 알고 있지만 제 대답을 공유하고 싶습니다. 내가 한 일은 HTML 파일에 de script의 태그를 저장하고 ID가있는 div의 Index 파일에 스크립트를 잠그는 것입니다.

<div id="ScriptsReload"><script src="js/script.js"></script></div>

새로 고침하고 싶을 때 방금 사용했습니다.

$("#ScriptsReload").load("html_with_scripts_tags.html", "", function(
    response,
    status,
    request
  ) {

  });

답변