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跨域共享问题
随机推荐
- [luogu P3806] 【模板】点分治1
[luogu P3806] [模板]点分治1 题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条 ...
- vs2015 c# winfrom应用程序打包成64位
关于Winform打包过程在网上已有详细教程,参考:https://www.cnblogs.com/yinsq/p/5254893.html 此次工作中需要打包成64位的程序,网上没有查到方法,现在讲 ...
- Redhat 6.3上安装CMake
在编译libssh时,要用到CMake,而且要依赖3.3以上的版本. 尝试了从CMake官网下载源码,编译安装.结果发现各种依赖,比如要升级GCC,升级Python等等,麻烦要死.搞了半天还是一堆问题 ...
- Linux文件系统目录
Linux操作系统目录呈树形结构,文件系统只有一个根目录,其余文件都是从根目录下延伸出来的 上图是一个Linux文件系统目录的展现,现在我们来看一下文件系统目录下相关目录及其功能 根目录( / ) L ...
- VNPY 软件架构分析
VNPY 架构设计文档 版本日志: 一. 引言 编写目的: 该软件概要设计说明书是“VNPY”开发中的重要文献资料,所完成的工作是将需求说明书中的数据流图转化成软件结构和数据结构,为后续进行详细设计说 ...
- STL 小白学习（10） map
map的构造函数 map<int, string> mapS; 数据的插入:用insert函数插入pair数据,下面举例说明 mapStudent.insert(pair<, &qu ...
- 团队服务器搭建（搭建php环境和安装在线mysql管理工具phpmyadmin）
1.本人良心推荐阿里云,因为他对学生来说优惠很多,比如说9.9/月的云主机,所以这里演示阿里云ubuntu系统,系统可以自己安装的 2.来到阿里云官网https://www.aliyun.com,免费 ...
- spring boot读取classpath下的json文件
import org.springframework.beans.factory.annotation.Value; import org.springframework.core.io.Resour ...
- mpeg2文件分析(纯c解析代码)
参考链接: 1. MPEG-2码流结构分析 https://www.cnblogs.com/CoderTian/p/9246225.html(本文语法采用这里的截图,代码原创) 1. mpeg2的码流 ...
- 关于Django的配置
一. 下载与安装Django 登录Django的官网,https://www.djangoproject.com/download/,在网页的左边有下载压缩包,下载后解压在py ...