实现一个客户端发送 “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. shell判断进程是否存在

    #!/bin/bash #进入rest所有目录,后续在此目录执行动作 cd /data/www/vhosts/go/ #rest的进程数,由于脚本名称为restart_rest.sh,所以排除了对re ...

  2. kafka单节点的安装，部署，使用

    1.kafka官网:http://kafka.apache.org/downloads jdk:https://www.oracle.com/technetwork/java/javase/downl ...

  3. MonkeyFest2018Guangzhou

    MonkeyFest 是一个一年一度由全球Microsoft Xamarin开发者发起的全球性社区活动,主旨推广在云计算.人工智能.大数据.移动开发等技术. 跨平台技术移动开发(卢建晖) .NET C ...

  4. 【pG&&CYH-01】元旦联欢会

    题解: t1: 题解是循环矩阵 但我并没有往矩阵上想下去... 这个东西比较显然的是可以把它看成生成函数 然后就可以任意模数fft了 复杂度比题解优 $nlog^2$ t2: 随便推推式子就好了 t3 ...

  5. Docker 学习7 Dockerfile详解

    一.镜像的生成途径 1.使用当前进程替换上一个进程 exec 2.生成方式 3.dockerfile制作镜像要求 a.要有专有的工作目录. b.要有专门的制作文件,文件名首字母大写 c.如果要打包很多 ...

  6. 基于TensorFlow的手写中文识别（版本一）

    具体效果实现: 第一次由于设备问题所以只训练了是一些个简单的字: 第二选了23个字训练了3000在字迹清晰下能够识别: 类似于默,鼠,鼓,这类文字也能识别,由于训练数据的问题,在测试的时候应尽量写在正 ...

  7. 前端axios下载excel无法获取header所有字段问题

    后端设置header后,前端无法获取到其他字段,只需要在服务器端header里面设置 Access-Control-Expose-Headers: Content-Disposition

  8. Linux突然无法使用，是内存不足的问题

    昨晚发现这个问题是网站请求连不到Linux服务器了,后来发现是内存不足导致docker进程被杀掉了,docker的Status为Exit(137),是被内核杀掉的意思, 具体解释看这里,https:/ ...

  9. 车道线识别之 tusimple 数据集介绍

    Tusimple 是一家做自动驾驶的公司,他也公布了一些其在自动驾驶领域积累的数据,其中有一些是和车道线检测相关的.2018年6 月份,其举办了一次以摄像头图像数据做车道检测的比赛,公开了一部分数据及 ...

  10. matplotlia应用

    一.简单使用 使用函数 plt.polt(x,y,label,color,width) 根据x,y 数组 绘制直,曲线 import numpy as np #引用numpy库,从新命名它为np(以后 ...