我看了this和 this回答question ，但他们只能获取页面的 HTML 内容，直到 <script>。执行代码。
例如，在这个片段中:
<!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);
我得到了想要的结果。但我不喜欢它有多么容易失败。例如，如果我将此代码作为代码片段粘贴到 stackoverflow 中，则它不起作用，因为请求的文件不存在。如果文档名为 notindex.html , 它也会失败。
是否有任何替代方法或可靠的方法来通过 XMLHttpRequest 请求打开的 HTML 文档?
编辑
我想在加载所有样式表、脚本和图像之前访问所有 HTML 内容。这就是我希望日志记录脚本位于顶部的原因。 XMLHttpRequest可以，但不可靠。
最佳答案
您可以使用 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>关于javascript - 在加载之前将 HTML 文档作为字符串获取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43829832/