Javascript 如何获得完全计算的 HTML（而不是源 HTML）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6364138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get fully computed HTML (instead of source HTML)?
提问by mix
Given a webpage that uses lots of javascript to generate its HTML, how can I get the final computed HTML being parsed by the browser instead of the source HTML? In other words, presume a page has lots of tags surrounding javascript functions that, when called, return some HTML. When I view the source of the page, I see the script function call, not the HTML it produces.
给定一个使用大量 javascript 生成其 HTML 的网页，如何让浏览器解析最终计算出的 HTML 而不是源 HTML？换句话说，假设一个页面有很多围绕 javascript 函数的标签，当调用时，返回一些 HTML。当我查看页面的源代码时，我看到的是脚本函数调用，而不是它生成的 HTML。
How could I get all of the HTML produced by a webpage?
如何获得网页生成的所有 HTML？
I've noticed that Firebug appears able to see the HTML instead of the scripts, but it doesn't appear to have any way to save the whole page, only little segments of it.
我注意到 Firebug 似乎能够看到 HTML 而不是脚本，但它似乎没有任何方法来保存整个页面，只有它的一小部分。
Update:
更新：
Thanks for all the answers. However, I'm still not getting the HTML I see in Firebug's console with any of those techniques. For my example page, I'm using the 'Info' tab of my own Facebook profile. If you view source on that page, you'll see lots of scripts with the title 'big_pipe.onPageletArrive()'. However, if you look at it in Firebug, each of those function calls renders out to HTML. I tried the right-click on the tag in Firebug, the View Generated Source in the Webdev Toolbar, and the Chrome suggestion, but they all give me the script call, not the HTML.
感谢所有的答案。但是，我仍然没有使用任何这些技术获得我在 Firebug 控制台中看到的 HTML。对于我的示例页面，我使用的是我自己的 Facebook 个人资料的“信息”选项卡。如果您在该页面上查看源代码，您会看到许多标题为“big_pipe.onPageletArrive()”的脚本。但是，如果您在 Firebug 中查看它，每个函数调用都会呈现为 HTML。我尝试右键单击 Firebug 中的标记、Webdev 工具栏中的查看生成的源代码和 Chrome 建议，但它们都给了我脚本调用，而不是 HTML。
Any other ideas?
还有其他想法吗？
Update 2:
更新 2：
When I said each of those functions renders out to HTML in Firebug, I wasn't quite correct. They only render out if I select them in the page and right click->Inspect Element. Then it appears to render it out. So maybe my question has become how do you get Firebug to automatically render out all of the HTML so you can select and save it? (Or I'm open to any other solution for grabbing this HTML).
当我说这些函数中的每一个都在 Firebug 中呈现为 HTML 时，我不太正确。如果我在页面中选择它们并右键单击->检查元素，它们只会呈现出来。然后它似乎呈现出来。所以也许我的问题变成了如何让 Firebug 自动呈现所有 HTML，以便您可以选择并保存它？（或者我对任何其他获取此 HTML 的解决方案持开放态度）。
采纳答案by thirtydot
With Firebug's HTML tab, you can right click on the <html>element, and click "Copy HTML".
使用 Firebug 的 HTML 选项卡，您可以右键单击该<html>元素，然后单击“复制 HTML”。
You can do the same thing with Developer Tools in Chrome/Safari.
您可以使用 Chrome/Safari 中的开发人员工具执行相同的操作。
回答by George Cummins
The Web Developer Toolbarfor Firefox has a "View Generated Source" option which provides this functionality.
Firefox的Web 开发人员工具栏有一个“查看生成的源代码”选项，可提供此功能。
回答by HopefullyHelpful
with (window.open("")) {
document.open("text/html");
document.write("<!--\n"); //for live version delete this line
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("\n//-->"); //for live version delete this line
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
- Open console
- copy paste the above code and execute
- it opens an empty page,
- now inspect the page with right click or f12,
- copy outerhtml of the comment
- paste wherever you want
- optionally remove the comment at the start and end
- 打开控制台
- 复制粘贴上面的代码并执行
- 它打开一个空白页面，
- 现在通过右键单击或 f12 检查页面，
- 复制评论的外层html
- 粘贴到任何你想要的地方
- 可选择删除开头和结尾的注释
If you want a live version that is clickable, then simple leave out the comment tags in the above code.
如果你想要一个可点击的实时版本，那么简单地省略上面代码中的注释标签。
回答by twarped
document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>so yea, use that...
所以是的，使用那个......
回答by Premature Optimization
It is not possible generally. Here is excerpt from my bookmarklet which relies on non-standard outerHTML:
一般是不可能的。这是我的书签的摘录，它依赖于非标准outerHTML：
with (window.open("")) {
document.open("text/html");
document.write("<PRE>");
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("</PRE>");
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
Note: DTD is missing and not retrievable at all.
注意：DTD 缺失且根本无法检索。
