Home > Article > Web Front-end > Detailed explanation of synchronous and asynchronous dynamic creation of script element instances in javascript

Detailed explanation of synchronous and asynchronous dynamic creation of script element instances in javascript

伊谢尔伦Original: 2017-07-21 15:21:042594browse

Dynamic creation of script elements (asynchronous)

Create a function3.html under the same folder, the code is as follows:

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

The advantage of this method compared to the second one is There is no need to write a script tag in the interface from the beginning. The disadvantage is still asynchronous loading, which has 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.

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

In fact, the third method can be changed to synchronous loading with a little change.

Dynamic creation of script elements (synchronous)

Create a function4.html under the same folder, the code is as follows:

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

This method does not load external js files , but added subkeys to myScript. In Firefox, Safari, Chrome, Opera and IE9, this code works fine. But it will cause errors in IE8 and below versions. IE treats 3f1c4e4b6b16bbbd69b2ee476dc4f83a as a special element and does not allow DOM access to its child nodes. However, you can use the text attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a element to formulate js code, as in the following example:

var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();

The code modified in this way can run in IE, Firefox, Opera and Safari3 and later versions. Versions of Safari prior to 3.0, although they did not correctly support the text attribute, did allow the use of text node technology to specify code. If you need to be compatible with earlier versions of Safari, you can use the following code:

var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
    myScript.appendChild(document.createTextNode(code));
}
catch (ex){
    myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();

Here, first try the standard DOM text node method, because all browsers except IE8 and below support this method. If this line of code throws an error, it means IE8 or below, so the text attribute must be used. The entire process can be represented by the following function:

function loadScriptString(code)
{
  var myScript= document.createElement("script");
  myScript.type = "text/javascript";
  try{
    myScript.appendChild(document.createTextNode(code));
  }
  catch (ex){
    myScript.text = code;
  }
  document.body.appendChild(myScript);
}

Then you can use this method elsewhere to load the code you need to use. In fact, executing the code this way is the same as passing the same string to eval() in the global function.

The above is the detailed content of Detailed explanation of synchronous and asynchronous dynamic creation of script element instances in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how to optimize code for javascript file loadingNext article：Detailed explanation of how to optimize code for javascript file loading

See more

Detailed explanation of synchronous and asynchronous dynamic creation of script element instances in javascript

Related articles