在iframe中从页面获取HTML

Question

我创建了一个屏幕，上面有两个控件。 第一个是iframe，它在主网页中显示一个网页。 很好 在下面是一个文本区域，我想在其中显示创建iframe页面的HTML。 这是HTML的摘要：如何进行这项工作？

<iframe id='myiframe'></iframe>
<textarea id='mybuffer'></textarea>

和

var cow = document.getElementById('myiframe');
var pig = document.getElementById('mybuffer');
cow.src='http:google.com'; //this works
pig.value=cow.innerHTML;   //this does not

Answer 1

子级需要使用postMessage api向其父级发送html。 父级将有一个事件侦听器，它在其中等待子级将其html发送给它。 孩子可以使用以下方式获取自己的html：

document.documentElement.outerHTML

一旦window.ondomready触发。

Answer 2

第二部分不起作用，因为尚未加载文档，并且因为您没有获得文档的内容，而是iframe本身的内容（您说这两个页面都在服务器中，如果它们位于不同的域中，则它将赢得）无效，因为您会收到跨域错误）。

您必须等到加载主页后，再加载框架，等到框架加载后，再获取框架的内容：

<head>
  <script type="text/javascript">
    function getFrameHTML() {
      var pig = document.getElementById('mybuffer');
      var cow = document.getElementById('myiframe');
      pig.value = cow.contentDocument.documentElement.outerHTML; //documentElement is <html>
    }

    function loadFrame() {
      var cow = document.getElementById('myiframe');
      cow.addEventListener("load",getFrameHTML);
      cow.src = 'http://YouHost/YourPage.html';
    }
  </script>
</head>

<body onload="loadFrame()">
  <iframe id="myiframe"></iframe>
  <textarea id="mybuffer"></textarea>
</body>

在iframe中从页面获取HTML

问题描述

2 个解决方案

解决方案1
0 2017-09-25 16:56:24

解决方案2
0 2017-09-25 17:44:03

在iframe中从页面获取HTML

问题描述

2 个解决方案

解决方案1 0 2017-09-25 16:56:24

解决方案2 0 2017-09-25 17:44:03

解决方案1
0 2017-09-25 16:56:24

解决方案2
0 2017-09-25 17:44:03