HTML5窗口间同域和跨域的通信
前端页面间的通讯问题:
- 页面和其他打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
- 同域页面之间的通讯:
- 通过发起的url进行通讯;
- 通过本地存储或者cookie进行实现;
- 跨域页面之间的通讯:
- 可以通过发起的url进行通讯;
- 通过html5的window.postMessage()和window.onMessage(),配合iframe来实现;
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
两个参数:
- data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。
- origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
onMessage()来接受数据,使用一个回调函数来接收数据
demo实现:
“a.html”:
<script type="text/javascript">
function postfn() {
var $dom = document.getElementById('iframeDom');
var targetOrigin = '*';
var data = {
name: "天气真好"
}; //传输name名称
var str = JSON.stringify(data); //将json对象 转成json字符串
$dom.contentWindow.postMessage(str, targetOrigin);
}
</script>
<body>
<button type="" onclick="postfn()">点击传递数据</button>
<iframe id="iframeDom" src="b.html"></iframe>
</body>
“b.html”:
<script type="text/javascript">
if (window.attachEvent) {
window.attachEvent('onmessage', function(event) {
var getData = JSON.parse(event.data); //将接收的json字符串 转成对象
console.log(getData)
});
} else {
window.onmessage = function(event) { //注册message事件
var getData = JSON.parse(event.data); //将接收的json字符串 转成对象
console.log(getData)
}
}
</script>