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

postmessage方法

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

一、data：要发送的数据

html5

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

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

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

若是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 );
}