Question

鉴于一个网页使用大量的javascript来生成HTML，我怎样才能让浏览器而不是源HTML解析最终计算的HTML？换句话说，假定一个页面有许多围绕javascript函数的标签，当被调用时，返回一些HTML。当我查看页面的源时，我看到脚本函数调用，而不是它生成的HTML。

我怎样才能获得网页制作的所有HTML？

我注意到Firebug似乎能够看到HTML而不是脚本，但它似乎没有任何方法来保存整个页面，只有它的一小部分。

更新

感谢所有答案。但是，我仍然没有使用任何这些技术获取我在Firebug控制台中看到的HTML。对于我的示例页面，我正在使用我自己的Facebook个人资料的“信息”标签。如果您在该页面上查看源代码，您将看到许多标题为“big_pipe.onPageletArrive（）”的脚本。但是，如果您在Firebug中查看它，那么每个函数调用都会呈现为HTML。我尝试右键单击Firebug中的标记，Webdev工具栏中的View Generated Source和Chrome建议，但它们都给了我脚本调用，而不是HTML。

还有其他想法吗？

更新2：

当我说每个函数在Firebug中呈现为HTML时，我不太正确。如果我在页面中选择它们并右键单击 - ＆gt;检查元素，它们只会渲染出来。然后它似乎将其渲染出来。所以也许我的问题变成了如何让Firebug自动渲染出所有HTML，以便您可以选择并保存它？（或者我对任何其他解决方案都持开放态度。）

Answer 1

使用Firebug的HTML标签，您可以右键单击<html>元素，然后点击“复制HTML”。

您可以使用Chrome / Safari中的开发者工具执行相同的操作。

Answer 2

Firefox的Web Developer Toolbar有一个“查看生成源”选项，可以提供此功能。

Answer 3

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();
}

打开控制台
复制粘贴上面的代码并执行
它会打开一个空白页面，
现在通过右键单击或按f12检查页面，
复制评论的外部HTML
粘贴到您想要的任何地方
（可选）在开头和结尾处删除评论

如果您想要一个可点击的实时版本，则只需在上面的代码中省略注释标签即可。

Answer 4

select count(*), {PointOfService.name} from {Order left join PointOfService on {Order.pointOfService} = {PointOfService.pk}} where {creationTime} >= '2019-10-01' GROUP by {PointOfService.name} order by count(*)

document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');

是的，用那个...

Answer 5

一般情况下是不可能的。以下摘自我的bookmarklet，它依赖于非标准的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();
}

注意：DTD丢失，根本无法检索。

如何获得完全计算的HTML（而不是源HTML）？

5 个答案: