平時做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’)監聽。