跨域下子页面给父页面发送消息方案
`window.parent.postMessage()` 是 HTML5 提供的一种跨窗口通信的方法,它允许在嵌套的 iframe 或弹出窗口之间进行安全的跨域通信。
`postMessage()` 方法接受两个参数:
1. `message`:要发送的消息内容。可以是任何基本数据类型或复杂对象。
2. `targetOrigin`:目标窗口的源(origin),用于限制接收消息的窗口。可以是具体的源,如 `https://example.com`,也可以是通配符 `*` 表示任何源都可以接收消息。
使用 `postMessage()` 方法进行跨窗口通信的步骤如下:
1. 在发送消息的窗口中调用 `window.parent.postMessage(message, targetOrigin)` 方法,将消息发送给父窗口。
2. 在接收消息的窗口中,通过监听 `message` 事件来接收消息。可以使用 `window.addEventListener('message', handleMessage)` 来注册事件监听器。
3. 在接收消息的窗口的事件处理函数中,可以通过 `event.data` 获取到接收到的消息内容。
以下是示例代码:
在父窗口中:
function handleMessage(event) { if (event.origin === 'https://example.com') { console.log('接收到消息:', event.data); // 执行相应的操作 } } window.addEventListener('message', handleMessage);
在嵌套的 iframe 或弹出窗口中:
window.parent.postMessage('Hello', 'https://example.com');
在这个示例中,当嵌套的窗口调用 `postMessage()` 方法发送消息时,父窗口中的事件处理函数会接收到消息,并进行相应的操作。
需要注意的是,使用 `postMessage()` 进行跨窗口通信时,需要确保目标窗口的源(origin)是可信的,以防止恶意代码的滥用。同时,也需要在目标窗口中进行相应的消息处理,以保证通信的安全性和正确性。
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:跨域下子页面给父页面发送消息方案 - https://wlphp.com/?post=410