一、基本原理

用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跨域的更多相关文章

  1. (二)文档请求不同源之window.name跨域

    一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...

  2. (二)文档请求不同源之window.postMessage跨域

    一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...

  3. (二)文档请求不同源之flash跨域

    对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...

  4. (三)ajax请求不同源之服务器代理跨域

    一.基本原理 Server Proxy,顾名思义,在服务器端设置一个代理,由服务器端向跨域的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 二.客户端和服务端代码 1.在localho ...

  5. js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  6. jsonp突破同源策略，实现跨域访问请求

    跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...

  7. jsonp突破同源策略，实现跨域訪问请求

    版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...

  8. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  9. 学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）

    一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...

随机推荐

  1. JDK动态代理(Proxy)的两种实现方式

    JDK自带的Proxy动态代理两种实现方式 前提条件:JDK Proxy必须实现对象接口 so,创建一个接口文件,一个实现接口对象,一个动态代理文件 接口文件:TargetInterface.java ...

  2. nuxt.js实战之引入jquery

    head: { title: 'nuxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-widt ...

  3. Redis系列八：redis主从复制和哨兵

    一.Redis主从复制 主从复制:主节点负责写数据,从节点负责读数据,主节点定期把数据同步到从节点保证数据的一致性 1. 主从复制的相关操作 a,配置主从复制方式一.新增redis6380.conf, ...

  4. JavaJDBC整理

    1.1.1    导入驱动jar包 创建lib目录,用于存放当前项目需要的所有jar包 选择jar包,右键执行build path / Add to Build Path 前版本 package co ...

  5. Battery Historian 使用常用命令

    一.重置电池数据收集数据 打开电池数据获取:adb shell dumpsys batterystats --enable full-wake-history 重置电池数据: adb shell du ...

  6. Python Pandas 简单使用之 API熟悉

    1.read_csv li_index = ['round_id', 'index', 'c-sequen' ] dataset = pd.read_csv(file, low_memory=Fals ...

  7. Typora使用说明（记录总结）

    目录 区域元素 YAML FONT Matters 菜单 段落 标题 引注 序列 可选序列 代码块 数学块 表格 脚注 水平线 特征元素 链接 超链接 内链接 相关链 URLs 图片 斜体 加粗 删除 ...

  8. LFYZ-OJ ID: 1015 统计数字（NOIP2007）

    分析 本体思路很简单:读入数据,排序.统计.输出.难点在于数据量较大,选择何种排序方法就极为重要,否则很容易发生内存或时间超限.可以考虑以下几种思路: 桶排序 桶排序是可以想到的最简单方法,可在O(n ...

  9. js文件上传原理（form表单 ，FormData + XHR2 + FileReader + canvas）

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  10. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...