Question

我查看了this和this对question的回答，但他们只获取了页面的HTML内容，直到执行代码的<script>。< / p>

例如，在此代码段中：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>

  <script type="text/javascript">
    console.log(new XMLSerializer().serializeToString(document));
  </script>

  <link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>
  <script type="text/javascript" src="testscript1.js"></script>
  <script type="text/javascript" src="testscript2.js"></script>
  <script type="text/javascript" src="testscript3.js"></script>
</body>

</html>

＆＃13;

如果您查看console.log()并滚动浏览stackoverflow内容，您会看到：

<script type="text/javascript">
    console.log(new XMLSerializer().serializeToString(document));
</script></body></html>

<script>与src="testscript1.js"和其他两个<script>标签不存在，I.E。记录的字符串不包含 all HTML。

如果您将日志记录脚本放在底部，如下所示：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>

  <link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>
  <script type="text/javascript" src="testscript1.js"></script>
  <script type="text/javascript" src="testscript2.js"></script>
  <script type="text/javascript" src="testscript3.js"></script>
  
  <script type="text/javascript">
    console.log(new XMLSerializer().serializeToString(document));
  </script>
</body>

</html>

＆＃13;

记录其他<script>标记。

问题

我的猜测是，由于我的脚本是同步加载的，因此日志会输出到目前为止已经加载的所有内容。 我怎么能避免这种情况？我希望我的日志<script>尽可能接近HTML的顶部，同时可以访问所有HTML内容。

我尝试了什么

如果我将此脚本放在<head>：

中

var req = new XMLHttpRequest();
req.open("GET", document.location.href + "index.html", false);
req.onreadystatechange = function () {
    if (req.readyState === 4) {
        if (req.status === 200 || req.status == 0) {
            console.log(req.responseText);
        }
    }
}

req.send(null);

我得到了理想的结果。但我不喜欢它容易失败的程度。例如，如果我在stackoverflow中将此代码粘贴为片段，则它不起作用，因为请求的文件不存在。如果文档名为notindex.html，则也会失败。

是否有通过XMLHttpRequest请求打开的HTML文档的替代方法或可靠方式？

修改

我想在加载所有样式表，脚本和图片之前访问所有HTML内容。这就是我希望日志记录脚本位于顶部的原因。 XMLHttpRequest做到了，但不可靠。

Answer 1

您可以使用DOMContentLoaded事件在文档完全加载后运行功能：

＆＃13;
＆＃13;
<!DOCTYPE html> <html> <head> <title>Test</title> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { console.log(new XMLSerializer().serializeToString(document)); }); </script> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <script type="text/javascript" src="testscript1.js"></script> <script type="text/javascript" src="testscript2.js"></script> <script type="text/javascript" src="testscript3.js"></script> </body> </html>
＆＃13;
＆＃13;
＆＃13;

在加载

问题

我尝试了什么

修改

1 个答案: