前言

　　如果看懂了前文利用window.name+iframe跨域获取数据，那么此文也就很好理解了。一样都是动态插入一个iframe，然后把iframe的src指向服务端地址，而服务端同样都是输出一段js代码，同样都是利用和子窗口之间的通信完成数据传输，同样要针对同源策略做出处理。

location.hash和锚点

　　要理解location.hash+iframe跨域获取数据的机制，先得知道什么是location.hash，楼主买一送一，把锚点也一起介绍了。

　　其实锚点很简单，也相信大家都有用过。纳尼，你布吉岛？小看段代码就略知一二了（代码效果猛戳这里）：

<a href='#1'>red</a>
<a href='#2'>black</a>
<a href='#3'>yellow</a>
<a href='#4'>pink</a>
<div id='1' style='width:500;height:200;background-color:red'> </div>
<div id='2' style='width:500;height:200;background-color:black'> </div>
<div id='3' style='width:500;height:200;background-color:yellow'> </div>
<div id='4' style='width:500;height:1200;background-color:pink'> </div>

　　保存为html文件，然后自己点点超链接。没错，锚点就是为了能让文档滚动到指定的位置，而这个位置由你来定！因为是“滚动”，所以得有滚动条才行，如果木有滚动条那么不能滚也就不能动了，锚点也就没用了，仔细想想确实如此。锚点应用很广，举个大家都见过的例子，百度百科，我们打开博客园词条的百科->博客园，里面的导航使用的就是锚点技术。

　　我们查看下它的实现代码，实现也非常的easy

　　锚点设置是个a标签，它的href指向内容和跳转位置的name值一致（其实差个#），需要注意的是如果用的是name，那么必须用a标签包裹，而该法在html5中已经被废除。我们设置锚点通常采用id的方式，更简单，也不会产生没用的文档元素。

　　说完锚点，我们来说说location.hash。还是在博客园的百科页面，在导航栏点击”网站简介“后，注意这时候地址栏发生了变化！多出来的的正是location.hash值（字符串）。

　　而location.hash和location.href一样，既能获取它的值，也能用它进行重定向（重定位）。继续留在博客园的百科主页，然后在控制台输入location.hash = "#2”，然后页面就跳转到”发展历程“这部分了，和普通的锚点一样的效果。

　　而这个过程页面是不会进行刷新的，但是如果要回到之前的页面却能使用浏览器的前进、后退键。

如何跨域

　　了解了这些基础知识后，我们就要开始跨域了！

　　其实很简单，如果index页面要获取远端服务器的数据，动态插入一个iframe，将iframe的src属性指向服务端地址。这时top window和包裹这个iframe的子窗口是不能通信的（同源策略），所以改变子窗口的路径就行了，将数据当做改变后的路径的hash值加在路径上，然后就能通信了（和window.name跨域几乎相同），将数据加在index页面地址的hash值上。index页面监听地址的hash值变化（html5有hashchange事件，用setInterval不断轮询判断兼容ie6/7），然后做出判断，处理数据。

<body>
  <script type="text/javascript">
    function getData(url, fn) {
      var iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;

      iframe.onload = function() {
        fn(iframe.contentWindow.location.hash.substring(1));
        window.location.hash = '';
        document.body.removeChild(iframe);
      };

      document.body.appendChild(iframe);
    }

    // get data from server
    var url = 'http://localhost:8080/data.php';
    getData(url, function(data) {
      var jsondata = JSON.parse(data);
      console.log(jsondata.name + ' ' + jsondata.age);
    });
  </script>
</body>
<?php
  // 如果有必要则进行数据处理 $_GET['..']
  // code

  // 返回的数据
  $data = '{\"name\":\"hanzichi\",\"age\":10}';

  echo
  "
  <script>
    window.location = 'http://localhost:81/location-hash/proxy.html' + '#' + \"$data\";
  </script>
  "
?>

　　服务端文件中重定向的地址和index页面需同源，这是通信的关键。

