实现一个客户端发送 “save 一个答案，在获取答案， 跨域的另一个页面中，回调返回”3“的场景。

客户端：请在 http://127.0.0.1/pk/index.html 打开

<html>

<meta charset="utf-8" />

<head>

    <title>

        测试页面, http://127.0.0.1/pk/index.html

    </title>

</head>

<body>

    <iframe id="database" src="http://localhost/pk/localStorage.html">

    </iframe>

    <script type="text/javascript">

        function SyncMessageClient(win, domain) {

            var funName = 0;

            var scope = {};

            function getNextCallbackName(callback) {

                var retfunc = "cb_" + (funName++);

                scope[retfunc] = function () {

                    callback.apply(win, arguments);

                }

                return retfunc;

            }

            window.addEventListener("message", function (ev) {

                var rdata = JSON.parse(ev.data);

                var fn = scope[rdata.fn];

                fn(rdata.args);

                delete scope[rdata.fn];

            })

            this.sendMessage = function (targetWindow, data, callback, targetDomain) {

                var callData = { data: data, fn: getNextCallbackName(callback) };

                targetWindow.postMessage(JSON.stringify(callData), targetDomain);

            }

        };

        function SyncMessageServer(win, domain, onSendMessage) {

            window.addEventListener("message", function (ev) {

                var json = JSON.parse(ev.data);

                var fn = json.fn;

                console.dir(json);

                ev.data = JSON.stringify(json);

                var result = onSendMessage(ev);

                ev.source.postMessage(

                    JSON.stringify({ fn: fn, args: [result] }), "*");

            });

        }

        var objSyncMsg = new SyncMessageClient(window, "*");

        function save(data, callback, domain) {

            var databaseWindow = document.getElementById("database").contentWindow;

            objSyncMsg.sendMessage(databaseWindow, { cmd: "save", q: "1+1=?" ,a:"2"}, function (ok) {

            }, "*");

        }

        function send(data, callback, domain) {

            var databaseWindow = document.getElementById("database").contentWindow;

            objSyncMsg.sendMessage(databaseWindow, { cmd: "query", q: "1+1=?" }, function (ok) {

                alert(ok);

            }, "*");

        }

    </script>

    <input type="button" value="save me" onclick="save()"></input>

    <input type="button" value="query me" onclick="send()"></input>

</body>

</html>

　　

服务的实现：

<html>

<meta charset="utf-8" />

<head>

    <title>

        存储页面

    </title>

</head>

<body>

    <script type="text/javascript">

        function SyncMessageServer(win, domain, onSendMessage) {

            window.addEventListener("message", function (ev) {

                var json = JSON.parse(ev.data);

                var fn = json.fn;

                ev.data = JSON.stringify(json);

                var result = onSendMessage(ev);

                ev.source.postMessage(

                    JSON.stringify({ fn: fn, args: [result] }), "*");

            });

        }

        function queryAnswserByQuestion(q) {

            return localStorage.getItem('Q:' + q);

        }

        function saveAnswser(q, a) {

            if (a && localStorage.getItem('Q:' + q) != a) {

                localStorage.setItem('Q:' + q, a);

                console.log('Q：' + q + '---> A:' + a);

            }

        }

        var sendMessageServer = new SyncMessageServer(window, "*", function (ev) {

            var json = JSON.parse(ev.data).data;

            if (json.cmd == "query") {

return queryAnswserByQuestion(json.q);

            }

            else if(json.cmd == "save"){

                return saveAnswser(json.q,json.a);

            }

        })

    </script>

</body>

</html>

　　

html5 postMessage 实现类似 sendMessage 的同步效果，支持跨域的更多相关文章

  1. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  2. HTML5学习笔记（二十八）：跨域

    在跨域安全性方面,有多个地方会有限制,主要是XMLHttpRequest对象的跨域限制和iFrame的跨域限制,下面我们分别来看一下. Ajax跨域(CORS) CORS是一个W3C标准,全称是&qu ...

  3. html5跨域数据传递（postMessage）

    在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...

  4. 再也不学AJAX了！（三）跨域获取资源 ③ - WebSocket & postMessage

    让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术.而基于浏览器的"同源策略",不同"域"之间不可以发送AJAX请求.但是在 ...

  5. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  6. 解决跨域session 同步问题

    跨域来源:(前端站点和后端API布署到不同的站点) 解决方案 一.服务端设置 1.配置允许跨域请求 public class BaseAction { /** * 支持跨域请求 * @author f ...

  7. html5 postMessage解决跨域、跨窗口消息传递

    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...

  8. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  9. html5 postMessage解决跨域、跨窗口消息传递[转载]

    原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...

随机推荐

  1. 直流滤波器 verilog

    // dc filter- y(n) = c*x(n) + (1-c)*y(n-1) `timescale 1ps/1ps module ad_dcfilter #( // data path dis ...

  2. cocos creator 碰撞检测

    creator的碰撞检测系统分为碰撞检测系统和物理碰撞检测系统两个模块,并且这两个模块是相互独立的(这边主要是非物理碰撞检测系统) 1.在制作碰撞检测系统的时候要对物体进行分组,即指定节点的分组与分组 ...

  3. git 工作总计

    # git 工作总计 1 首先先克隆了git地址 master 分子 (这个做一次) 以后循环做的 2:git checkout -b dev 创建了临时开发的dev 分子 3:修改dev 分子的数据 ...

  4. Spring 开发常见问题

    linux 下http 接收中文参数乱码 解决: 在application.yml配置文件中添加 spring: http: encoding: charset: GB2312

  5. 深入解读Service Mesh背后的技术细节

    在Kubernetes称为容器编排的标准之后,Service Mesh开始火了起来,但是很多文章讲概念的多,讲技术细节的少,所以专门写一篇文章,来解析Service Mesh背后的技术细节. 一.Se ...

  6. 微服务框架——SpringCloud（四）

    1.Spring Cloud Config 分布式配置 a.Config服务器 ①新建springboot项目,依赖选择Config Server ②pom文件关键依赖 <parent> ...

  7. linux系统，关于Python多版本共存

    http://www.cnblogs.com/Yiutto/p/5962906.html 给个地址直接看八~

  8. 什么是HTTP及RFC

      HTTP:超文本传输协议(HyperText Transfer Protocol),是互联网上应用最为广泛的一种网络协议. 所有的www文件都必须遵守这个标准.设计HTTP最初的目的是为了提供发布 ...

  9. 光纤网卡与HBA卡区别

    1.简介 光纤网卡 ,指的是光纤以太网适配器,简称光纤网卡,学名Fiber Ethernet Adapter.传输输的是以太网通信协议,一般通过光纤线缆与光纤以太网交换机连接.按传输速率可以分为100 ...

  10. 关于阿里ICON矢量图(SVG)上传问题.

    注意点: 1. 存储为svg格式(建议使用存储为svg,不要使用导出为svg)2. 图像位置:链接(注意哦,不要点嵌入和保留编辑功能)---确定3. AI里面选中图形,点对象-路径-轮廓化描边 软件编 ...