HTML5 window.postMessage跨域通信

window.postMessage 解决跨域通信问题

首要条件

两个域名我们都可以控制 或者 另外的域名有对应的通信接口

示例

a.html 为主页面

<iframe src="xxx/b.html"></iframe>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script>
$(function(){
	window.addEventListener('message',function(e){
		console.log("这个是 Event对象实例的数据",e)
		var messageData = e.data;
		console.log("这个是对方传输的数据",messageData)
		alert("我收到数据了")
		// 判断是否是json  因为有些浏览器只支持传输字符串  所以我们是将json转化为字符串 然后再转化为json
		if(isJSON(messageData))
			messageData = JSON.parse(e.data);
		
		console.log(messageData)
   });
})
function isJSON(str) {
    if (typeof str == 'string') {
        try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
                return true;
            }else{
                return false;
            }

        } catch(e) {
            return false;
        }
    }
}
</script>

xxx/b.html 为iframe引入的子页面

我是B.html  我要向a.html传输  {"msg":"我是b.html传输来的数据"}
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script>
$(function(){
	var parentData =   {"msg":"我是b.html传输来的数据"}
	// json转化为字符串
	parentData = JSON.stringify(parentData)
	/*
	postMessage  
		parentData  发送的数据  统一转化为字符串格式 防止不兼容
		* 为源窗口的源 参数设为*，在发送跨域消息时会跳过对发送消息的源的检查。 可以知道对应的源  xxx
	*/
    window.parent.postMessage(parentData,'*');
})
</script>

这样两个页面的跨域通信就解决了

点个赞再走吧