实现一个客户端发送 “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. python学习记录20190122_增量赋值

    python中的增量赋值 一,在python中a=a+b和a+=b有区别吗 **1,对可变的数据类型 a=[1,2,3]print(id(a)) #1602469350792b=[4,5]a=a+bp ...

  2. 【算法】Normalization

    Normalization(归一化) 写这一篇的原因是以前只知道一个Batch Normalization,自以为懂了.结果最近看文章,又发现一个Layer Normalization,一下就懵逼了. ...

  3. 协议形式化分析Scyther 资料整理

    1.性能分析 目前来说形式化的分析已经成为安全协议的一种很流行的方法,但是每种工具都用其不同适合的协议,Scyther软件是一种形式化分析工具,极大的促进了协议的分析和设计,scyther工具在运行界 ...

  4. Apt下载安装包时Hash校验和不符

    近期我的电脑在使用apt-get或aptitude下载Linux安装包时总是出现如下图所示的Hash校验和不符的问题.以至于下载过程被频繁中断,不得不反复运行apt-get或者在aptitude中按g ...

  5. Cocos动作执行时，同时执行完毕再进行下一步的方式

    在js中,runAction是统一保存起来等单个文件运行完了再统一进行回调运行的,所以如果想在动作执行完毕之后调用某个函数,那这个函数就应该存在于回调函数中,不会就不能同步了

  6. kafka 客户端 producer 配置参数

    属性 描述 类型 默认值 bootstrap.servers 用于建立与kafka集群的连接,这个list仅仅影响用于初始化的hosts,来发现全部的servers.格式:host1:port1,ho ...

  7. IMCASH：卖掉了比特币回老家生活的现在怎么样了？

    2012年大学毕业后,我不经意间接触到了比特币,抱着本人对新鲜事物的好奇心和知乎上的一些流言蜚语,我把一部分上学时期辛苦兼职赚的钱换成了比特币,当时真的觉得自己中了邪,不知道为什么会入这个坑. 比特币 ...

  8. python操作kafka（confluent_kafka 生产）

    #!/usr/bin/python # -*- coding:utf-8 -*- from confluent_kafka import Producer import json import tim ...

  9. 吻逗死(windows)系统下自动部署脚本(for java spring*)及linux命令行工具

    转载请注明出处:https://www.cnblogs.com/funnyzpc/p/10051647.html (^^)(^^)自動部署腳本原本在上個公司就在使用,由於近期同事需要手動部署一個Spr ...

  10. 教你如何用勾勾街快速生成一个苹果IOS APP

    现在苹果手机上的各种各样的APP,想不想也有一款属于自己的专属APP?很简单,用勾勾街可以在3分钟内快速制作一款,快来看看! 工具平台: 勾勾街 (www.gogojie.com ) 操作方法: 1. ...