526互联

BOM-跨源通信

发布时间 2023-04-20 09:33:10作者: 挖洞404

Window postMessage() 方法 | 菜鸟教程 (runoob.com)

1、介绍

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
  • message 将要发送到其他 window的数据。一般是指文本数据
  • targetOrigin 指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。
  • transfer 可选，是一串和 message 同时传递的 Transferable 对象。

2、示例

（1）发送

基于postMessage函数，将数据发送出去。是否接收，以及接收之后如何处理，分别在各个窗口进行定义。

（2）接收

在待接收消息的窗口里写入js，监听。

window.onload = function() {
    window.addEventListener('message', function (e) {  // 监听 message 事件
        alert(e.origin);
        if (e.origin !== "https://www.runoob.com") {  // 验证消息来源地址
            return;
        }
        alert(e.origin +"@"+e.data)
    });
}
  • e.source – 消息源，消息的发送窗口/iframe。
  • e.origin – 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源。
  • e.data – 发送过来的数据。