`
yangshen998
  • 浏览: 1240636 次
文章分类
社区版块
存档分类
最新评论

通过 iframe 和 location.hash 进行跨域通信

 
阅读更多

javascript 中 location.hash 是指 www.aa.com/a.php#abc中的#abc。

在本试验中,在局域网中用两台Windows 机器分别搭建了PHP的简单系统。通过设置 hosts 文件,使得A机器的系统网址为www.sso.com/SSO B机器系统网址为 www.javascript.com/SSO

本实验模拟的是 A 中通过IFrame将 B嵌入进来。然后A 每5秒钟查看A的hash值,并将hash值显示在A的页面中。

B页面在加载时就查看B的hash值,并根据hash值做出相应的动作。

总的交互过程为:

1. A 将B带有Hash值为 first的页面嵌入到Iframe中

2. B根据自己的Hash值去改变A的hash值

3. A又将A的hash值进行显示。

4. A 点击按钮,将B的hash值改成 second.

5. B发现B的hash值为Second,就调用callback2 函数,将A的hash值改成third

其中A通过setInterval(checkHash(), time) 函数进行定时查看A的hash值,并在checkHash中进行相关操作。在本实验中,checkHash将A的hash值进行显示。

A 的代码如下:


<html>
<h1>通过IFRAME 和 location.hash 进行javasript 跨域</h1>
<label id="label">ss</label>
<iframe id="iframe"></iframe>
<input type="button" onClick="changeValue()"/>
<script>
var iframe = document.getElementById('iframe');

startRequest();
setInterval(checkHash,5000);


function changeValue(){
iframe.src='http://www.javascript.com/SSO/index.php#second';
}

function startRequest(){

iframe.src='http://www.javascript.com/SSO/index.php#first';
}

function checkHash(){
var hash = location.hash?location.hash.substring(1):'';
var label = document.getElementById('label');
label.innerHTML += hash;
}

</script>

</html>

B 页面代码:

<html>
<script>
setInterval(checkHash, 10000);
function checkHash(){
switch(location.hash){
case '#first':callback();
break;
case '#second':callback2();
break;
}
}

function callback(){
alert('callback_one');
try{
parent.location.hash='second';
} catch(e){
var iframeProxy = document.createElement('iframe');
iframe='http://www.SSO.com/SSO/proxy.php#second';
document.body.append(iframe);

}
}

function callback2(){
alert('callback_two');
parent.location.hash='third';

}
</script>
</html>

在B的callback函数中,将位于 A域名下的proxy.php 页面嵌入到B的iframe中,并通过设置proxy.php 的Hash值,然后在proxy.php中将A的Hash值设置为和proxy.php一样的Hash值。proxy.php 在这里作为桥梁来改变 A的hash值。

通过测试,在Firefox 下不需要使用该proxy.php 作为桥梁,直接在B页面中通过parent.location.hash = 'XXX' 就可以改变B的父页面,也就是A页面的Hash值

但在 chrome 和 IE 下则需要使用 proxy.php

proxy.php 页面代码很简单:

<html>
<script>
parent.parent.location.hash = self.location.hash.substring(1);

</script>
</html>

其中parent.parent 就是A页面的window 对象

self是指proxy.php 本身的window对象

分享到:
评论

相关推荐

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

    www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会...

    前端常见跨域解决方案(全).mht

    分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

    JavaScript使用HTML5的window.postMessage实现跨域通信例子

    利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...

    使用HTML5中postMessage知识点解决Ajax中POST跨域问题

    (3) iframe+location.hash; (4) flash。 postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信。 HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取...

    HTML5中使用postMessage实现Ajax跨域请求的方法

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等。 常规的几种解决方法: (1) document.domain+iframe;(2) 动态创建script; (3) iframe+location.hash; (4) flash。 ...

    跨域传值即主页面与iframe之间互相传值

    这种方式,是主页面需要给 iframe B 传递数据,然后 iframe B 获得到数据后进行特定的处理 实现方式 实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在主页面A中设置 iframe B 的 src...

    cross-domain-practice:使用node.js在前端练习各种跨域方法

    本文利用node.js 实现前端...包含以下几种:1.cors 2.jsonp 3.window.name+iframe 4.location.hash+iframe 5.HTML5 postMessage 6.nginx 反向代理 7.node.js + express + http-proxy-middleware8.webSocket具体教程见

    ttt-ext:Chrome扩展程序,可通过对字符串值进行简单的污点分析来帮助查找DOMXSS

    这有助于找到将location.hash解析为键值的内容,并且只有某些关键字容易受到注入。 “选项”页面包含一个设置,该设置可在每次加载页面时自动触发关键字搜索,这有时会使单页面Web应用程序感到困惑。 目前尚无限制...

    python入门到高级全栈工程师培训 第3期 附课件代码

    03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及...

Global site tag (gtag.js) - Google Analytics