实现一个客户端发送 “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. 关于element-ui表单验证（自定义验证规则）

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-widt ...

  2. windows10中微软小娜cortana如何彻底卸载删除？

    windows10中的Cortana可以通过语音干很多事情,但是对于我们来说用处不大,而且开机十分占用内存,下面教大家如何彻底的卸载并删除: 首先下载卸载Cortana的软件,下载链接:http:// ...

  3. ZOJ Problem Set - 3593 拓展欧几里得 数学

    ZOJ Problem Set - 3593 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3593 One Person ...

  4. C#中的 隐式与显式接口实现

    在C#中,正常情况下使用接口的实现使用的是 隐式接口实现. public interface IParent1 { void Medthod(); } public class Child : IPa ...

  5. OpenCV函数学习：alignPtr对齐指针

    转载地址:https://www.tuicool.com/articles/q2QrQr 在某些架构上,只有能被指定数(如4,16)整除的内存地址才能够被访问,否则程序会crash,或者出现错误的结果 ...

  6. Anki 2.0 用户手册

    Anki 2.0 用户手册 目录 Anki 2.0 用户手册 视频介绍 卡片和模板 Javascript Anki 2.0 用户手册 视频介绍 共享牌组和基础复习技巧 调换卡片正反面 卡片样式设计 亲 ...

  7. 《JAVA程序设计》结对编程联系_四则运算（第二周：整体性总结）

    结对对象与其博客链接 20175312陶光远:https://www.cnblogs.com/20175312-tgy/p/10697238.html 需求分析 (一)功能需求 1.自动生成题目(上周 ...

  8. notes for lxf（一）

    python代码不能用word和windows自带的记事本保存 word保存的不是纯文本文件 记事本会在文件开始的地方加上特殊字符(UTF-8 BOM) 交互模式启动了解释器 直接运行.py文件是一次 ...

  9. mysql远程连接/访问速度慢的解决方案

    连接阿里云服务器上的数据库,速度很慢 账户密码正确 已关闭防火墙 修改 /etc/my.cnf,添加配置skip-name-resolve [mysqld] skip-name-resolve 在连接 ...

  10. Ubuntu 服务器设置软件多用户访问

    假设在用户A下安装了软件xx 路径写入$home/.bashrc 这时该软件只有该用户可以使用 若要其他用户也能使用,只需要将该.bashrc拷贝到其他user的$home目录就行了