如何在iframe和父网站之间进行通信？

Question

如何在iframe和父网站之间进行通信？iframe中的网站不在同一个域中，但两者都是我的，我想iframe在父网站之间进行通信。可能吗？

Answer 1

对于不同的域，无法直接调用方法或访问iframe的内容文档。

您必须使用跨文档消息传递。

例如在顶部窗口中：

 myIframe.contentWindow.postMessage('hello', '*');

在iframe中：

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }};

如果要将iframe中的消息发布到父窗口

window.top.postMessage('hello', '*')

Answer 2

它必须在这里，因为2012年接受了答案

在2018年和现代浏览器中，您可以将自定义事件从iframe发送到父窗口。

IFRAME：

var data = { foo: 'bar' }var event = new CustomEvent('myCustomEvent', { detail: data })window.parent.document.dispatchEvent(event)

父：

window.document.addEventListener('myCustomEvent', handleEvent, false)function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}}

PS：当然，您可以以相反的方向发送相反方向的事件。

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)