>

JS 또는 JQ로 스크립트를로드하려고 할 때 문제가 거의 없습니다. 본문 하단에 jquery를 추가하고 그 뒤에 다른 스크립트를 추가했습니다. 이 스크립트에서 하나 이상의 스크립트를로드하고 있지만 때때로 작동하려면 페이지를 새로 고쳐야합니다.

JS로 시도했습니다 :

$(window).on("load", function() {
    var script = document.createElement("script");
    script.src = "scriptPath.js";
    script.async = false; // the result is same with true
    script.onload = function () {
      //do something here
    };
    document.body.appendChild(script);
 });

JQ로 시도했습니다 :

 $(window).on("load", function() {
    $.getScript( "scriptPath.js" )
      .done(function() {
        //do something here
      })
      .fail(function() {
        //do something here
    });
  });

또한 head 태그에 스크립트를로드하려고 시도했지만 결과는 동일합니다. 이것에 대한 이유는 무엇입니까?


  • 답변 # 1

    다음은 작동하는 스 니펫입니다 ..

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>title</title>
    </head>
    <body>
        <div>
            BOO
        </div>
        <script>
            (function () {
                var script = document.createElement("script");
                script.src = "2.js";
                script.async = false; // the result is same with true
                script.onload = function () {
                    console.log(booVar);
                };
                document.body.appendChild(script);
            })();
        </script>
    </body>
    </html>
    
    

    2.js 콘텐츠 :

    var booVar = 'booV';
    
    
    이 경우 섹션은 본문 끝에 있습니다. 동일한 스크립트가 부분에 있으면 document.body가 그 시점에서 null이기 때문에 작동하지 않습니다.

관련 자료

  • 이전 TypeScript 클래스는 개인 함수로 클래스를 구현합니다
  • 다음 reactjs - Nested React Router가 레이아웃을 업데이트하지 않습니다