　　然后在网上找了些别人写的博客，基本都是加个第三方代理文件，原理是一样的，服务端部分新建个iframe，然后将数据附加在location.hash上传递，也就是再嵌套个窗口，使之与祖辈窗口通信，可以参考js中各种跨域问题实战小结（二） - 大额_skylar，个人认为更复杂了，有兴趣的可以试试。

总结

　　location.hash+iframe法和jsonp以及window.name+iframe一样，都是双向的，但是都只能是GET形式，所以数据只能加在url上。

　　其实window.name和location.hash是异曲同工的，都是用了window下的属性，毕竟location.hash也是window下的（window.location.hash）。

参考

  1. URL的井号
  2. 锚点跳转及jquery下相关操作与插件
  3. js中各种跨域问题实战小结（二） - 大额_skylar

利用location.hash+iframe跨域获取数据详解的更多相关文章

  1. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  2. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  3. javascript跨域通信（一）：利用location.hash实现跨域iframe自适应

    页面域关系: a.html所属域A:www.A.comb.html所属域B:www.B.com 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读 ...

  4. 利用window.name+iframe跨域获取接口数据

    最近做了一个表单广告,需要从接口读取数据,做完发现谷歌火狐下正常,360兼容和IE浏览器无法获取数据,以下是鲜明的对比:      调试发现报错了: 然后开发把接口改成支持windowname,一开始 ...

  5. jQuery之ajax的跨域获取数据

    如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...

  6. XMLHTTPRequest对象不能跨域获取数据？！

    写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一 ...

  7. jsonp跨域获取数据小解

    jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...

  8. js中几种实用的跨域方法原理详解（转）

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  9. js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

随机推荐

  1. 关于Redis中的serverCron

    1.serverCron简介 在 Redis 中, 常规操作由 redis.c/serverCron 实现, 它主要执行以下操作 /* This is our timer interrupt, cal ...

  2. MyCat 学习笔记 第十篇.数据分片 之 ER分片

    1 应用场景 这篇来说下mycat中自带的er关系分片,所谓er关系分片即可以理解为有关联关系表之间数据分片.类似于订单主表与订单详情表间的分片存储规则. 本文所说的er分片分为两种: a. 依据主键 ...

  3. Java学习总结：飘逸的字符串

    Java学习:飘逸的字符串 前言 相信不管我们运用Java语言来开发项目还是进行数据分析处理,都要运用到和字符串相关的处理方法.这个社会处处有着和字符串相关的影子:日志.文档.书籍等.既然我们离不开字 ...

  4. proxool详细配置

    proxool详细配置 博客分类: Java 配置管理SQLServletprototypeXML  proxool一个数据库连接池框架,提供了对你选择的其它类型的驱动程序的连接池封装.可以非常简单的 ...

  5. Neo4j图数据库管理系统开发笔记之二：管理系统Server端界面一览

    最近在neo4j java api和rmi的基础上,设计了一套neo4j管理工具,分为server端和client端,中间用rmi进行通信.基本功能包括图数据库基本信息维护管理(创建.编辑.删除.统计 ...

  6. 深度学习笔记------linux下配置安装caffe-cpu only模式

    本文适合初学者学习配置caffe的最简单方法.这是我在看了网上各种大神的方法后总结的最傻瓜式的配置方法了. 本人也是在不断地配置caffe过程中受打击与成长@.@ 第一步.配置caffe所需的依赖环境 ...

  7. python split()函数使用拆分字符串 将字符串转化为列表

    函数:split()Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(list ...

  8. puppet学习笔记（一）

    之前搞了一个月zabbix,基本上是能熟练使用了,不过在后来部署的时候发现这玩意在部署的时候机子少还行,机子多了手动安装手会残的.第一反应是用puppet,后来师父直接用puppet搞定了.索性自己也 ...

  9. docker常用术语命令

    镜像(Image) vs Dockerfile 这组概念很少会让人产生疑惑,但是这两者的区别非常重要.Docker在镜像(image)中运行你的代码,而不是Dockerfile.Dockerfile是 ...

  10. 通过JDBC进行简单的增删改查（二）

    本章笔记更易理解和学习,也是我第一次初学的笔记. package javastudy; import java.sql.Connection; import java.sql.DriverManage ...