在加载之前将 HTML 文档作为字符串获取答案

【问题标题】：Get HTML document as string before it has loaded在加载之前将 HTML 文档作为字符串获取
【发布时间】：2017-05-07 09:18:56
【问题描述】：

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

例如在这个sn-p中：

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

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

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

<script> 和 src="testscript1.js" 和另外两个 <script> 标签不存在，即记录的字符串不包含所有 HTML。

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

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

它记录其他 <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);

我得到了想要的结果。但我不喜欢它多么容易失败。例如，如果我将此代码作为 sn-p 粘贴到 stackoverflow 中，它不起作用，因为请求的文件不存在。如果文档被命名为notindex.html，它也会失败。

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

编辑

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

【问题讨论】：

标签： javascript html xmlhttprequest

【解决方案1】：

您可以使用DOMContentLoaded 事件在您的文档完全加载后运行函数：

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

【讨论】：

对不起，我没有说清楚。我想在整个页面加载之前访问所有的 HTML 内容。这就是我希望脚本位于顶部的原因。使用您的解决方案，它只是等到脚本加载完毕。这与将脚本放在<body> 的底部相同。我想知道这三个 <script> 标签 before 的存在。不过感谢您的回答！
如果您不希望浏览器运行脚本，您将不得不使用对该页面的外部请求（XMLHttpRequest 是一个选项，或者您可以使用其他一些服务器端语言那）