html5怎么发送请求连接java,经过Html5的postMessage和onMessage方法实现跨域跨文档请求访问...

在项目中有应用到不一样的子项目，经过不一样的二级域名实现相互调用功能。其中一个功能是将播放器做为单独的二级域名的请求接口，其余项目必须根据该二级域名调用播放器。最近须要实现视频播放完毕后的事件触发，调用父窗口中的回调方法。普通的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 );

}

参考资料

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