html5的postmessage实现js前端跨域访问及调用解决方案
2015-10-27 20:37
856 查看
关于跨域访问，使用JSONP的方法，我前面已经demo过了，具体见http://supercharles888.blog.51cto.com/609344/856886，HTML5提供了一个非常强大的API，叫postMessage，它其实就是以前iframe的进化版本，使用起来极其方便，这里举个实验例子：
我们依旧按照与上文相同的设定，假定我们有2个Domain
Domain1: http://localhost:8080 它上面有个应用叫HTMLDomain1，并且有个页面叫sender.html。
Domain2:http://localhost:8180 它上面有个应用叫HTMLDomain2,并且有个页面叫receiver.html。
我现在的需求是，假定Domain1上我们有个json数据，我们想让Domain2应用中的javascript要可以操作这个json 数据（注意，这里已经是跨域了，因为Domain2上的js操作了Domain1上的数据），应该怎么办呢？
解决方案就是用HTML5的postMessage方法
Domain2的代码:
首先，我们在Domain2上创建一个HTML页面，这个页面没什么内容，就一行文字会来标识它是Domain 2,它下方将来会被js用来填充从Domain1弄过来的数据。
[html] view
plaincopyprint?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Domain2上的接收者页面receiver.html</title>
<script type="text/javascript" src="js/receiveInfo.js"></script>
</head>
<body onload="receiveInfoFromAnotherDomain();">
<p>这个页面是HTML5跨域访问的Domain2上的页面receiver.html，它会处理来自Domain1上sender.html发送的页面</p>
</body>
</html>
Domain2页面加载时候，它会调用receiveInfoFromAnotherDomain()函数，这个函数首先定义了一个事件监听函数，它只接受来自Domain1(http://localhost:8080)的事件，否则就忽略掉，然后它从这个事件中分离出信息负载，也就是json 数据，然后显示在页面底部：
[html] view
plaincopyprint?
//这个函数用于处理从Domain1上的sender发送过来的信息，然后将他们打印出来
function receiveInfoFromAnotherDomain(){
console.log("entering method receiveInfoFromAnotherDomain()");
//首先让window添加一个事件监听函数，表明它可以监听窗口对象的message事件
//它受到事件时，会先判断是否来自指定的Domain(不是所有Domain丢过来的事件它都处理的）
window.addEventListener("message",function(ev){
console.log("the receiver callback func has been invoked");
//如果不是来自指定Domain的，则忽略
if(ev.origin !="http://localhost:8080"){
console.log("the event doesn't come from Domain1!");
return;
}
//现在可以处理数据了
//控制台打印出接收到的json数据，因为我们把json字符串发送了过来
console.log(ev.data);
//将json字符串转为json对象，然后从中分离出原始信息
var personInfoJSON = JSON.parse(ev.data);
var name = personInfoJSON.name;
var title = personInfoJSON.title;
var info = personInfoJSON.info;
//构造信息文本并且显示在页面的底部
var personInfoString="从域为： "+ev.origin+"那里传来的数据."+"<br>";
personInfoString+="姓名是: "+name+"<br>";
personInfoString+="头衔为： "+title+"<br>";
personInfoString+="信息为： "+info+"<br>";
document.body.innerHTML=personInfoString;
}
);
}
然后将Domain2 （http://localhost:8180）启动起来，不出意外，它将是：
Domain1的代码：
现在，我们来构建Domain1:
为了让Domain1能够和Domain2通过事件交互，我们用了iframe,把Domain2的页面receiver.html以<iframe>形式镶嵌在Domain1的sender.html页面中。
[html] view
plaincopyprint?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Domain1上的发送者页面sender.html</title>
<script type="text/javascript" src="js/sendInfo.js"></script>
</head>
<body>
<p>这个页面是HTML5跨域访问的Domain1上的页面sender.html，它将发送一些信息到Domain2上的receiver.html</p>
<input type="button" value="点击则发送事件到Domain2" onclick="sendInfoToAnotherDomain();"/>
<!-- 这个iframe包含了在另外一个domain->Domain2(http://localhost:8180)的接收者页面receiver.html -->
<iframe width="1200" src="http://localhost:8180/HTML5Domain2/receiver.html"></iframe>
</body>
</html>
同时我们在页面上创建一个button，当点击它就会发送json数据给Domain2.
所以js函数就负责以json字符串形式发送json数据，然后让iframe中的Domain2页面发送信息,注意这里接受者的窗口在iframe中，所以我们用iframe.postMessage,第一个参数是我们的信息载体，这里是json字符串，第二个参数是目标Domain，也就是Domain2
[js] view
plaincopyprint?
//假定这个Domain(Domain1)要把一些json信息发送到另一个域（Domain2）的某个页面
function sendInfoToAnotherDomain(){
console.log("entering method: sendInfoToAnotherDomain()");
//首先构造一个对象，内含有我们想要发送到Domain2的信息，然后把它转为json字符串
var personInfo= new Object;
personInfo.name='charles';
personInfo.title='technical lead';
personInfo.info="talent man";
var str=JSON.stringify(personInfo);
console.log("The information to be send: "+str);
//我们把这个json字符串发送到Domain2
//因为这个Domain2上的目标页面被嵌在了主页面上作为iframe，所以我们取得这个iframe然后让他来发送信息
//信息的内容是我们的包含个人信息内容的json字符串
var iframe=window.frames[0];
iframe.postMessage(str,'http://localhost:8180');
console.log("json string has been sent to domain2 successfully");
}
这样一来，我们就定义了发送者（Domain1)和接收者(Domain2),发送者由于嵌了<iframe>所以页面看上去如下图：
当点击"点击则发送事件到Domain2" 按钮后，json数据信息被发送到了Domain2，因为Domain2的事件监听程序注册了监听来自Domain1的事件，所以它可以把事件中携带的json字符串解析成原始信息，然后构造文本显示在Domain2的receiver.html的下方，如图：（可以比照sendInfoToAnotherDomain()，可以发现信息是完全匹配的）
转载地址：http://blog.csdn.net/fuxiaohui/article/details/31377427
我们依旧按照与上文相同的设定，假定我们有2个Domain
Domain1: http://localhost:8080 它上面有个应用叫HTMLDomain1，并且有个页面叫sender.html。
Domain2:http://localhost:8180 它上面有个应用叫HTMLDomain2,并且有个页面叫receiver.html。
我现在的需求是，假定Domain1上我们有个json数据，我们想让Domain2应用中的javascript要可以操作这个json 数据（注意，这里已经是跨域了，因为Domain2上的js操作了Domain1上的数据），应该怎么办呢？
解决方案就是用HTML5的postMessage方法
Domain2的代码:
首先，我们在Domain2上创建一个HTML页面，这个页面没什么内容，就一行文字会来标识它是Domain 2,它下方将来会被js用来填充从Domain1弄过来的数据。
[html] view
plaincopyprint?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Domain2上的接收者页面receiver.html</title>
<script type="text/javascript" src="js/receiveInfo.js"></script>
</head>
<body onload="receiveInfoFromAnotherDomain();">
<p>这个页面是HTML5跨域访问的Domain2上的页面receiver.html，它会处理来自Domain1上sender.html发送的页面</p>
</body>
</html>
Domain2页面加载时候，它会调用receiveInfoFromAnotherDomain()函数，这个函数首先定义了一个事件监听函数，它只接受来自Domain1(http://localhost:8080)的事件，否则就忽略掉，然后它从这个事件中分离出信息负载，也就是json 数据，然后显示在页面底部：
[html] view
plaincopyprint?
//这个函数用于处理从Domain1上的sender发送过来的信息，然后将他们打印出来
function receiveInfoFromAnotherDomain(){
console.log("entering method receiveInfoFromAnotherDomain()");
//首先让window添加一个事件监听函数，表明它可以监听窗口对象的message事件
//它受到事件时，会先判断是否来自指定的Domain(不是所有Domain丢过来的事件它都处理的）
window.addEventListener("message",function(ev){
console.log("the receiver callback func has been invoked");
//如果不是来自指定Domain的，则忽略
if(ev.origin !="http://localhost:8080"){
console.log("the event doesn't come from Domain1!");
return;
}
//现在可以处理数据了
//控制台打印出接收到的json数据，因为我们把json字符串发送了过来
console.log(ev.data);
//将json字符串转为json对象，然后从中分离出原始信息
var personInfoJSON = JSON.parse(ev.data);
var name = personInfoJSON.name;
var title = personInfoJSON.title;
var info = personInfoJSON.info;
//构造信息文本并且显示在页面的底部
var personInfoString="从域为： "+ev.origin+"那里传来的数据."+"<br>";
personInfoString+="姓名是: "+name+"<br>";
personInfoString+="头衔为： "+title+"<br>";
personInfoString+="信息为： "+info+"<br>";
document.body.innerHTML=personInfoString;
}
);
}
然后将Domain2 （http://localhost:8180）启动起来，不出意外，它将是：
Domain1的代码：
现在，我们来构建Domain1:
为了让Domain1能够和Domain2通过事件交互，我们用了iframe,把Domain2的页面receiver.html以<iframe>形式镶嵌在Domain1的sender.html页面中。
[html] view
plaincopyprint?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Domain1上的发送者页面sender.html</title>
<script type="text/javascript" src="js/sendInfo.js"></script>
</head>
<body>
<p>这个页面是HTML5跨域访问的Domain1上的页面sender.html，它将发送一些信息到Domain2上的receiver.html</p>
<input type="button" value="点击则发送事件到Domain2" onclick="sendInfoToAnotherDomain();"/>
<!-- 这个iframe包含了在另外一个domain->Domain2(http://localhost:8180)的接收者页面receiver.html -->
<iframe width="1200" src="http://localhost:8180/HTML5Domain2/receiver.html"></iframe>
</body>
</html>
同时我们在页面上创建一个button，当点击它就会发送json数据给Domain2.
所以js函数就负责以json字符串形式发送json数据，然后让iframe中的Domain2页面发送信息,注意这里接受者的窗口在iframe中，所以我们用iframe.postMessage,第一个参数是我们的信息载体，这里是json字符串，第二个参数是目标Domain，也就是Domain2
[js] view
plaincopyprint?
//假定这个Domain(Domain1)要把一些json信息发送到另一个域（Domain2）的某个页面
function sendInfoToAnotherDomain(){
console.log("entering method: sendInfoToAnotherDomain()");
//首先构造一个对象，内含有我们想要发送到Domain2的信息，然后把它转为json字符串
var personInfo= new Object;
personInfo.name='charles';
personInfo.title='technical lead';
personInfo.info="talent man";
var str=JSON.stringify(personInfo);
console.log("The information to be send: "+str);
//我们把这个json字符串发送到Domain2
//因为这个Domain2上的目标页面被嵌在了主页面上作为iframe，所以我们取得这个iframe然后让他来发送信息
//信息的内容是我们的包含个人信息内容的json字符串
var iframe=window.frames[0];
iframe.postMessage(str,'http://localhost:8180');
console.log("json string has been sent to domain2 successfully");
}
这样一来，我们就定义了发送者（Domain1)和接收者(Domain2),发送者由于嵌了<iframe>所以页面看上去如下图：
当点击"点击则发送事件到Domain2" 按钮后，json数据信息被发送到了Domain2，因为Domain2的事件监听程序注册了监听来自Domain1的事件，所以它可以把事件中携带的json字符串解析成原始信息，然后构造文本显示在Domain2的receiver.html的下方，如图：（可以比照sendInfoToAnotherDomain()，可以发现信息是完全匹配的）
转载地址：http://blog.csdn.net/fuxiaohui/article/details/31377427
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 文章标题
- 自由HTML5串行来到《HTML5具体解释Web开发的例子》连载（三）DOCTYPE和字符集
- HTML5+CSS3学习(三)头部和元数据
- HTML5+CSS3学习(二)HTML5 语法规范
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
- HTML5 视频直播（一）
- HTML5+CSS3学习(-)创建HTML5
- H5规范
- 【html5】常见标签使用说明（持续更新）
- html5 应用缓存
- H5常见的存储方式-localStorage
- HTML5 离线缓存插件-----localForage
- html5——canvas画方块功能函数
- HTML5规范之Web Worker入门
- 无插件纯Web HTML5 3D机房 终结篇（新增资产管理、动环监控等内容）
- 翻译-你必须知道的28个HTML5特征、窍门和技术
- HTML5 规范
- 打造最美HTML5 3D机房（第三季，新增资产管理、动环监控等效果）
- H5多文本换行
- html5 canvas