Question

请考虑以下事项：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        document.write('<script type="text/javascript" src="script2.js"></scr'+'ipt>');
        document.write('<script type="text/javascript" src="script3.js"></scr'+'ipt>');
        console.log(document.getElementsByTagName("script").length + " Scripts");
        console.log(document.head.innerHTML);
    </script>
</head>
<body>
</body>
</html>

您希望console.log包含哪些内容？我希望你得到我期望的两个结果之一：4 Scripts并且头部的innerHTML（document.write中显示的两个现有或全部四个脚本标签也可以写入正文，所以人们可以期望脚本标签作为身体的孩子注入。）

问题是，在Chrome和IE11中，通过document.write添加的第一个脚本标记显示在头部的innerHTML中，但第二个不是，并且DOM查询结果是{{1} }。

有人可以详细说明吗？

Answer 1

让它有机会在Chrome中呈现效果：

在脚本中我有script.js：x = 1，script2.js：y = 1和script3.js：z = 1

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        console.log("after 1",x);
        document.write('<script type="text/javascript" src="script2.js"><\/script>');
        document.write('<script type="text/javascript" src="script3.js"><\/script>');
        setTimeout(function() {
          console.log(document.getElementsByTagName("script").length + " Scripts");
          console.log(document.head.innerHTML);
          console.log("after 3",x,y,z)
        },100); // the milliseconds MAY need to be higher over the net
    </script>
</head>
<body>
</body>

结果：

4 Scripts

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
    document.write('<script type="text/javascript" src="script2.js"><\/script>');
    document.write('<script type="text/javascript" src="script3.js"><\/script>');
    setTimeout(function() {
      console.log(document.getElementsByTagName("script").length + " Scripts");
      console.log(document.head.innerHTML);
      console.log("after 3",x,y,z)
      },10)
</script><script type="text/javascript" src="script2.js"></script><script type="text/javascript" src="script3.js"></script>

after 3 1 1 1

Answer 2

使用document.write()是旧的bad way做事，您应该使用DOM：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        // Child 1
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'script2.js';
        document.getElementsByTagName('head')[0].appendChild(script);
        //Child 2
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'script3.js';
        document.getElementsByTagName('head')[0].appendChild(script);

        console.log(document.getElementsByTagName("script").length + " Scripts");
        console.log(document.head.innerHTML);
    </script>
</head>
<body>
</body>
</html>

返回4 Scripts

Answer 3

3计数的一个可能解释是通过document.write添加的脚本是同步执行的。所以：

脚本引擎执行包含document.write
的脚本块
- 脚本引擎将第一个脚本添加到DOM。
- 脚本引擎不会将第二个脚本添加到DOM - 它必须等待第一个脚本下载并执行。毕竟，第一个脚本可以执行document.write("<!--");
- 脚本引擎返回计数3
脚本引擎下载第一个脚本并执行它。
脚本引擎将第二个脚本添加到DOM，下载并执行它。

请记住，JavaScript是单线程的。这可以防止执行document.write生成的脚本标记，直到生成脚本标记的脚本完成为止。

Answer 4

这是因为你在另一个脚本标签内写了一个脚本标签并最终创建了无效标记（我可能错了，但我的理论与你所看到的相符）

1---> <script type="text/javascript" src="script.js"></script>

2---> <script type="text/javascript">
          <script type="text/javascript" src="script2.js">
       </script>

3---> <script type="text/javascript" src="script3.js">
          </script>
      </script>

也许？！

<强>更新

经过一段时间的游戏，我同意@mplungjan，这是一个时间问题。这按预期工作。脚本计数现在已经过了5

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        document.write('<script type="text/javascript" src="script2.js"></scr'+'ipt>');
        document.write('<script type="text/javascript" src="script3.js"></scr'+'ipt>');
    </script>
    <script type="text/javascript">
        console.log(document.getElementsByTagName("script").length + " Scripts");
        console.log(document.head.innerHTML);
    </script>
</head>
<body>
</body>
</html>

究竟什么是innerHTML，document.write是如何工作的？

4 个答案: