平时做web开发,会遇到不同站点的页面之间进行消息传递。但是受到浏览器的同源策略的限制,需要一些手段绕过同源的限制。H5的postMessage可以很方便的实现跨域页面的消息传递。
需求案例:
在一个web页面通过IFrame引入另一个web站点的页面,并且两个页面之间需要进行一些必要的消息传递。代码示例如下:
http://myIp:8080/Test1
<body>
<iframe id="f1" src="http://myIp:9082/Test2/index.jsp">
</iframe>
</body>
//(1)发送消息给frame页面
window.onload = function(){
window.frames[0].postMessage('m1','http://myIp:9082');//指定站点
window.frames[0].postMessage('m2','*');//所有站点
window.frames[0].postMessage('m3','/');//当前站点http://myIp:8080,由于和frame页面不同源,是发不出去滴
};
//(3)接收frame页面的结果
window.addEventListener('message',function(e){
console.log(e.data);
},false);
http://myIp:9082/Test2
<body>
<input id="hidden1" type="hidden" value="发你大爷呀发~"></input>
</body>
//(2)接收消息,返回结果给父页面
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var v = document.getElementById("hidden1").value;
window.parent.postMessage(v,"http://myIp:8080");
},false);
开发时,注意消息的并发控制;因为所有消息都会被window.addEventListener(‘message’)监听。