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

<!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 数据。然后显示在页面底部：

//这个函数用于处理从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页面中。

<!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

//假定这个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" 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. 摘要提取算法——本质上就是pagerank，选择rank最高的句子作为摘要，如果结合word2vec应该有非常好的效果

    最近需要做一些文本摘要的东西,选取了TextRank(论文参见<TextRank: Bringing Order into Texts>)作为对比方案,该方案可以很方便的使用Python相 ...

  2. [javaEE] Eclipse 默认设置的换行长度

    eclipse 默认设置的换行长度, 格式化代码后,经常换行,非常难看. 1.Java代码 打开Eclipse的Window菜单,然后 Preferences->Java->Code St ...

  3. 数组map方法与如何使用ES5实现

    数组map方法与如何使用ES5实现 JavaScript Array map() 方法 定义 map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值. map() 方法按照原始数 ...

  4. 详解DevExpress.LookUpEdit控件实现自动搜索定位功能(转)

    转载自csdn博客 爱拼才会赢 的博客 地址是详解DevExpress.LookUpEdit控件实现自动搜索定位功能(转)

  5. 单元测试之Mock

    为什么需要Mock. 真实对象具有不确定的行为.所以会产生不可预测的结果. 真实对象很难被创建. 真实对象的某些行为很难被触发(如网络错误). 真实对象令程序的运行速度很慢. 真实对象有(或者是)用户 ...

  6. innerHTML的用法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 查询 MySQL 库/表相关信息

    SHOW DATABASES //列出 MySQL Server 数据库. SHOW TABLES [FROM db_name] //列出数据库数据表. SHOW CREATE TABLES tbl_ ...

  8. Android--XML页面的编写

           五个页面  代码如下:    图片资源链接: https://pan.baidu.com/s/1jIoTDGE //  第一个 <RelativeLayout xmlns:andr ...

  9. ORACLE 11g 导出数据

    ORACLE 11g 导出 表的时候 不会导出空表 导出空表操作步骤 :(使用PLSQL) 1.打开SQL window 执行下面的 SQL Select 'alter table '||table_ ...

  10. SDL2源代码分析

    1:初始化(SDL_Init()) SDL简介 有关SDL的简介在<最简单的视音频播放示例7:SDL2播放RGB/YUV>以及<最简单的视音频播放示例9:SDL2播放PCM>中 ...