(二)文档请求不同源之location.hash跨域
一、基本原理
用location.hash解决域名完全不同的跨域,例如,http://www.baidu.com#helloworld中的"#helloworld"就是location.hash,改变hash值不会刷新页面,因此可以利用hash值来传递数据。
二、测试步骤
假设localhost:8080下的文件a.html要和localhost:8081下的文件b.html传递消息。
1、a.html首先创建一个隐藏的iframe,iframe的src指向localhost:8081/b.html,这时的hash值就可以做参数传递。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不同域location.hash的a.html</title> </head> <body> <script> // http://localhost:8080/a.html let ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = "http://localhost:8081/b.html#data"; document.body.appendChild(ifr); function checkHash() { try { let data = location.hash ? location.hash.substring(1) : ''; console.log('获得到的数据是:', data); }catch(e) { } } window.addEventListener('hashchange', function(e) { console.log('获得的数据是:', location.hash.substring(1)); }); </script> </body> </html>
2、b.html收到消息后通过parent.location.hash值来修改a.html 的hash值,从而实现数据传递。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不同域location.hash的b.html</title> </head> <body> <script> // http://locahost:8081/b.html switch(location.hash) { case "#data": callback(); break; } function callback() { const data = "somenumber: 1111"; try { parent.location.hash = data; }catch(e) { // ie, chrome下的安全机制无法修改parent.location.hash // 所以要利用一个中间的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'http://localhost:8080/c.html#' + data; //该文件在请求域名的域下 document.body.appendChild(ifrproxy); } } </script> </body> </html>
3、由于两个页面不在同一个域下,IE、Chrome不允许修改parent.location.hash的值,所以要借助localhost:8080域名下的一个代理iframe的c.html页面。
<script> parent.parent.location.hash = self.location.hash.substring(1); </script>
4、打开两个http服务器
5、打开浏览器访问localhost:8080/a.html,注意不是8081,就可以看到获取到的数据了,此时页面的hash值也已经改变。localhost:8080/a.html#somenumber:1111
(二)文档请求不同源之location.hash跨域的更多相关文章
- (二)文档请求不同源之window.name跨域
一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...
- (二)文档请求不同源之window.postMessage跨域
一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...
- (二)文档请求不同源之flash跨域
对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...
- (三)ajax请求不同源之服务器代理跨域
一.基本原理 Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 二.客户端和服务端代码 1.在localho ...
- js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域
奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图 上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...
- jsonp突破同源策略,实现跨域访问请求
跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...
- jsonp突破同源策略,实现跨域訪问请求
版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...
- 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...
- 学习AJAX必知必会(4)~同源策略、解决跨域问题(JSONP、CORS)
一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...
随机推荐
- 【系统架构】软件核心复杂性应对之道-领域驱动DDD(Domain-Driven Design)
前言 领域驱动设计是一个开放的设计方法体系,目的是对软件所涉及到的领域进行建模,以应对系统规模过大时引起的软件复杂性的问题,本文将介绍领域驱动的相关概念. 一.软件复杂度的根源 1.业务复杂度(软件的 ...
- 一文读懂ES6(附PY3对比)
Ⅰ.ES6~POP¶ 代码示例:https://github.com/lotapp/BaseCode/tree/master/javascript/1.ES6 在线演示:https://githu ...
- 主席树[可持久化线段树](hdu 2665 Kth number、SP 10628 Count on a tree、ZOJ 2112 Dynamic Rankings、codeforces 813E Army Creation、codeforces960F:Pathwalks )
在今天三黑(恶意评分刷上去的那种)两紫的智推中,突然出现了P3834 [模板]可持久化线段树 1(主席树)就突然有了不详的预感2333 果然...然后我gg了!被大佬虐了! hdu 2665 Kth ...
- 洛谷P1776 宝物筛选
一道很好的单调队列优化多重背包入门题 令\(v[i]\)表示重量,\(w[i]\)表示价格 ,\(c[i]\)表示最多可放的数量,不难推出朴素的转移方程如下: \(f[i][j]=max\{f[i-1 ...
- HTML-Note
<meta>在 HTML 5 中,有一个新的 charset 属性,它使字符集的定义更加容易. charset character encoding 定义文档的字符编码. e.g. < ...
- SQL Server数据库中表的增、删、改
通过SqlCommand对象的ExecuteNonQuery方法执行命令行,来实现数据库中表的增.删.改.主要有5步 using System.Data.SqlClient;//载入数据库命名空间 p ...
- Linux 下 boost 库的安装,配置个人环境变量
部分引自: https://blog.csdn.net/this_capslock/article/details/47170313 1. 下载boost安装包并解压缩到http://www.boos ...
- Python生成器,迭代器,可迭代对象
在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set,dict ...
- Shiro 系列: 简单命令行程序示例
在本示例中, 使用 INI 文件来定义用户和角色. 首先学习一下 INI 文件的规范. =======================Shiro INI 的基本规范================== ...
- CEYE平台的使用
0x01 CEYE 是什么 CEYE是一个用来检测带外(Out-of-Band)流量的监控平台,如DNS查询和HTTP请求.它可以帮助安全研究人员在测试漏洞时收集信息(例如SSRF / XXE / R ...