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

javascript html ajax iframe

2022-08-30 00:36:30

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

答案 1

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

父 -> iframe

例如，在顶部窗口中：

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

和在 iframe 中：

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

例如，在顶部窗口中：

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

和在 iframe 中：

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

答案 2

在 2018 和现代浏览器中，您可以将自定义事件从 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)