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的源,如果目標窗口的協議,主機地址,端口只要一個不同,該方法便不會執(zhí)行信息發(fā)送
復制代碼

為了能接收到postMessage發(fā)送的消息,必須在window對象上監(jiān)聽message事件,該事件對象包涵了data(消息)、origin(來源地址)、source(來源窗口代理)等屬性,使用如下所示

window.onmessage = 
        		

網友評論