如何获得完全计算的HTML(而不是源HTML)?

问题描述 投票:31回答:4

给定一个使用大量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)。

javascript html firebug
4个回答
24
投票

使用Firebug的HTML选项卡,您可以右键单击<html>元素,然后单击“复制HTML”。

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


14
投票

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


1
投票
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();
}
  1. 打开控制台
  2. 复制粘贴上面的代码并执行
  3. 它打开一个空页面,
  4. 现在用右键单击或f12检查页面,
  5. 复制评论的外部HTML
  6. 粘贴在任何你想要的地方
  7. 可选择删除开头和结尾的注释

如果您想要一个可点击的实时版本,那么简单地省略上面代码中的注释标签。


-1
投票

一般情况下是不可能的。以下摘自我的书签,它依赖于非标准的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丢失,根本无法检索。

© www.soinside.com 2019 - 2024. All rights reserved.