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 – 发送过来的数据。