1、平时做web开发的时候,除了客户端与服务端的数据传递,还会经常遇到前段页面间数据传递问题:
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
- 上面三个问题的跨域数据传递
2、postMessage
html5 引入的 message 的 API 可以更方便、有效、安全的解决这些难题。postMessage() 方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数
- data:要传递的数据
html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化- origin:字符串参数
指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以将参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
window.postMessage({
"actionId":"todoName", // 目标页可以根据 actionId 做不同操作
"info":JSON.stringify(params) // params 为要传递的json数据
},"*"); // origin 不建议设为 *,最好给定目标源
3、设置监听,接收数据
window.addEventListener("message",function(e){
var origin = e.origin; // 消息来源
var data = e.data; // 消息数据
switch(data.actionId){
case "todoName":
if("协议://主机:端口号" === origin){
alert(data.info);
}
break;
}
});