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

how to get fully computed HTML (instead of source HTML)?

本文关键字：HTML 计算 何获得      更新时间：2023-09-26

给定一个使用大量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();
}
  1. 打开控制台
  2. 复制粘贴上述代码并执行
  3. 它打开一个空页面
  4. 现在用右键单击或f12检查页面
  5. 复制注释的outerhtml
  6. 粘贴到您想要的任何位置
  7. 可以选择删除开头和结尾的注释

如果你想要一个可点击的实时版本，那么简单地去掉上面代码中的注释标签。

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;"/>

所以是的，用这个。。。

我在使用Javascript生成的页面时遇到了问题：只有向下滚动页面时才会呈现内容，因此复制的HTML是不完整的。所有基于Chrome的建议都发生在我身上。

这个问题通过以下技巧得到了解决：

  1. 打开控制台，然后键入可呈现整个页面（或所需内容）的缩放，例如
javascript: document.body.style.zoom = 0.1
  1. 根据其他建议复制HTML，例如
copy(document.querySelector('html').outerHTML)
  1. 粘贴时，在文本中搜索"；"缩放"；，然后将该值恢复为"0"；1〃；，保存HTML

这通常是不可能的。以下是我的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丢失，根本无法检索。

相关文章：