html5 postMessage 实现类似 sendMessage 的同步效果，支持跨域
实现一个客户端发送 “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 的同步效果，支持跨域的更多相关文章
- 创意HTML5文字特效 类似翻页的效果
原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...
- HTML5学习笔记（二十八）：跨域
在跨域安全性方面,有多个地方会有限制,主要是XMLHttpRequest对象的跨域限制和iFrame的跨域限制,下面我们分别来看一下. Ajax跨域(CORS) CORS是一个W3C标准,全称是&qu ...
- html5跨域数据传递（postMessage）
在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...
- 再也不学AJAX了！（三）跨域获取资源 ③ - WebSocket & postMessage
让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术.而基于浏览器的"同源策略",不同"域"之间不可以发送AJAX请求.但是在 ...
- HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 解决跨域session 同步问题
跨域来源:(前端站点和后端API布署到不同的站点) 解决方案 一.服务端设置 1.配置允许跨域请求 public class BaseAction { /** * 支持跨域请求 * @author f ...
- html5 postMessage解决跨域、跨窗口消息传递
一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...
- 使用HTML5中postMessage实现Ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...
- html5 postMessage解决跨域、跨窗口消息传递[转载]
原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...
随机推荐
- cdh集群ip更改
#---1.修改每个用户的hosts vi /etc/hosts #127.0.0.1 localhost localhost.localdomain localhost4 localhost4.lo ...
- 在django中使用redis
方式一 utils文件夹下,简历redis_pool.py import redis POOL = redis.ConnectionPool(host='127.0.0.1', port=6379,p ...
- Angular2 ng2 如何配置惰性加载
需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 ...
- zabbix 修改为UTC 时区的配置
修改php.ini中的date.timezone = UTC还确实是正解,修改后要重新启动apache,另外你应该用phpinfo()检查一下你修改php.ini和phpinfo()中指明的当前php ...
- 【Windows】JDK安装与环境变量配置
一.JDK下载 jdk有多个版本: java se开发包:Java SE Development Kit 8u25 ,必须的配置Java开发环境的.java se开发包+示例:Java SE Deve ...
- BootstrapTable，选中某几行，获取其数据并进行后台处理。以及其他的属性使用。
参考链接:bootstrap Table API 中文版 Bootstrap Table 选中某几行,获取其数据 Ajax传递数组,struts2接收数组 1.首先将复选框搞出来,<table ...
- golang 使用pprof进行性能调优
package main import "fmt" func lengthOfNonRepeatingSubStr(s string) int { lastOccurred := ...
- javascript中的浅拷贝ShallowCopy与深拷贝DeepCopy
拷贝,在js中,分为浅拷贝和深拷贝.这两者是如何区分的呢?又是如何实现的呢? 深浅拷贝的区分 首先说下,在js中,分为基础数据类型和复杂数据类型, 基础数据类型:Undefined.Null.Bool ...
- RxJS操作符（三）
一.过滤类操作符:debounce, debounceTime 跟时间相关的过滤 debounceTime自动完成:性能,避免每次请求都往出发 ); debounce中间传入Observable co ...
- cmd命令中运行pytest命令导入模块报错解决方法
报错截图 ImportError while loading conftest 'E:\python\HuaFansApi\test_case\conftest.py'. test_case\conf ...