Window postMessage() 方法
Window 对象
定义和用法
postMessage() 方法用于安全地实现跨源通信。
语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
参数
说明
otherWindow
其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message
将要发送到其他 window的数据。
targetOrigin
指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI。
transfer
可选,是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
浏览器支持
Chrome 1
Edge 12
Firefox 8
Safari 4
Opera 9.5
实例
发送程序
你的浏览器不支持 iframe。
window.onload = function() {
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('sendMessage');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello "+val+"!", "https://c.runoob.com");
});
}
尝试一下 »
接收程序:https://c.runoob.com/runoobtest/postMessage_receiver.html
接收程序有一个事件监听器,监听 "message" 事件,同时我们要验证消息来源地址,以确保是个可信的发送地址。
Hello World!
window.onload = function() {
var messageEle = document.getElementById('recMessage');
window.addEventListener('message', function (e) { // 监听 message 事件
alert(e.origin);
if (e.origin !== "https://www.runoob.com") { // 验证消息来源地址
return;
}
messageEle.innerHTML = "从"+ e.origin +"收到消息: " + e.data;
});
}
尝试一下 »
e.source – 消息源,消息的发送窗口/iframe。
e.origin – 消息源的 URI(可能包含协议、域名和端口),用来验证数据源。
e.data – 发送过来的数据。
Window 对象