实现一个客户端发送 “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. 关于CSRF

    CSRF介绍 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF ...

  2. 移动端web app开发学习笔记

    移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...

  3. spring5.0.2.RELEASE源码环境构建

    Spring5 源码下载注意事项 首先你的JDK 需要升级到1.8 以上.Spring3.0 开始,Spring 源码采用github 托管,不再提供官网下载链接.大家可自行去github 网站下载, ...

  4. CTO 能力模型（简化版）

    最近思考了很多,我在大贲这几年的工作内容.从一开始到现在,伴随着大贲从一二十人,走到了现在的两百多人.我的工作也从一开始的带头冲锋陷阵,逐步转移到了带领产品研发,再到后来的全公司多业务线的技术管理工作 ...

  5. js中ASCII码和字符互相转换的方法

    目录 十进制ASCII码转换成字符 字符转换成十进制ASCII码 十进制ASCII码转换成字符 使用String.fromCodePoint(num1[, ...[, numN]])方法 String ...

  6. 今日头条Marketing API小工具(.Net Core版本)

    前言 由于工作原因,需要用到今日头条的Marketing API做一些广告投放的定制化开发.然后看现在网上也没多少关于头条Marketing API的文章,于是便就有了该篇文章. 头条Marketin ...

  7. java.lang.UnsatisfiedLinkError解决方法汇集（转载）

    我的解决方法: 将sigar.jar拷贝到/WEB-INF/lib/下,但这个方法不知道是不是终极解决办法,暂时没问题,其他方法可参考下面. 运行JSP报表程序页面出现java.lang.Unsati ...

  8. python面试题之Python支持什么数据类型？

    所属网站分类: 面试经典 > python 作者:外星人入侵 链接:http://www.pythonheidong.com/blog/article/67/ 来源:python黑洞网,专注py ...

  9. 难受的ESlint语法检测

    相信写过vue的各位小白都有过这样的体验,明明引入的文件语法是对的,明明自己写的代码是对的,但是总会报语法错误,没错,就是ESlint代码检测搞的鬼, 就算你在注释后面多打一个空格,它都会去搞事情,简 ...

  10. maya cmds pymel selectType() 选择类型切换

    maya cmds pymel selectType() 选择类型切换 import maya.cmds as cmds cmds.selectType( polymeshFace = True ) ...