云服务器 199 / 年,新老同享,开发者力荐特惠渠道
阿里云推广

跨域下子页面给父页面发送消息方案

  • 内容
  • 评论
  • 相关

`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)是可信的,以防止恶意代码的滥用。同时,也需要在目标窗口中进行相应的消息处理,以保证通信的安全性和正确性。

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:跨域下子页面给父页面发送消息方案 - http://www.wlphp.com/?post=410

发表评论

电子邮件地址不会被公开。 必填项已用*标注