如何在iframe和父站点之间进行通信?

window.top属性应该能够给出你需要的东西。

如。

alert(top.location.href)

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

你必须使用跨文档信息。

parent ->iframe < / h2 >

例如在顶部窗口:

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

在iframe中:

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

iframe ->父母< / h2 >

例如在顶部窗口:

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

在iframe中:

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

这个库支持HTML5 postMessage和带有resize+hash https://github.com/ternarylabs/porthole的传统浏览器

编辑:现在在2014年，IE6/7的使用率相当低，IE8和以上所有支持postMessage，所以我现在建议只使用它。

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage < a href = " https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage " > < / >

在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)

你也可以使用

postMessage(message, '*');

使用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', '*')
}