使用Javascript获取iframe的完整HTML页面源代码是否可行？

Question

使用Javascript获取iframe的完整HTML页面源代码是否可行？

8

我正在尝试找出如何从一个<iframe>中检索完整的HTML页面源代码，其src来自与嵌入它的页面相同的域。我想要任何给定时间的确切源代码，这可能是动态的，因为Javascript或php生成<iframe>的html输出。这意味着类似$.get()的AJAX调用对我无效，因为页面可能已经通过Javascript进行了修改，或者根据请求时间或php中的mt_rand()生成了唯一的页面。我无法从我的<iframe>中获取确切的<!DOCTYPE>声明。

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

其中一个如何使用jQuery获取整个页面的HTML？的答案建议，要想检索<!DOCTYPE>信息，您需要手动构建此声明，通过检索<iframe>的document.doctype属性，然后将所有属性添加到<!DOCTYPE>声明中。这是从<iframe>的HTML页面源中检索此信息的唯一方法吗？

以下是我查阅过的一些值得注意的Stack Overflow文章，而这并不是重复内容：

这是我本地测试代码的一部分，最好的尝试仅检索<iframe>中<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中运行这些文件的屏幕截图： iframe testing

摘要

如您所见，Google Chrome的检查元素显示，在<iframe>内存在<!DOCTYPE>声明，那么我该如何通过页面源代码检索此数据？对于任何其他未包含在<html>标记中的声明或其他标记，都适用此问题。

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

- Aiias

3

“我希望您能够在任何时候获取准确的源代码” - 看起来你有一些误解。 “HTML源码”是不可改变的 - 它是从服务器（例如PHP）提供的HTML字符串。动态的是DOM（解析后的HTML），JS会对其进行操作。innerHTML / outerHTML只是DOM的序列化。因此，总结一下，要么向页面发送Ajax请求并获取HTML源代码（JS执行之前的实际源代码），要么使用您链接的答案获取DOM的序列化结果。 - Fabrício Matté

源在请求之间更改的可能性有多大？如果您想要确切的doctype字符串，可以使用ajax获取源代码，提取doctype字符串，然后继续使用DOM更改。根据html是如何从web服务器提供和请求的方式，它可能只会以一个请求结束，然后始终使用缓存（虽然在您的情况下可能不是最佳选择），或者是“200 OK”和“304 Not Modified”（或类似的东西；我至少确定了HTTP代码）。 - JayC

@JayC - 在我的使用情况下，每个请求的页面源代码都会不同，因为源代码是通过用户界面进行修改的。 - Aiias

所以你正在修改HTML文本，将修改后的HTML发布到Web服务器，然后让Web服务器在iframe中将其发送回给你？我猜我可以理解为什么你可能需要这样的工作流程，但除了作为健全性检查之外，这是非常不必要的。请查看http://htmledit.squarefree.com，了解我的意思。 - JayC

好问题。我不记得注释、CTAGS等是否被序列化了。 - JayC

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dandavis · Accepted Answer

这里有一种从文档类型开始构建的方法，似乎适用于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确保您获取文档元素上的任何属性。