一、基本原理

用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. vim命令编辑Host文件

    用vim命令打开Host文件 [root@localhost /]# vim /etc/hosts 按"i"键,进入编辑模式按"Esc"键,退出编辑模式 按&q ...

  2. python14 1.带参装饰器 | wrapper 了了解 # 2.迭代器 ***** # 可迭代对象 # 迭代器对象 # for迭代器 # 枚举对象

    ## 复习 '''函数的嵌套定义:在函数内部定义另一个函数 闭包:被嵌套的函数 -- 1.外层通过形参给内层函数传参 -- 2.验证执行 开放封闭原则: 功能可以拓展,但源代码与调用方式都不可以改变 ...

  3. jq常用操作

    1. 将滚动条置于底部 var srcH = $(".msg-IOC").prop("scrollHeight");$('.msg-IOC').scrollTo ...

  4. checkbox，三种状态设置

    多选按钮的  选中.未选中.半选中(常用于子项有选中,未全选) <input id="ckeckbox" type="checkbox"> $('# ...

  5. luogu P5293 [HNOI2019]白兔之舞

    传送门 关于这题答案,因为在所有行,往后跳到任意一行的\(w_{i,j}\)都是一样的,所以可以算出跳\(x\)步的答案然后乘上\(\binom{l}{x}\),也就是枚举跳到了哪些行 如果记跳x步的 ...

  6. Linux负载查询定位工具

    1 uptime命令,负载查询命令 02:34:03 // 当前时间up 2 days, 20:14 // 系统运行时间1 user // 正在登录用户数 而最后三个数字呢,依次则是过去 1 分钟.5 ...

  7. 关于MySQL中的8个 character_set 变量

    https://blog.csdn.net/sun8112133/article/details/79921734 本篇会简单介绍在 MySQL 中关于 8个 character_set 变量的基本作 ...

  8. 墨水屏 E-Paper module【转】

    转自:https://blog.csdn.net/smallmount123/article/details/77489196 https://www.digikey.com/product-deta ...

  9. Android串口通信（Android Studio）

    gilhub上已有开源项目: https://github.com/cepr/android-serialport-api 可以直接使用

  10. SQL中笛卡尔积－cross join的用法

    在数学中,笛卡尔乘积是指两个集合X和Y的笛卡尓积(Cartesian product),又称直积,表示为X × Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员 假设集合A={a ...