在加载之前将 HTML 文档作为字符串获取 [英] Get HTML document as string before it has loaded

查看：22
本文介绍了在加载之前将 HTML 文档作为字符串获取的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我查看了这个和this 回答那个问题，但他们只获取页面的 HTML 内容，直到执行代码的 <link type="text/css" rel="stylesheet" href="style.css"><身体><script type="text/javascript" src="testscript1.js"></script><script type="text/javascript" src="testscript2.js"></script><script type="text/javascript" src="testscript3.js"></script></html>

如果您查看 console.log() 并滚动过去的 stackoverflow 内容，您会看到:

</html>

它记录其他 <link type="text/css" rel="stylesheet" href="style.css"><身体><script type="text/javascript" src="testscript1.js"></script><script type="text/javascript" src="testscript2.js"></script><script type="text/javascript" src="testscript3.js"></script></html>

I looked at this and this answer to that question, but they only get the HTML contents of the page up until the <script> that executes the code.

For example, in this snippet:

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

if you take a look at the console.log() and scroll past the stackoverflow stuff, you'll see:

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

the <script> with src="testscript1.js" and the other two <script> tags are not present, I.E. the logged string does not contain all the HTML.

If you put the logging script at the bottom like this:

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

it logs the other <script> tags.

Question

My guess is that since my scripts are loaded synchronously, the log outputs whatever has been loaded up to this point. How could I avoid that? I want my logging <script> to be as close to the top of the HTML as possible, while having access to all the HTML content.

What I've tried

If I put this script in the <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);

I get the desired result. But I don't like how easily it could fail. For example, if I paste this code as a snippet here in stackoverflow, it doesn't work because the requested file doesn't exist. If the document is named notindex.html, it would fail too.

Are there any alternatives or a reliable way to request the opened HTML document via an XMLHttpRequest?

Edit

I want to have access to all the HTML content before all stylesheets, scripts and images have loaded. That's the reason I want the logging script to be at the top. The XMLHttpRequest does it, but is unreliable.

解决方案

You can use the DOMContentLoaded event to run the function after your document has completely loaded:

<!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 文档作为字符串获取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