是否可以使用 Javascript 检索 iframe 的 *full* HTML 页面源？答案

【问题标题】：Is it possible to retrieve the *full* HTML page source of an iframe with Javascript?是否可以使用 Javascript 检索 iframe 的 *full* HTML 页面源？
【发布时间】：2013-06-05 01:44:30
【问题描述】：

我试图弄清楚如何从<iframe> 中检索 full（即所有数据）HTML 页面源，其src 来自同一原始域作为它嵌入的页面。我想要任何给定时间的确切源代码，由于 Javascript 或 php 生成 <iframe> html 输出，这可能是动态的。这意味着像 $.get() 这样的 AJAX 调用对我不起作用，因为该页面可能已通过 Javascript 修改或根据请求时间或 php 中的 mt_rand() 唯一生成。我无法从我的<iframe> 中检索到确切的<!DOCTYPE> 声明。

我一直在尝试和搜索 Stack Overflow，但没有找到可以检索所有页面源的解决方案，包括 <!DOCTYPE> 声明。

How do I get the entire page's HTML with jQuery? 中的一个答案表明，为了检索<!DOCTYPE> 信息，您需要手动构造此声明，方法是检索<iframe> 的document.doctype 属性，然后添加所有属性自己到<!DOCTYPE> 声明。这真的是从<iframe> 的 HTML 页面源中检索此信息的唯一方法吗？

以下是我浏览过的一些值得注意的 Stack Overflow 帖子，这些帖子与以下内容不重复：

这是我的一些本地测试代码，展示了我迄今为止的最佳尝试，它只检索<iframe> 的<html> 标签内的数据，包括<html> 标签：

main.html

<html>
<head>
  <title>Testing with iframe</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
  function test() {
    var doc = document.getElementById('iframe-source').contentWindow.document;
    var html = $('html', doc).clone().wrap('<p>').parent().html();
    $('#output').val(html);
  }
  </script>
</head>
<body>

<textarea id="output"></textarea>
<iframe id="iframe-source" src="iframe.html" onload="javascript:test()"></iframe>

</body>
</html>

iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html class="html-tag-class">
  <head class="head-tag-class">
    <title>iframe Testing</title>
  </head>
  <body class="body-tag-class">
    <h2>Testing header tag</h2>
    <p>This is <strong>very</strong> exciting</p>
  </body>
</html>

以下是在 Google Chrome 版本 27.0.1453.110 m 中一起运行的这些文件的屏幕截图：

总结

如您所见，谷歌浏览器的Inspect element 显示在<iframe> 中存在<!DOCTYPE> 声明，那么如何使用页面源检索这些数据？此问题也适用于<html> 标签中未包含的任何其他声明或其他标签。

任何有关通过 Javascript 检索此完整页面源代码的帮助或建议将不胜感激。

【问题讨论】：

“我在任何时候都想要确切的源代码” - 似乎您有一些误解。 “HTML 源代码”是不可更改的 - 它是服务器提供的 HTML 字符串（例如 PHP）。动态的是 JS 所作用的 DOM（已解析的 HTML）。 innerHTML/outerHTML 只不过是 DOM 的序列化。因此，总而言之，您要么向页面发送 Ajax 请求并获取 HTML 源（JS 执行之前的实际源），要么使用您链接的答案获取 DOM 的序列化。
@FabrícioMatté - 感谢您的回复。 DOM 的序列化可能与页面源不完全匹配，但我想在这种情况下需要手动构造 doctype。
源在请求之间发生变化的可能性有多大？如果您想要确切的 doctype 字符串，您可以使用 ajax 获取源，提取 doctype 字符串，然后继续使用 DOM 更改。根据从网络服务器提供 html 的方式以及请求方式，它可能仅以一个请求结束，然后始终使用缓存（但在您的情况下可能不是最佳的），或者 200 OK 和 @987654358 @（或类似的东西；我很确定我至少有正确的 HTTP 代码）。
@JayC - 在我的用例中，每个请求的页面源代码都会不同，因为源代码是通过 UI 修改的。
??因此，您正在修改 html 文本，将修改后的 html 发布到网络服务器，然后让网络服务器在 iframe 中将其发回给您？我想我可以理解您为什么可能需要该工作流程，但除了作为健全性检查之外，这是完全没有必要的。看看htmledit.squarefree.com 看看我的意思。

标签： javascript jquery dom iframe doctype

【解决方案1】：

这是一种从 doctype 构建它的方法，似乎适用于 html 4 和 5，我没有测试 svg 之类的东西。

<html>
<head>
  <title>Testing with iframe</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
  function test() {
    var d = document.getElementById('iframe-source').contentWindow.document;
    var t = d.docType;
    $('#output').val(
        "<!DOCTYPE "+t.name+ 
          (t.publicId? (" PUBLIC "+JSON.stringify(t.publicId)+" ") : "")+
          (t.systemId? JSON.stringify(t.systemId) :"")+
          ">\n" + d.documentElement.outerHTML  );
  }
  </script>
</head>
<body>

<textarea id="output"></textarea>
<iframe id="iframe-source" src="iframe.html" onload="test()"></iframe>

</body>
</html>

这也使用 HTML.outerHTML 来确保您在 documentElement 上获得任何属性。

【讨论】：