Question

我创建了一个屏幕，上面有两个控件。第一个是iframe，它在主网页中显示一个网页。这很好。下面是一个textarea，我想在其中显示创建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中

2 个答案: