Summary of method examples of dynamically loading scripts in js

The example in this article describes the method of dynamically loading scripts in js. Share it with everyone for your reference, the details are as follows:

Recently, the company's front-end map product needs to be divided into modules. It is hoped that users will load which module according to which function they use. This can improve the user experience.

So I searched everywhere to study the loading of js dynamic scripts, but it’s really sad! , there are almost the same articles on the Internet, 4 methods. I hate people who copy other people's results and don't add a link to the original article. Why! The point is that the last method is still a little wrong. After two days of research and information, I would like to share it with you here.

First we need a js file to be loaded. I created a package.js in a fixed folder. After opening it, I wrote a method functionOne in it. It is very simple. The code is as follows:

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

Copy after login

The subsequent html files are all created in the same directory.

Method 1: Direct document.write

Create a function1.html under the same folder with the following code:

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

Copy after login

You can write scripts to the page through document.write. As shown in the code, you can load the package.js file after clicking the button "Initial Load", but if you run the method functionOne immediately, you will not be able to find this method. Report Error, but clicking the second button ("Test Running Effect" dynamically created through document.write) found that it can be executed. At this time, the script has been loaded. Since this method is asynchronous loading (while continuing to execute the following code, an additional thread is opened to execute the script that needs to be loaded), and document.write will rewrite the interface, which is obviously not practical.

Method 2: Dynamically change the src attribute of an existing script

Create a function2.html under the same folder with the following code:

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

Copy after login

The advantage of this method is that it does not change the interface elements and does not rewrite the interface elements. However, it is also loaded asynchronously and will have the same problem.

Method 3: Dynamically create script elements (asynchronous)

Create a function3.html under the same folder with the following code:

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

Copy after login

The advantage of this method compared to the second method is that there is no need to write a script tag in the interface at the beginning. The disadvantage is asynchronous loading and the same problem.

These three methods are all executed asynchronously, so while loading these scripts, the scripts on the main page continue to run. If the above methods are used, the following code will not have the expected effect.

However, you can add an alert in front of functionOne to block the running of the main page script. Then you find that functionOne can run, or your later code needs to be executed under another button. Do it step by step, or else Just define a timer and execute the following code after a fixed time. However, it is definitely impossible to use these methods in the project.

In fact, the third method can be changed to synchronous loading with a few changes.

Method 4: Dynamically create script elements (synchronously)

Create a function4.html under the same folder with the following code:

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

Copy after login

This method does not load external js files, but adds sub-items to myScript. In Firefox, Safari, Chrome, Opera and IE9, this code works fine. However, it will cause errors in IE8 and lower versions. IE treats

Summary of method examples of dynamically loading scripts in js_javascript skills