七种跨域方法【7.location.hash篇】

原创 2017年01月03日 11:08:48
问题描述:
使用location.hash + iframe实现跨越
现在本地页面a.html要访问异域b.html的数据
怎么办?
环境配置:
a.html 和 c.html我们放在php的wamp中运行
他们的地址为:http://localhost/a.html和http://localhost/c.html
b.html 的代码,我放在lamport.me/b.html中

原理:
1.a.html中有一个隐藏的frame,该frame指向异域lamport.me的b.html,且传递hash值给b.html
2.b.html获取hash值,生成data值,然后动态创建iframe,该iframe将data值传给与a.html同域的c.html
3.因为c.html与a.html同域,可以传值。
如果该文件不能访问,你可以在自己的wamp中配置一个虚拟主机进行访问
虚拟主机的配置地址:
http://blog.csdn.net/super_yang_android/article/details/53991982
本地http://localhost/a.html
<!doctype html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>localhost:a.html</title>

    <style type="text/css">

    </style>
</head>

<body>
<script type="text/javascript">
    alert('我是a页面');
    function sendRequest(){
        //动态创建个iframe
        var ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        //跨域发送请求给b.html,参数是#sayHello
        ifr.src = 'http://lamport.me/b.html#sayHello';
        document.body.appendChild(ifr);
    }
    function checkHash(){
        var data = location.hash?location.hash.substring(1):'';
        if(data){
            //这里处理返回值
            alert(data);
            location.hash = '';
        }
    }
    setInterval(checkHash,1000);
    window.onload = sendRequest;
</script>
</body>
</html>
异域http://www.lamport.me/b.html
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>另某个域的:b.html</title>

<style type="text/css">

</style>
</head>

<body>
<script type="text/javascript">
function checkHash(){
    var data = '';
    //模拟一个简单的参数处理操作
    switch(location.hash){
        case '#sayHello':
              data = 'HelloWorld';
              break;
        case '#sayHi':
              data = 'HiWorld';
              break;
        default : break;
    }
    data && callBack('#'+data);
}
function callBack(hash){
   var proxy = document.createElement('iframe');
   proxy.style.display = 'none';
   proxy.src = 'http://localhost/c.html'+hash;
   document.body.appendChild(proxy);
}
window.onload = checkHash;
</script>
</body>
</html>
本地http://localhost/c.html
<!doctype html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>localhost:c.html</title>
</head>

<body>
<script type="text/javascript">
    //因为c.html和a.html属于同一个域,所以可以通过改变其location.hash的值,可以通过parent.parent获取a.html的window对象
    parent.parent.location.hash = self.location.hash.substring(1);
</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

利用iframe和location.hash实现跨域

原理是利用location.hash来进行传值。在url: http://a.com#helloword中的‘#helloworld’就是location.hash,改变hash并不会导致页面刷新,所...

利用jsonp、iframe和location.hash解决跨域问题

几种解决js跨域的方法js的跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。如下示例:URL 说明 ...

深入理解前端跨域方法和原理

前言 受浏览器同源策略的限制,本域的js不能操作其他域的页面对象(比如DOM)。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操...
  • kongjiea
  • kongjiea
  • 2015年03月11日 16:44
  • 27628

location.hash详解

一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为   http://twitter.com/username 改版后,就变成了   http://twitte...

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 ...
  • Joyhen
  • Joyhen
  • 2014年03月20日 16:52
  • 172985

日期格式符RR和YY的区别

近来有一个应用,连接11g的库,自身逻辑大致是根据日期和其他条件删除表中对应的历史记录,此处日期条件判断未使用to_date(),其中日期和另外一些条件是个复合主键,然后再插入一条新记录(此处日期字段...
  • bisal
  • bisal
  • 2015年10月24日 20:49
  • 6120

利用jsonp、iframe和location.hash解决跨域问题

几种解决js跨域的方法js的跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。如下示例:URL 说明 ...

七种跨域方法【2.document.domain篇】

上一篇七种跨域方法【1.CROS篇】主要解决的是异域之间的传值 这里主要解决的是子域与父域之间的传值 问题描述: 现有父域:http://b.com/b.com.html 要向子域:http:...

七种跨域方法【5.window.postMessage篇】

问题描述: 本地http://localhost/data.html 向异域http://www.lamport.me/data2.html获取数据 如果该文件不能访问,你可以在自己的wamp中配置一...

利用location.hash实现跨域iframe自适应高宽

转载:http://ued.alimama.com/front-end/use-location-hash-to-auto-sizing/ 页面域关系: 主页面a.html所属域A:www.tao...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:七种跨域方法【7.location.hash篇】
举报原因:
原因补充:

(最多只允许输入30个字)