动态添加的JavaScript以实现即时执行

Question

动态添加的JavaScript以实现即时执行

javascriptdom

5

我正在使用DOM动态向页面添加脚本。

如果我添加脚本文本（例如，script.text = "...";），它会立即运行。
但是，如果我添加外部脚本（例如，script.src = "...";），它将在我的脚本完成后运行。

因此，在下面的示例中，我将得到

"0 1 2"

和

"3 3 3"

分别。

（1.js包含相同的字符串 - "document.body.innerHTML += i"）

<body>
  <script>
    for (i = 0; i < 3; i++) {
      var script = document.createElement('script');
      script.src = "1.js";
      //  script.text = "document.body.innerHTML += i";
      document.body.append(script);
    };
  </script>
</body>

我不理解为什么它会以这种方式工作，如何在添加后立即运行1.js？

- Illia

为什么你一遍又一遍地在body中添加同样的JavaScript文件（**"1.js"**）？ - Sourabh Somani

因为我想让它使用不同的参数再次运行。 - Illia

除此之外，为什么要加载具有不同参数的脚本，而不是利用带有参数的函数呢？ - stewo

@lynx 因为我必须使用一个外部脚本，而我无法访问它，只能调整该脚本使用的参数。 - Illia

2个回答

1

尝试多次后，我认为这与浏览器的解析有关。当您动态添加 script 时，如果指定了 src，则其内容不会立即加载和运行。其内容的运行时与浏览器不同。以下代码在Chrome、Firefox和IE8中运行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var script = document.createElement('script')
    script.src = './test.js'  //test.js   alert(2)
    document.body.appendChild(script)
    alert(3)
</script>
<script>
  alert(8)
</script>
</body>
</html>

结果：

在IE8和Firefox中，alert的顺序是3 2 8

在Chrome中，alert的顺序是3 8 2

结论：

在IE8和Firefox中，

您动态添加的script内容将在当前脚本完全运行后运行。

在Chrome中，

您动态添加的script内容将在其他内容加载后运行。

- Kermit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- revo · Accepted Answer

外部脚本的动态加载是按照浏览器请求的顺序排队进行的。这意味着它们在下载后不会立即执行。

W3 HTML5规范Scripting章节：

如果该元素具有src属性，不具有async属性，并且没有设置"force-async"标志，则该元素必须被添加到与脚本元素的Document关联的尽快按顺序执行的脚本列表的末尾，此时准备脚本算法已经开始。