經過Html5的postMessage和onMessage方法實現跨域跨文檔請求訪問

          在項目中有應用到不一樣的子項目，經過不一樣的二級域名實現相互調用功能。其中一個功能是將播放器做爲單獨的二級域名的請求接口，其餘項目必須根據該二級域名調用播放器。最近須要實現視頻播放完畢後的事件觸發，調用父窗口中的回調方法。普通的javascript很難實現跨域請求和調用的操做。經過jsonp方式實現起來複雜。不過經過Html的postMessage和onMessage能夠輕鬆實現以上功能。

• postmessage方法

            postMessage()方法容許來自不一樣源的腳本採用異步方式進行有限的通訊，能夠實現跨文本檔、多窗口、跨域消息傳遞。postmessage(data,origin)方法含有兩個參數

             一、data：要發送的數據

                    支持字符串，數組等基本類型數據，對於對象類型，目前不是全部的瀏覽器都支持。只有基本類型的對象能夠經過JSON.stringfy()方法轉換成字符串，再進行傳遞。若是對象屬性中含有方法，則JSON.stringfy()方法會直接跳過該屬性，不會生成該屬性的字符串。

       二、origin ：要發送的完整主機請求地址。


          origin  = 協議 + 主機名 + 端口號。

          若是origin設置爲 *表示任何窗口均可以接收數據。

          若是origin設置爲/表示只能同源窗口才能接收數據

• onMessage

              onMessage(data, source, origin) 方法監聽並接收來自postMessage傳遞的數據。

              一、data：要接收的數據

               二、source：發送消息的窗口對象

              三、origin 域請求地址，組成跟postMessage中一致。

• 父窗口給子窗口傳遞數據
  

/*-------------------------------------------------------------------------------------------
	函數名稱：callVideoPlayComplete()
	函數功能：經過Html5的postMessage方法實現跨域文檔通信訪問
	函數參數：	 
			  url   		通信地址
			  data			傳輸數據，只能是數組、字符串等基本類型，對象類型目前不是全部的瀏覽器都支持
			  callFnBack 	        回調方法
	函數說明:
-------------------------------------------------------------------------------------------*/
function callVideoPlayComplete(ifmId, url, data, callFnBack){
   	var objIfm = document.getElementById(ifmId);

	 if(objIfm){
		if(document.getElementById(ifmId).contentWindow){
			 if(document.getElementById(ifmId).contentWindow.postMessage){
				document.getElementById(ifmId).contentWindow.postMessage(JSON.stringify(data), url);
				
				/*監聽返回結果*/
				window.addEventListener("message", function(event){
					/*調用回調函數*/
					 callFnBack.call(null,null);
				 }, false );
			}else{
				 alert("您的瀏覽器版本過低，不支持html5，請升級瀏覽器到最新版本");
                        }
 		}else{
			 alert("對象不是一個iframe對象");
		 }
	 }else{
		alert("iframe對象不存在");
	}
}

• 子窗口給父窗口傳遞數據
  

/*-------------------------------------------------------------------------------------------
	函數名稱：callVideoPlayComplete()
	函數功能：監聽視頻播放觸發事件跨域跨文檔事件完成觸發調用回調方法
	函數參數：	 
			  callFnBack 	回調方法
	函數說明:
-------------------------------------------------------------------------------------------*/
function callVideoPlayComplete(callFnBack){
	/*監聽返回結果*/
	window.addEventListener("message", function(event){
		var origin = event.origin;
		var data = event.data;
		
		/*調用回調函數*/
		callFnBack.call(null,data, origin);
	}, false );
}

 

• 參考資料

             http://www.cnblogs.com/dolphinX/p/3464056.html

             http://caniuse.com/#tables

             http://www.ibm.com/developerworks/cn/web/1301_jiangjj_html5message/

             https://developer.mozilla.org/en-US/docs/Web/API