给定一个使用大量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时,我都不太正确。如果我在页面中选择它们并右键单击 - >检查元素,它们只会渲染出来。然后它似乎将其渲染出来。所以也许我的问题变成了如何让Firebug自动渲染出所有HTML,以便您可以选择并保存它? (或者我可以使用其他任何解决方案来获取此HTML)。
使用Firebug的HTML选项卡,您可以右键单击<html>
元素,然后单击“复制HTML”。
您可以使用Chrome / Safari中的开发者工具执行相同的操作。
Firefox的Web Developer Toolbar有一个“查看生成源”选项,提供此功能。
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();
}
如果您想要一个可点击的实时版本,那么简单地省略上面代码中的注释标签。
一般情况下是不可能的。以下摘自我的书签,它依赖于非标准的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丢失,根本无法检索。