一、基本原理

用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. BZOJ4259残缺的字符串

    题目描述 很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时,这两个串已经老化了,每个串都有不同程度的残缺. ...

  2. java 日期格式化

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

  3. PHP基础之$_SERVER的详细参数与说明

    这几天准备静下心来看看平时忽略的一些PHP基础知识,也算是一个复习吧. 今天准备复习的是$_SERVER这个变量. 说明:$_SERVER 是一个包含了诸如头信息(header).路径(path).以 ...

  4. openstack项目【day23】：glance基础

    本节内容 一 什么是glance 二 为何要有glance 三 glance的功能 四 glance的两个版本 五 镜像的数据存放 六 镜像的访问权限 七 镜像及任务的各种状态 八 glance包含的 ...

  5. CMDB服务器管理系统【s5day90】：创建资产更新服务器硬盘信息

    1.创建硬件资产信息 import json from django.shortcuts import render,HttpResponse from django.views.decorators ...

  6. EF CodeFirst系列（7）---FluentApi配置存储过程

    FluentApi配置存储过程 1.EF自动生成存储过程 EF6的CodeFirst开发模式支持给实体的CUD操作配置存储过程,当我们执行SaveChanges()方法时EF不在生成INSERT,UP ...

  7. Ubuntu16下Hadoop安装

    1. 安装Ubuntu 2. 新装Ubuntu常用软件安装和系统设置 (1) 安装vim yum install vim (2) 更改hostname为hadoop_master sudo vim / ...

  8. PHP循环语句深度理解分析——while, for, foreach, do while

    循环结构   一.while循环  while(表达式)  {   循环体;//反复执行,直到表达式为假  } 代码: $index = 1; while ($index<5) {        ...

  9. JAVA进阶6

    间歇性混吃等死,持续性踌躇满志系列-------------第6天 1.数组 package cn.intcast.day06.demo01; /* 直接打印数组名称,得到的是数组对应的内存地址的哈希 ...

  10. windows系统上安装mysql操作过程及常见错误处理

    1.下载mysql免安装版本,下载地址:http://dev.mysql.com/downloads/mysql/ 解压到自己的目录 2.编辑配置文件: 新建一个文本文件,修改名称及后缀为my.ini ...