如何实现 Iframe 与其父站点之间的跨域通信？

站点间通信：跨域连接 iframe 和父站点

使用 iframe 时，跨域通信可能会带来挑战。如果 iframe 的域与父站点不同，则它们之间的直接访问或方法调用将变得不可能。

为了克服这个障碍，跨文档消息传递提供了一个解决方案：

父站点到 iframe:

在父窗口中，向 iframe 的内容发送消息window:

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

在 iframe 中，监听消息事件：

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

iframe 到父站点：

在 iframe 中，向顶层父窗口发送消息：

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

父窗口内窗口，监听消息事件：

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

记住，postMessage() 中的 '*' 允许将消息广播到所有监听窗口。通过使用跨文档消息传递，您可以在 iframe 与其父站点之间建立通信，甚至可以跨不同域。

以上是如何实现 Iframe 与其父站点之间的跨域通信？的详细内容。更多信息请关注PHP中文网其他相关文章！