홈>

javascript - 새로 고친 후에 만 ​​작동하는 JS 또는 JQ의 동적으로로드 된 스크립트

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 태그에 스크립트를로드하려고 시도했지만 결과는 동일합니다. 이것에 대한 이유는 무엇입니까?

javascript

  • 답변 # 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가 레이아웃을 업데이트하지 않습니다