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對象