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 ...
随机推荐
- 初学python之路-day11
一.函数的参数:实参与形参 # 参数介绍: # 函数为什么要有参数:因为内部的函数体需要外部的数据 # 怎么定义函数的参数:在定义函数阶段,函数名后面()中来定义函数的参数 # 怎么使用函数的参数:在 ...
- js 对象，数组，字符串，相互转换
1:对象转换数组 let obj = {'val1':1, 'val2':2, 'val3':3, 'val4':4}; var arr = [] for (let i in obj) { //取键 ...
- Typescript---03 类、接口、枚举
传统的javascript程序使用函数和基于原型的继承来创建可重用的组件,从ECMAScript2015(ECMAScript 6)开始,可以使用基于类的面向对象方式. 一.类: 定义类(class) ...
- Docker动态给容器Container暴露端口
查看Container的IP地址 docker inspect <container name or id>| grep IPAddress 查看Container的映射的端口 docke ...
- Zabbix（二）
zabbix 监控第一台服务器 https://blog.51cto.com/5001660/2136303 一.搭建一台测试服务器 1.安装一台centos7操作系统 配置网络: vim /etc/ ...
- [转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配
基础知识 1. 关于iphoneX .iphoneXS.iphoneXSMax.iphoneXR机型的大小和像素 机型尺寸 注意:开发人员只需要记住开发尺寸 2. 屏幕组成 齐刘海(44px) + ...
- Spring boot实现原生websocket
网上的大部分教程是基于sockjs,这篇文章内容则是基于原生协议. 后台Spring boot 配置 @Configuration @EnableWebSocket public class WebS ...
- windows配置ssh免密登录linux
客户端(windows)要做的事情 默认机器上已安装git,若没有,请先安装git 查看本地是否有ssh公钥文件夹,若没有,则创建文件夹 mkdir ~/.ssh //创建文件夹 生成公钥 邮箱最好为 ...
- redis对set(无序集合)的相关操作
redis对set类型(无序集合)操作的相关命令以及如何在python使用这些命令 redis对set类型操作的命令: 命令 语法 概述 返回值 Redis Sadd 命令 sadd key memb ...
- PBRT笔记(7)——反射模型
基础术语 表面反射可以分为4大类: diffuse 漫反射 glossy specular 镜面反射高光 perfect specular 完美反射高光 retro-reflective distri ...