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的宽度和高度是不可预知而且会...
通过使用 location.hash，可以实现跨域通信。 四、 window.name + iframe 跨域 通过使用 window.name，可以实现跨域通信。 五、 postMessage 跨域 通过使用 postMessage，可以实现跨域通信。 六、 跨域资源共享...
3. location.hash + iframe 跨域 4. window.name + iframe 跨域 5. postMessage 跨域 6. 跨域资源共享（CORS） 7. nginx 代理跨域 8. nodejs 中间件代理跨域 9. WebSocket 协议跨域 今天，我们主要讨论 jsonp 跨域...
分享转载：前端常见跨域解决...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 文件间进行通信， 只要 在同一客户端就行，跨应用程序， 可以跨域。...
例如，在`www.a.com/a.html`页面中，可以通过以下方式设置`document.domain`并与`www.script.a.com/b.html`进行通信： ```javascript document.domain = 'a.com'; var ifr = document.createElement('iframe'); ...
4. **IFrame跨域通信**：利用`window.postMessage`方法，可以在属于不同源的两个IFrame之间进行通信。这种方法适用于页面嵌套场景，但不适用于跨域API调用。 5. **WebSocket跨域**：WebSocket协议本身支持跨域，...
JavaScript遵循同源策略，这意味着来自不同源（协议+域名+端口）的`iframe`之间默认无法通过JavaScript进行通信。为了解决这个问题，我们可以利用`window.postMessage()`方法，它允许跨域通信。 2. `window.post...
- **原理**：这种方法通过在`iframe`的`location.hash`中传递数据来实现跨域通信。由于同源策略对`hash`值没有限制，因此可以利用这一点实现跨域数据传输。 - **代码示例**： ```javascript // 在主页面中创建...
3. `location.hash` + `iframe`：通过改变`iframe`的`location.hash`值，监听`hashchange`事件，可以实现跨域数据传递。 4. `window.name` + `iframe`：`window.name`属性在页面刷新或跳转后仍能保持其值，因此可以...
- 本例中，管理平台和运维平台的域名均为`oa.com`，可通过设置`document.domain`来实现跨域通信。 - 在项目入口文件中设置`document.domain`为`oa.com`： ```javascript document.domain = "oa.com"; ``` - **...
- **Location.hash+iframe**：通过修改`location.hash`值来实现跨域通信。 - **window.name+iframe**：利用`window.name`属性的特性来传递数据。 - **postMessage**：HTML5提供的API，允许不同源的窗口之间进行...
4. `window.location.hash`和`iframe` 此方法结合了`hash`和`iframe`，B页面将数据编码后附加到C.html的URL的`hash`部分，C.html读取`hash`值并将数据传递给A页面。这种方式同样利用了`iframe`来实现跨域通信。 ...
3. IFrame和Location Hash 利用IFrame，可以在不同的源之间传递信息。通过监听IFrame的`hash`变化，可以实现在父页面和IFrame页面间的通信。这种方法适用于需要部分页面跨域的情况。 4. Document.domain 当两个...
父页面可以通过修改`iframe`的`src`属性，添加查询参数或hash，`iframe`内部通过`window.location`获取这些信息。 4. `postMessage`的跨域代理 对于跨域的`iframe`，可以设置一个中间代理页面，通过这个代理页面...
通过以上步骤，我们就实现了跨域IFrame的高度自适应。这种方式虽然存在一定的局限性，比如不能兼容所有浏览器，但对大部分现代浏览器来说是可行的。在实际项目中，还需要根据具体的浏览器兼容性和安全性需求进行适当...
2. 使用iframe的hash属性进行通信。如果两个不同域的页面之间需要通信，可以在其中一个页面中改变iframe的hash值，另一个页面通过监听hash的变化来获取消息。需要注意的是，大部分现代浏览器都会记录hash的改变，这...