关于跨域訪问。使用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弄过来的数据。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Domain2上的接收者页面receiver.html</title>
  6. <script type="text/javascript" src="js/receiveInfo.js"></script>
  7. </head>
  8. <body onload="receiveInfoFromAnotherDomain();"> 
  9.  
  10. <p>这个页面是HTML5跨域訪问的Domain2上的页面receiver.html，它会处理来自Domain1上sender.html发送的页面</p> 
  11.  
  12. </body>
  13. </html>

Domain2页面载入时候，它会调用receiveInfoFromAnotherDomain()函数。这个函数首先定义了一个事件监听函数，它仅仅接受来自Domain1(http://localhost:8080)的事件，否则就忽略掉，然后它从这个事件中分离出信息负载，也就是json 数据。然后显示在页面底部：

  1. //这个函数用于处理从Domain1上的sender发送过来的信息，然后将他们打印出来
  2. function receiveInfoFromAnotherDomain(){ 
  3.  
  4.     console.log("entering method receiveInfoFromAnotherDomain()");
  5.     //首先让window加入一个事件监听函数，表明它能够监听窗体对象的message事件
  6.     //它受到事件时，会先推断是否来自指定的Domain(不是全部Domain丢过来的事件它都处理的）
  7.     window.addEventListener("message",function(ev){
  8.         console.log("the receiver callback func has been invoked"); 
  9.  
  10.         //假设不是来自指定Domain的，则忽略
  11.         if(ev.origin !="http://localhost:8080"){
  12.             console.log("the event doesn't come from Domain1!");
  13.             return;
  14.         } 
  15.  
  16.         //如今能够处理数据了
  17.         //控制台打印出接收到的json数据，由于我们把json字符串发送了过来
  18.         console.log(ev.data); 
  19.  
  20.         //将json字符串转为json对象。然后从中分离出原始信息
  21.         var personInfoJSON = JSON.parse(ev.data);
  22.         var name = personInfoJSON.name;
  23.         var title = personInfoJSON.title;
  24.         var info = personInfoJSON.info; 
  25.  
  26.         //构造信息文本而且显示在页面的底部
  27.         var personInfoString="从域为： "+ev.origin+"那里传来的数据."+"<br>";
  28.         personInfoString+="姓名是: "+name+"<br>";
  29.         personInfoString+="头衔为：  "+title+"<br>";
  30.         personInfoString+="信息为：  "+info+"<br>";
  31.         document.body.innerHTML=personInfoString; 
  32.  
  33.         } 
  34.  
  35.     ); 
  36.  
  37. }

然后将Domain2 （http://localhost:8180）启动起来，不出意外。它将是：

Domain1的代码：

如今，我们来构建Domain1:

为了让Domain1可以和Domain2通过事件交互，我们用了iframe,把Domain2的页面receiver.html以<iframe>形式镶嵌在Domain1的sender.html页面中。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Domain1上的发送者页面sender.html</title>
  6. <script type="text/javascript" src="js/sendInfo.js"></script>
  7. </head>
  8. <body> 
  9.  
  10. <p>这个页面是HTML5跨域訪问的Domain1上的页面sender.html。它将发送一些信息到Domain2上的receiver.html</p>
  11. <input type="button" value="点击则发送事件到Domain2" onclick="sendInfoToAnotherDomain();"/> 
  12.  
  13. <!-- 这个iframe包括了在另外一个domain->Domain2(http://localhost:8180)的接收者页面receiver.html -->
  14. <iframe width="1200" src="http://localhost:8180/HTML5Domain2/receiver.html"></iframe>
  15. </body>
  16. </html>

同一时候我们在页面上创建一个button，当点击它就会发送json数据给Domain2.

所以js函数就负责以json字符串形式发送json数据。然后让iframe中的Domain2页面发送信息,注意这里接受者的窗体在iframe中，所以我们用iframe.postMessage,第一个參数是我们的信息载体。这里是json字符串，第二个參数是目标Domain，也就是Domain2

  1. //假定这个Domain(Domain1)要把一些json信息发送到还有一个域（Domain2）的某个页面
  2. function sendInfoToAnotherDomain(){ 
  3.  
  4.     console.log("entering method: sendInfoToAnotherDomain()"); 
  5.  
  6.     //首先构造一个对象，内含有我们想要发送到Domain2的信息，然后把它转为json字符串
  7.     var personInfo= new Object;
  8.     personInfo.name='charles';
  9.     personInfo.title='technical lead';
  10.     personInfo.info="talent man";
  11.     var str=JSON.stringify(personInfo); 
  12.  
  13.     console.log("The information to be send: "+str); 
  14.  
  15.     //我们把这个json字符串发送到Domain2
  16.     //由于这个Domain2上的目标页面被嵌在了主页面上作为iframe，所以我们取得这个iframe然后让他来发送信息
  17.     //信息的内容是我们的包括个人信息内容的json字符串
  18.     var iframe=window.frames[0];
  19.     iframe.postMessage(str,'http://localhost:8180'); 
  20.  
  21.     console.log("json string has been sent to domain2 successfully");
  22. }

这样一来，我们就定义了发送者（Domain1)和接收者(Domain2),发送者因为嵌了<iframe>所以页面看上去例如以下图：

当点击"点击则发送事件到Domain2" button后，json数据信息被发送到了Domain2，由于Domain2的事件监听程序注冊了监听来自Domain1的事件，所以它能够把事件中携带的json字符串解析成原始信息，然后构造文本显示在Domain2的receiver.html的下方。如图：（能够比照sendInfoToAnotherDomain()。能够发现信息是全然匹配的）

html5的postmessage实现js前端跨域訪问及调用解决方式的更多相关文章

  1. 辛星浅析跨域传输的CORS解决方式

    首先我们有一个概念.那就是"同源准则",也就是same-origin  policy,它要求一个站点(协议+主机+port号)来确定的脚本.XMLHttpRequest和Webso ...

  2. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 前端跨域实现的几种方式？及使用Nginx反向代理配置。

    早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性.而所谓"同源策略",即同域名(domain或ip).同端口.同协议的才能互相获取资源,而不能 ...

  4. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  5. 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  6. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  7. js iframe跨域访问

    1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

  8. 【Javascript】搞定JS面试——跨域问题

    什么是跨域? 为什么不能跨域? 跨域的解决方案都有哪些(解决方法/适用场景/get还是post)?  一.什么是跨域?       只要协议.域名.端口有任何一个不同,就是跨域.           ...

  9. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

随机推荐

  1. hdu 1002（大数）

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. Android平台下的TCP/IP传输（客户端）

    在工科类项目中,嵌入式系统与软件系统或后台数据库之间的信息传输是实现“物联网”的一种必要的途径,对已简单概念的物联网,通常形式都是一个单片机/嵌入式系统实现数据的采集及其处理,通过蓝牙,wifi或者是 ...

  3. NOIP2011 day2 第一题 计算系数

    计算系数 NOIP2011 day2 第一题 描述 给定一个多项式(ax+by)^k,请求出多项式展开后x^n*y^m项的系数. 输入格式 共一行,包含5 个整数,分别为 a ,b ,k ,n ,m, ...

  4. MySql数据库中乱码问题解决方案

    show variables like 'character%';    //查看当前各系统位置的字符编码格式 问题一: Incorrect string value: '\xB4\xF3\xB4\x ...

  5. Windows环境下使用强大的wget工具

    安装 下载[http://www.interlog.com/~tcharron/wgetwin.html] 解压到目录 比如我解压到D:\Tool\wget 添加wget环境变量,这样使用就更方便了, ...

  6. 常用JQUERY插件大全

    jQuery内容滚动插件-BoxSlider jQuery artDialog对话框插件 移动端日期选择组件 图像延迟加载库Echo.js 轮播图FlexSlider插件 Slick.js幻灯片使用方 ...

  7. (转)ORA-01502

    问题:ora-01502 索引或这类索引的分区处于不可用状态 引发:移动数据表分区,导致索引失效 解决:重建失效索引 1. select index_name ,status  from user_i ...

  8. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  9. 关于XML学习

    XML为知识构架存储语言: http://www.w3school.com.cn/xml/xml_tree.asp 语义网:为计算机构建一个系统的概念网络模型是计算机理解概念和机间信息交流的途径:XM ...

  10. nutz 自定义sql的使用

    虽然提供了Cnd,但是用起来是觉得有点不方便,然后就直接编写Sql语句.nutz提供了一些方法. Nutz.Dao 的自定义 SQL 部分的解决方案是: // 不推荐使用 用户可以硬编码 SQL 语句 ...