通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

在项目中有应用到不同的子项目，通过不同的二级域名实现相互调用功能。其中一个功能是将播放器作为单独的二级域名的请求接口，其他项目必须根据该二级域名调用播放器。最近需要实现视频播放完毕后的事件触发，调用父窗口中的回调方法。普通的javascript很难实现跨域请求和调用的操作。通过jsonp方式实现起来复杂。不过通过Html的postMessage和onMessage可以轻松实现以上功能。

• postmessage方法

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。postmessage(data,origin)方法含有两个参数

1、data：要发送的数据

支持字符串，数组等基本类型数据，对于对象类型，目前不是所有的浏览器都支持。只有基本类型的对象可以通过JSON.stringfy()方法转换成字符串，再进行传递。如果对象属性中含有方法，则JSON.stringfy()方法会直接跳过该属性，不会生成该属性的字符串。

       2、origin ：要发送的完整主机请求地址。


          origin  = 协议 + 主机名 + 端口号。

          如果origin设置为 *表示任何窗口都可以接收数据。

          如果origin设置为/表示只能同源窗口才能接收数据

• onMessage

onMessage(data, source, origin) 方法监听并接收来自postMessage传递的数据。

1、data：要接收的数据

2、source：发送消息的窗口对象

3、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