通过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
