js_javascript 기술에서 스크립트를 동적으로 로드하는 방법 예제 요약-JS 튜토리얼-php.cn

이 기사의 예에서는 js에서 스크립트를 동적으로 로드하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

최근에는 회사의 프런트엔드 지도 제품을 모듈로 나누어야 하는데, 사용자가 어떤 기능을 사용하는지에 따라 어떤 모듈을 로드하게 되는지에 따라 사용자 경험이 향상될 수 있기를 바랍니다.

그래서 js 동적 스크립트 로딩에 대해 연구하려고 여기저기 찾아봤는데 정말 안타깝네요! , 인터넷에 거의 같은 글이 있습니다. 4가지 방법 남의 결과를 복사하고 원본 글에 대한 링크를 추가하지 않는 사람을 싫어합니다. 왜! 요점은 마지막 방법이 여전히 약간 잘못되었다는 것입니다. 이틀 간의 연구와 정보를 바탕으로 여기서 이를 여러분과 공유하고 싶습니다.

먼저 로드할 js 파일이 필요합니다. 고정 폴더에 package.js를 만든 후 그 안에 functionOne 메서드를 작성했습니다.

function functionOne(){
  alert("成功加载");
}

로그인 후 복사

이후 html 파일은 모두 같은 디렉토리에 생성됩니다.

방법 1: 직접 문서.작성

다음 코드를 사용하여 동일한 폴더 아래에 function1.html을 만듭니다.

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载js脚本
      document.write("<script src='package.js'><\/script>");
      //加载一个按钮
      document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

로그인 후 복사

document.write를 통해 페이지에 스크립트를 작성할 수 있습니다. 코드에 나와 있듯이 "초기 로드" 버튼을 클릭한 후 package.js 파일을 로드할 수 있지만, functionOne 메소드를 즉시 실행하면 로드되지 않습니다. 이 메소드를 찾을 수 있는데, 두 번째 버튼(document.write를 통해 동적으로 생성된 "Test Running Effect")을 클릭하면 스크립트가 로드되는 것으로 나타났습니다. 이 방법은 비동기 로딩이므로(다음 코드를 계속 실행하는 동안 추가 스레드가 열려 로드해야 하는 스크립트를 실행함) document.write가 인터페이스를 다시 작성하므로 이는 분명히 실용적이지 않습니다.

방법 2: 기존 스크립트의 src 속성을 동적으로 변경

다음 코드를 사용하여 동일한 폴더 아래에 function2.html을 만듭니다.

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

로그인 후 복사

이 방법의 장점은 인터페이스 요소를 변경하지 않고 인터페이스 요소를 다시 작성하지 않는다는 것입니다. 그러나 이 방법도 비동기적으로 로드되므로 동일한 문제가 발생합니다.

방법 3: 스크립트 요소를 동적으로 생성(비동기)

다음 코드를 사용하여 동일한 폴더 아래에 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 앞에 경고를 추가하여 메인 페이지 스크립트의 실행을 차단할 수 있습니다. 그런 다음 functionOne이 실행될 수 있거나 이후 코드를 다른 버튼에서 실행해야 합니다. 또는 타이머를 정의하고 정해진 시간 후에 다음 코드를 실행합니다. 그러나 프로젝트에서 이러한 메서드를 사용하는 것은 절대 불가능합니다.

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

방법 4: 스크립트 요소를 동적으로 생성(동기식)

다음 코드를 사용하여 동일한 폴더 아래에 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는