Question

我使用DOM动态地将脚本添加到页面。

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

所以在下面的例子中我会得到

＆＃34; 0 1 2＆＃34;

和

＆＃34; 3 3 3＆＃34;

分别

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

Answer 1

尝试多次后，我认为它与浏览器的解析有关。当您动态添加script时，如果指定了src，其内容将无法加载并立即运行。其内容的运行时与浏览器不同

以下代码在chrome，firefox和IE8中运行：

＆＃13;

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

＆＃13;

结果：

在IE8，Firefox中，alert的序列为3 2 8

在Chrome中，alert的序列为3 8 2

结论：

在IE8和Firefox中，

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

在Chrome中，

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

Answer 2

外部脚本的动态加载排队，以便通过浏览器请求它们。这意味着它们在下载后不会立即执行。

W3 HTML5规范Scripting部分：

如果元素具有src属性，则没有async属性，   并且没有设置"force-async"标记

必须将元素添加到脚本列表的末尾，该脚本将尽快与<{3}}脚本Document关联，并按顺序执行时间element算法已开始。

动态添加javascript以立即执行

2 个答案: