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对象
分享到:
相关推荐
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的宽度和高度是不可预知而且会...
分享转载:前端常见跨域解决...3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域。...
(3) iframe+location.hash; (4) flash。 postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信。 HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取...
由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等。 常规的几种解决方法: (1) document.domain+iframe;(2) 动态创建script; (3) iframe+location.hash; (4) flash。 ...
这种方式,是主页面需要给 iframe B 传递数据,然后 iframe B 获得到数据后进行特定的处理 实现方式 实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在主页面A中设置 iframe B 的 src...
本文利用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具体教程见
这有助于找到将location.hash解析为键值的内容,并且只有某些关键字容易受到注入。 “选项”页面包含一个设置,该设置可在每次加载页面时自动触发关键字搜索,这有时会使单页面Web应用程序感到困惑。 目前尚无限制...
03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及...