发布消息 读取 Iframe 内容

Question

我需要在哪里获取 iframe 的内容，其中 src 属于另一个域 下面是我的代码

<iframe id="receiver" src="http://demos.mattwest.io/post-message/receiver.html" width="500" height="200">
  <p>Your browser does not support iframes.</p>
</iframe>

<script>
setTimeout(function(){ 
console.log($('#receiver').contents().find('body'));
 }, 2000); 

我收到以下错误

jquery-2.2.4.js:3079 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "http://demos.mattwest.io".  The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match.

我搜索了很多，发现了关于帖子的消息 http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

在这里，他们正在发送消息，我的目标是获取 iframe 内容，如何在我的场景中实现 postMessage。

我无法创建小提琴，它显示了其他一些问题 https://jsfiddle.net/alokranjan39/re6aja0c/

如何解决这个问题，请帮忙!!

Answer 1

iframe上的postMessage在本地不起作用。您需要在以 http 而不是 file 开头的服务器或测试网站上运行此代码。

否则避免使用 jQuery，因为它在 .contents() 中使用 postMessage（） 方法来与 iframe 通信。

纯JavaScript方式：

使用.contentDocument

var iframer = document.getElementById('reciever');
var iframeBody = iframer.contentDocument.body;

用例：

iframer.contentDocument.getElementById('someElementInIframe')

等。。。

希望这有帮助