자바스크립트에서 스크립트 요소 인스턴스의 동기 및 비동기 동적 생성에 대한 자세한 설명-JS 튜토리얼-php.cn

동적으로 스크립트 요소 생성(비동기)

동일한 폴더에 function3.html을 생성합니다. 코드는 다음과 같습니다.

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

로그인 후 복사

두 번째 방법에 비해 이 방법의 장점은 스크립트를 작성할 필요가 없다는 것입니다. 시작 부분의 인터페이스 태그의 단점은 동일한 문제가 있는 비동기 로딩입니다.

이 세 가지 방법은 모두 비동기식으로 실행되므로 이러한 스크립트를 로드하는 동안 기본 페이지의 스크립트가 계속 실행됩니다. 위의 방법을 사용하면 다음 코드가 예상한 효과를 얻지 못합니다.

하지만 functionOne 앞에 경고를 추가하여 메인 페이지 스크립트 실행을 차단할 수 있습니다. 그렇지 않으면 나중에 코드를 다른 버튼에서 실행해야 합니다. 정해진 시간 이후에 다음 코드를 실행하도록 타이머를 정의하지만 프로젝트에서는 이러한 메서드를 사용하는 것이 확실히 불가능합니다.

사실 세 번째 방법은 몇 가지만 변경하면 동기 로딩이 될 수 있습니다.

스크립트 요소를 동적으로 생성합니다(동기적으로)

동일한 폴더에 function4.html을 생성합니다. 코드는 다음과 같습니다.

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

로그인 후 복사

이 방법은 외부 js 파일을 로드하지 않지만 myScript에 하위 항목을 추가합니다. Firefox, Safari, Chrome, Opera 및 IE9에서는 이 코드가 제대로 작동합니다. 하지만 IE8 이하 버전에서는 오류가 발생합니다. IE는

저자별 최신 기사