Question

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)

Answer 3

此库支持带有resize + hash https://github.com/ternarylabs/porthole

的HTML5 postMessage和旧版浏览器

编辑：现在在2014年，IE6 / 7的使用率非常低，IE8及以上版本都支持postMessage所以我现在建议只使用它。

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

Answer 4

window.top属性应该能够满足您的需求。

E.g。

alert(top.location.href)

请参阅 http://cross-browser.com/talk/inter-frame_comm.html

Answer 5

使用event.source.window.postMessage发送回发件人。

来自iframe

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

然后从父母那里说回来。

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}

Answer 6

您也可以使用

bucketSt bucketEnd coins --------------------------- 2015.05.02 2015.05.08 16 2015.05.08 2015.05.12 32;

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

6 个答案: