JS postMessage窗口消息传递

原创
2018/04/20 15:31
阅读数 753

子窗口页面 frame.html 

function log(s){console.log(s);}

var message = {funcName: 'getOrder', payParams: {id:123456, order:'abc123456'}};
var jsonData = JSON.stringify(message);

log(jsonData);

window.parent.postMessage(jsonData, '/');

postMessage(data,origin)方法接受两个参数

 1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。

2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

父窗口页面 parent.html


	function log(s){console.log(s);}

	window.addEventListener('message', function (event){
		log(event.source == this.window);
		
		object = JSON.parse(event.data);
		
		log(object.funcName);
		log(object.payParams);
	});
	

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部