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

Question

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

考虑以下:

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

Run Code Online (Sandbox Code Playgroud)

你期望console.log包含什么？我希望你能得到我期望的两个结果中的一个:4 Scripts并且头部的innerHTML中显示的两个现有或全部四个脚本标签(document.write也可以写入正文,因此可以预期脚本标记将被注入身体的孩子).

问题是,在Chrome和IE11中,通过document.write添加的第一个脚本标记显示在头部innerHTML,但第二个不是,DOM查询结果是3 Scripts.

有人可以详细说明吗？

Answer 1

mpl*_*jan 2

让它有机会在 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>

Run Code Online (Sandbox Code Playgroud)

结果：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，10 月前
查看次数：	590 次
最近记录：	10 年，10 月前