IT技术 - 如何将整个文档 HTML 作为字符串获取？ - 吾爱随笔录

MS前段时间添加了outerHTML和innerHTML属性。

根据MDN，outerHTMLFirefox 11、Chrome 0.2、Internet Explorer 4.0、Opera 7、Safari 1.3、Android、Firefox Mobile 11、IE Mobile、Opera Mobile 和 Safari Mobile 均受支持。outerHTML在DOM 解析和序列化规范中。

有关浏览器兼容性的信息，请参阅quirksmode以了解对您有用的内容。都支持innerHTML。

var markup = document.documentElement.innerHTML;
alert(markup);

externalHTML 没有得到文档类型。

2021-03-15 15:43:58

像魅力一样工作！谢谢！有没有办法获得链接到文档的任何/所有文件的大小以及包括 js 和 css 文件？

2021-03-16 15:43:58

请注意，这或这些答案中的任何一个都不一定会为您提供与将页面保存到文件或由视图源生成的文件完全等效的哈希值的内容。似乎 DOM 规范了文字响应内容中的某些字段，例如大写 DOCTYPE 标头

2021-03-24 15:43:58

@CMCDragonkai：您可以单独获取文档类型并将其添加到标记字符串中。不理想，我知道，但可能。

2021-04-08 15:43:58

你可以做

new XMLSerializer().serializeToString(document)

在比 IE 9 更新的浏览器中

见https://caniuse.com/#feat=xml-serializer

这是根据日期/时间戳记的第一个 正确答案。页面的某些部分（例如 XML 声明）将不包含在内，浏览器将在使用其他“答案”时操纵代码。这是唯一应该投票的帖子（dos 是在三天后发布的）。人们需要注意！

2021-03-14 15:43:58

@约翰井OP实际询问“整个HTML中的html标签”。科林·伯内特 (Colin Burnett) 选定的最佳答案确实实现了这一点。这个特定的答案（Erik 的）将包括 html 标签和 doctype。也就是说，这对我来说完全是一颗未加工的钻石，正是我正在寻找的东西！你的评论也有帮助，因为它让我在这个答案上花更多的时间，所以谢谢:)

2021-03-14 15:43:58

这并不完全正确，因为它 serializeToString 执行 HTML 编码。例如，如果您的代码包含定义字体的样式，例如“Times New Roman”、Times、serif，引号将被 html 编码。也许这对你们中的一些人来说并不重要，但对我来说却是……

2021-03-19 15:43:58

我认为人们应该小心这个，特别是因为它返回的值不是浏览器接收的实际 html。就我而言，它向html服务器从未实际发送的标签添加了属性:(

2021-04-04 15:43:58

每个浏览器都支持它。这个糟糕的浏览器支持如何？

2021-04-10 15:43:58

我相信document.documentElement.outerHTML应该为你回报。

根据MDN，outerHTMLFirefox 11、Chrome 0.2、Internet Explorer 4.0、Opera 7、Safari 1.3、Android、Firefox Mobile 11、IE Mobile、Opera Mobile 和 Safari Mobile 均受支持。outerHTML在DOM 解析和序列化规范中。

outerHTML属性上的 MSDN 页面指出它在 IE 5+ 中受支持。Colin 的回答链接到 W3C quirksmode 页面，该页面提供了跨浏览器兼容性的良好比较（也适用于其他 DOM 功能）。

@Colin：是的，很好。根据经验，我似乎记得 IE 6+ 和 Firefox 都支持它，尽管您链接的 quirksmode 页面另有暗示...

2021-03-19 15:43:58

并非所有浏览器都支持这一点。

2021-03-24 15:43:58

Firefox 不支持 OuterHTML。它是 IE 专有的。developer.mozilla.org/En/...

2021-03-25 15:43:58

我的是第一个，实际上。:P

2021-03-27 15:43:58

有没有办法获得包括 doctype 和 html 标签在内的所有内容？

2021-04-05 15:43:58

我尝试了各种答案以查看返回的内容。我正在使用最新版本的 Chrome。

建议document.documentElement.innerHTML;返回<head> ... </body>

Gaby 的建议得到document.getElementsByTagName('html')[0].innerHTML;了同样的回报。

document.documentElement.outerHTML;返回的建议<html><head> ... </body></html> 是除“文档类型”之外的所有内容。

您可以使用document.doctype; This 返回一个对象而不是字符串来检索 doctype 对象，因此如果您需要将详细信息提取为所有 doctypes 的字符串，包括 HTML5，请在此处进行描述：Get DocType of an HTML as string with Javascript

我只想要 HTML5，所以以下内容足以让我创建整个文档：

alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);

这是最完整的答案，应该被接受。截至 2016 年，浏览器兼容性已完成，不再需要详细提及（如当前接受的答案）。

2021-03-17 15:43:58

你也可以这样做：

document.getElementsByTagName('html')[0].innerHTML

你不会得到 Doctype 或 html 标签，但其他一切......