说起postMessage
可能平时大家也不遇到,但是如果遇到问题了,又想不起它,这里记录下防止后面忘记它。
1. 作用
window.postMessage()
方法可以安全地实现Window对象之间的跨域通信
。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。
通常情况下,受浏览器“同源策略”的限制跨域问题一直是个问题,window.postMessage()
提供了一个受控的机制来安全地规避这个限制(如果使用得当的话)。
2. 语法
一般来说,一个窗口可以获得对另一个窗口的引用(例如,通过targetWindow=window.opener
),然后使用targetWindow.postMessage()
在其上派发MessageEvent
。接收窗口随后可根据需要自行处理此事件,传递给window.postMessage()
的参数通过事件对象暴露给接收窗口。
基本语法:
targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow
targetWindow
就是接收消息的窗口的引用。 获得该引用的方法包括:
- Window.open
- Window.opener
- HTMLIFrameElement.contentWindow
- Window.parent
- Window.frames +索引值
message
要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口,而无需自己对其进行序列化。
targetOrigin
定目标窗口的来源,必须与消息发送目标相一致,可以是字符串或URI。 表示任何目标窗口都可接收,为安全起见,请一定要明确提定接收方的URI。如果为"*"
则都可以接收。
transfer
可选属性。是一串和message
同时传递的Transferable
对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
3. 使用
postMessage程序
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello "+val+"!", "http://www.xxx.com");
});
接收端
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== "http://www.xxx.com")
return;
}
event
对象有三个属性,分别是origin
,data
和source
。event.data
表示接收到的消息;event.origin
表示postMessage
的发送来源,包括协议,域名和端口;event.source
表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。
4. 兼容性
总体兼容性还是很好的!
5. 应用场景
- 跨域通信(包括GET请求和POST请求)
- WebWorker
- vue项目中使用到了iframe并且需要传递参数