七种跨域方法【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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

location.hash详解

一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为   http://twitter.com/username 改版后,就变成了   http://twitte...
  • baidu_31333625
  • baidu_31333625
  • 2017年01月09日 13:50
  • 9251

window.location.href和window.location.hash的区别

综:window.location.href表示重定向,后面跟着的是完整的url地址,与其相似的还有window.location.hash, 下面来比较window.location.href和w...
  • liwusen
  • liwusen
  • 2016年07月11日 17:35
  • 8263

巧用location.hash保存页面状态

在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果...
  • three_bird
  • three_bird
  • 2016年05月26日 09:15
  • 1961

关于window.location.hash的理解及其应用

location.hash的理解
  • zhuchuji
  • zhuchuji
  • 2016年02月25日 11:22
  • 750

location.hash的用法及onhashchange (精华,建议大家没事读一下)

location.hash是什么: 熟悉HTML都知道喵链接,没错,location.hash就是获取或设置喵链接的。上面的用法相信大家都知道,但是下面的就要考细节了。 当我们载入一个页面后...
  • babybk
  • babybk
  • 2016年05月08日 21:36
  • 2571

设置location.hash的值,前面不要带#号,为了兼容Safari

在网页http://xxx.com//a.html#abc中alert(location.hash)得到的结果是  #abc如果想改变hash值,理所当然应该是location.hash = "#xy...
  • lenel
  • lenel
  • 2007年09月29日 11:01
  • 4526

location.hash用法

假设当前的URL是 http://example.com:1234/test.htm#part2:    document.write(location.hash); 结果为: #part2 l...
  • u013063153
  • u013063153
  • 2016年10月19日 10:11
  • 963

页面中的两种锚标记定位方式——a和location.hash

点击锚 ... 到标记 这是最简单的锚标记的方式,在网页中可能由于篇幅过大所以很长,那么想回到某个位置就可以用这种方式定位。 还有种是用javascript function move...
  • cangkukuaimanle
  • cangkukuaimanle
  • 2011年12月15日 22:42
  • 7411

【转载】location.hash详解

去年9月,twitter改版。 一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为   http://twitter.com/username 改版后,就变成了   h...
  • qq_19891827
  • qq_19891827
  • 2016年03月21日 10:06
  • 437

location.search与location.hash问题

背景 转载http://www.cnblogs.com/libin-1/p/7067813.html 用过Vue Router的童鞋应该对路由传参的方式多多少少有些印象,Vue Router支...
  • sinat_17775997
  • sinat_17775997
  • 2017年09月12日 08:53
  • 312
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:七种跨域方法【7.location.hash篇】
举报原因:
原因补充:

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