一、基本原理

用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. golang 代码笔记

    锁 互斥锁,g0获取锁,到释放锁之间,g1去获取锁失败,阻塞,g0释放锁之后g1获取锁成功,gn阻塞. package main import ( "fmt" "sync ...

  2. java 日期格式化

    DateFormat DateFormat 是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间. SimpleDateFormat SimpleDateFormat 是一个以与 ...

  3. [TJOI2015]概率论

    [TJOI2015]概率论 史上最短黑题 看起来一脸懵逼,没有取模,1e-9 根据期望定义,发现 分母是一个卡特兰数,,,,不能直接算 所以考虑怎么消掉一些东西 gn表示n个点的叶子个数和,fn表示n ...

  4. (二分查找 结构体) leetcode33. Search in Rotated Sorted Array

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  5. GO语言系列（一）- 初识go语言

    一.golang语言的特性 1.垃圾回收 a.内存自动回收,再也不需要开发人员管理内存 b.开发人员专注业务实现,降低了心智负担 c.只需要new分配内存,不需要释放 2.天然并发 a.从语言层面支持 ...

  6. SpringBoot使用消息队列RabbitMQ

    RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲.消息分发的作用.RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,AMQP,即Advan ...

  7. Harbo1.5.2离线搭建

    环境说明 操作系统版本:Centos7.5 docker版本:docker-ce 17.03.2 harbor版本:v1.5.2 docker-compose:  1.22.0 基础环境搭建 系统优化 ...

  8. linux在线安装JDK（1.8版本）

    在线下载JDK 命令: wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-sec ...

  9. c# mvc 在控制器中动态解析cshtml文件并获取对应的html代码

    public static string GetViewHtml(ControllerContext context, string viewName, Object param) { if (str ...

  10. NOI-OJ 1.13 ID:34 确定进制

    整体思路 对于任意的p,q,r,可能使得p*q=r的最小进制应该是p,q,r三个数的所有数位中最大的数字+1,例如,6,9,42三个数中所有数位中最大的数字是9,故可能成立的最小进制是9+1,即10. ...