問題描述：
使用location.hash + iframe實(shí)現(xiàn)跨越
現(xiàn)在本地頁(yè)面a.html要訪問異域b.html的數(shù)據(jù)
怎么辦？
環(huán)境配置：
a.html 和 c.html我們放在php的wamp中運(yùn)行
他們的地址為：http://localhost/a.html和http://localhost/c.html
b.html 的代碼，我放在lamport.me/b.html中
原理：
1.a.html中有一個(gè)隱藏的frame,該frame指向異域lamport.me的b.html，且傳遞hash值給b.html
2.b.html獲取hash值，生成data值，然后動(dòng)態(tài)創(chuàng)建iframe，該iframe將data值傳給與a.html同域的c.html
3.因?yàn)閏.html與a.html同域，可以傳值。
如果該文件不能訪問，你可以在自己的wamp中配置一個(gè)虛擬主機(jī)進(jìn)行訪問
虛擬主機(jī)的配置地址：
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頁(yè)面');
function sendRequest(){
//動(dòng)態(tài)創(chuàng)建個(gè)iframe
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
//跨域發(fā)送請(qǐng)求給b.html，參數(shù)是#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>另某個(gè)域的:b.html</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
function checkHash(){
var data = '';
//模擬一個(gè)簡(jiǎn)單的參數(shù)處理操作
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">
//因?yàn)閏.html和a.html屬于同一個(gè)域，所以可以通過改變其location.hash的值，可以通過parent.parent獲取a.html的window對(duì)象
parent.parent.location.hash = self.location.hash.substring(1);
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
