H5 Notes：PostMessage Cross-Origin Communication

Javascript中要实现跨域通信，主要有window.name，jsonp，document.domain，cors等方法。不过在H5中有一种新的方法postMessage可以安全实现跨域通信，并且使用简单。

要使用postMessage，首先得检查浏览器是否支持该方法，postMessage属于window对象，检测方法如下：

if('postMessage' in window){      }else{     console.log('浏览器不支持postMessage'); }

postMessage使用语法如下所示。

otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow必须是一个window对象的引用，如iframe的contentWindow，window.open的返回对象，window.frames[index]等。 targetOrigin指定otherWindow的源，如果目标窗口的协议，主机地址，端口只要一个不同，该方法便不会执行信息发送

为了能接收到postMessage发送的消息，必须在window对象上监听message事件，该事件对象包涵了data（消息）、origin（来源地址）、source（来源窗口代理）等属性，使用如下所示

window.onmessage = function(e){     if (e.origin === 'http://www.test.zmx.com') {         alert(e.data);     } }

下面是使用postMessage的小例子，帮助理解。

http://www.test.zmx.com/postmessage.html，简称A页面

<!DOCTYP
        
		

        		
网友评论
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		学习是年轻人改变自己的最好方式