H5中用postMessage传递数据,解决localStorage不能跨域问题
localStorage不能跨域,所以在A域名下用localStorage.YourKey方式存储的值,在B域名下是不能取到的。
所以需要转变思路,目前主要使用的两种方式:
一种方式:在A、B两个页面使用document.domain设置为相同的域名,但两个页面需要遵循同源策略,即协议,端口(如果有指定)和域名都相同;在根域范围内,允许把domain属性的值设置为它的上一级域。
另一种方式是推荐方式:在A域下,用postMessage方法把需要保存的数据传递过去,再在B域下接收并保存。postMessage可以安全地实现跨源通信。
postMessage方式实现步骤如下:
一、发送端sendpage.html(在 a.domain.com域名下):
1、sendpage.html中,添加一个iframe,src属性指定接收页面的url:
<iframe id="receivePage" src="http://b.domain.com/receive.html"></iframe>
2、sendpage.html中,在js中添加postMessage方法:
document.getElementById("receivePage").contentWindow.postMessage("要传递的数据","*");
二、接收端receive.html(在b.domain.com域名下):
<!doctype html>
<html>
<head>
</head>
<body style="height:100%;">
<script type="text/javascript">
window.addEventListener('message', function(e) {
if (e.source != window.parent)
return;
if(e.origin != "http://a.domain.com")//请求源验证
return;
localStorage.YourKey = e.data;
}, false);
</script>
</body>
</html>
H5中用postMessage传递数据,解决localStorage不能跨域问题的更多相关文章
- 使用HTML5中postMessage实现Ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...
- 使用HTML5中postMessage 实现ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...
- Nginx配置解决NetCore的跨域
使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_hea ...
- C#彻底解决Web Browser 跨域读取Iframes内容
C#彻底解决Web Browser 跨域读取Iframes内容 用C# winform的控件web browser 读取网页内容,分析一下数据,做一些采集工作. 如果是同一个域名下面还是好办的,基本上 ...
- 170222、使用Spring Session和Redis解决分布式Session跨域共享问题
使用Spring Session和Redis解决分布式Session跨域共享问题 原创 2017-02-27 徐刘根 Java后端技术 前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用 ...
- Vue Nginx反向代理配置 解决生产环境跨域
Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...
- 解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...
- 转:解决tomcat服务器跨域问题
原文地址: 解决tomcat服务器跨域请求问题 注:还未测试 在tomcat 的web.xml 配置文件中加入如下配置过滤器 (如web.xml中有多个filter时要把下面配置放在最前端) < ...
- 使用Spring Session和Redis解决分布式Session跨域共享问题
http://blog.csdn.net/xlgen157387/article/details/57406162 使用Spring Session和Redis解决分布式Session跨域共享问题
随机推荐
- Myeclipse在debug模式下没加断点程序卡住,start模式下可以正常启动
参考<eclipse在debug模式下卡住,start模式下可以启动>,地址:https://blog.csdn.net/jack_chen1994/article/details/761 ...
- 维修数列 Splay(这可能是我写过最麻烦的题之一了。。。用平衡树维护dp。。。丧心病狂啊。。。。)
题目来源BZOJ1500 这题的思路: 1.这题的话,稍微会splay的人,一般前面四个都不是问题..主要是最后的一个,要你在修改的同时要维护好最大字段和... 2.最大字段和其实就是区间合并.具体操 ...
- 【Monkey】Monkey稳定性测试常用命令
Monkey稳定性测试常用命令: 1.adb shell monkey n 2.adb shell monkey -p com.android.calculator2 1000 3.adb shel ...
- laravel5.5 env
env 函数 读取的变量里面带有 # 号的情况下 数据会丢失
- devexpress—WPF
https://docs.devexpress.com/WPF/7875/index Ocelot 资源汇总 https://www.cnblogs.com/shanyou/p/10363360.ht ...
- c# 关于Threading.ApartmentState
今天在做一个需求 就是 客户端的注销重新登录的操作,想必大家很清楚这个逻辑应该怎么去做, 在主线程里面去调用这个注销的方法 然后关闭当前应用域,重新开一个线程 让应用域在上面执行. STA(singl ...
- 基于服务器AAA的实验
1.实验拓扑 2.地址分配 Device Interface IP Address Subnet Mask R0 Fa0/0 192.168.1.2 255.255.255.0 S ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- webpack 大概
entry output loader: rules: [ {test:匹配文件格式, use: 使用的loader}, {test:匹配文件格式, use: 使用的loader}, ...//l ...
- L1-064 估值一亿的AI核心代码
以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: 消除原文中多余空格:把相邻单词间的多个空格换成 1 个 ...