愛(ài)華網(wǎng)1、不跨域時(shí)
2、主域相同、子域不同時(shí)
3、主域不同
不跨域時(shí)
訪問(wèn)iframe：contentWindow
訪問(wèn)父級(jí)：parent
訪問(wèn)頂級(jí)：top
a.html
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>A</title>
</head>
<body>
<textareaid="message">這是高層的密碼！</textarea><br/>
<buttonid="test">看看員工在說(shuō)什么</button><br/><br/><br/>
員工們：<br/>
<iframe src="b.htm"width="500" height="300"id="iframe"></iframe>
<script>document.getElementById("test").onclick = function(){ alert(document.getElementById("iframe").contentWindow.document.getElementById("message").value); }</script>
</body>
</html>
b.html
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>JSONP方式</title><scripttype="text/javascript"src="/js/jquery-1.5.1.min.js"></script></head>
<body>
<textareaid="message">這是員工的密碼！</textarea><br/>
<buttonid="test">看看領(lǐng)導(dǎo)在說(shuō)什么</button><br/>
<script>document.getElementById("test").onclick = function(){ alert(parent.document.getElementById("message").value); }</script>
</body>
</html>
跨域時(shí)
1、主域相同、子域不同
使用document.domain=主域名
a.html (http://a.xxx.com/js/crossdomain/demo/a.htm)
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>A</title>
</head>
<body>
<textareaid="message">這是高層的密碼！</textarea><br/>
<buttonid="test">看看員工在說(shuō)什么</button><br/><br/><br/>員工們：<br/>
<iframesrc="http://b.xxx.com/js/crossdomain/demo/b.htm" width="500"height="300"id="iframe"></iframe>
<script>
document.domain = "jiaju.com";
document.getElementByI d("test").onclick = function(){
alert(document.getElementById("iframe").contentWindow.document.getElementById("message").value);
}
</script>
</body>
</html>
b.html((http://b.xxx.com/com/js/crossdomain/demo/b.htm))
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JSONP方式</title>
<script type="text/javascript"src="/js/jquery-1.5.1.min.js"></script>
</head>
<body>
<textareaid="message">這是員工的密碼！</textarea><br/>
<buttonid="test">看看領(lǐng)導(dǎo)在說(shuō)什么</button><br/>
<script>
document.domain ="jiaju.com";
document.getElementByI d("test").onclick =function(){
alert(parent.document.getElementByI d("message").value);
}
</script>
</body>
</html>
兩個(gè)域都設(shè)置：document.domain=‘jiaju.com’
2、主域不同
解決辦法：
1、location.hash
2、window.name
location.hash
location.hash 是什么：
hash 屬性是一個(gè)可讀可寫(xiě)的字符串，該字符串是 URL 的錨部分（從 # 號(hào)開(kāi)始的部分）
http://www.xxx.com/js/crossdomain/proxy.html#iframeID=google&height=362&JJtype=height
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jiaju.com iframeproxy</title>
</head>
<body>
<script>
var hash_url = window.location.hash,
datas = hash_url.split("#")[1].split("&"),
data = {};
for(var i = 0;i<datas.length;i++){
var t =datas[i].split("=");
data[t[0]] =decodeURIComponent(t[1]);
}
document.domain = "jiaju.com";
switch(data["JJtype"])
{
case "height":
try{top.window.document.getElementByI d(data["iframeID"]).height =data["height"];}catch(e){}
break
case "width":
try{top.window.document.getElementByI d(data["iframeID"]).width =data["width"];}catch(e){}
break
case "callback":
try{top.window[data["fn"]].call(document,data);}catch(e){}
break
default:
}
</script>
</body>
</html>
例子
location.hash(A操作B)
A通過(guò)location.hash方式傳遞參數(shù)給B，B通過(guò)定時(shí)器檢測(cè)hash變化，執(zhí)行對(duì)應(yīng)操作。
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>A</title>
</head>
<body>
<textareaid="message">這是高層的密碼！</textarea><br/>
<buttonid="test">看看員工在說(shuō)什么</button><br/><br/><br/>員工們：<br/>
<iframesrc="http://www.bbb.com/demo/cross/iframe03/b.htm#message=111"width="500" height="300"id="iframe"></iframe>
<script>
var iframe = document.getElementByI d("iframe")
document.getElementByI d("test").onclick = function(){
var url = iframe.src,
time= (new Date()).getTime();
if(url.indexOf("message") != -1){
iframe.src = url.replace(/message=w+/,"message="+time);
}else {
iframe.src = url+"/#message="+time;
}
}
</script>
</body>
</html>
b.html
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JSONP方式</title>
<scriptsrc="/js/crossdomain/crossdomain.js"></script>
</head>
<body>
<textareaid="message">這是員工的密碼！</textarea><br/>
<buttonid="test">看看領(lǐng)導(dǎo)在說(shuō)什么</button><br/>
<script>
var data = {};
var hash_url;
function dealHash(){
hash_url =window.location.hash;
var datas =hash_url.split("#")[1].split("&");
for(var i =0;i<datas.length;i++){
var t = datas[i].split("=");
data[t[0]] = decodeURIComponent(t[1]);
}
}
function change(){
if(hash_url!=window.location.hash){
dealHash();
document.getElementByI d("message").value = data["message"];
}
}
setInterval(change,100);
</script>
</body>
</html>
location.hash(B操作A)
A創(chuàng)建和上層同域的iframe通過(guò)location.hash方式傳遞參數(shù)給B，B通過(guò)top.window獲取頂層window對(duì)象A
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>A</title>
<script>
document.domain = "jiaju.com";
functiontest(obj){
alert(obj['message']);
}
</script>
</head>
<body>
這里是A（第一層）<br/>
<iframe id="google"src="http://www.bbb.com/demo/crossiframe/b.html" width="1000"height="300"border=1></iframe>
</body>
</html>
b.html(http://www.bbb.com/demo/crossiframe/b.html)
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>B</title>
</head>
<body>
<scriptsrc="/js/crossdomain/crossdomain.js"></script>
這里是B（第二層）iframe<br/>
<div id="div">這里高度可以變化</div>
<buttonid="btn">點(diǎn)擊改變高度</button><buttonid="btn2">點(diǎn)擊調(diào)用頂層callback</button>
<script>
document.getElementByI d("btn").onclick = function(){
var div =document.getElementByI d("div");
div.style.height = (parseInt(div.style.height)+100)+"px";
JJcrossiframe.setHeight("google");
}
document.getElementByI d("btn2").onclick = function(){
JJcrossiframe.callback("test",{
message:"來(lái)自跨域的iframe的問(wèn)候！"
});
}
</script>
</body>
</html>
location.hash原理：
1、動(dòng)態(tài)改變location.hash，iframe不會(huì)重載
2、無(wú)論跨域與否，iframe內(nèi)可以獲取自己的location.hash
3、只要域名相同就能通信，即使ABC三層嵌套
location.hash通用解決辦法：
被嵌入的跨域的iframe中引入
<scriptsrc="/js/crossdomain/crossdomain.js"></script>
提供以下方法：
JJcrossiframe.setHeight(‘youiframeID’) //自動(dòng)設(shè)定跨域iframe高度
JJcrossiframe.setWidth(‘youiframeID’)//自動(dòng)設(shè)定跨域iframe寬度
JJcrossiframe.callback(‘fn’，paramobj)//調(diào)用頂層iframe中fn函數(shù)
JJcrossiframe.init(paramobj ,type)//自定義向頂層傳參數(shù)
// (type目前有：height,width,callback),
// 新增type需在代理頁(yè)面內(nèi)自定義開(kāi)發(fā)
location.hash缺點(diǎn)
1、傳遞數(shù)據(jù)量有限
2、不太安全
window.name
window.name 是什么：
name 在瀏覽器環(huán)境中是一個(gè)全局window對(duì)象的屬性
當(dāng)在 iframe 中加載新頁(yè)面時(shí)，name 的屬性值依舊保持不變
name 屬性僅對(duì)相同域名的 iframe 可訪問(wèn)
window.name 的優(yōu)勢(shì)：
數(shù)據(jù)量更大（2M）
更安全
可傳遞多種數(shù)據(jù)格式
window.name 的劣勢(shì)：
只適用于隱藏iframe的情形
國(guó)內(nèi)起源：
懌飛博客：http://www.planabc.net/2008/09/01/window_name_transport/
張克軍的例子
http://hikejun.com/demo/windowname/demo_windowname.html
原理(1) ：
A創(chuàng)建iFrame B,把要傳遞的數(shù)據(jù)放入window.name
愛(ài)華網(wǎng)本文地址 » http://www.klfzs.com/a/25101017/329001.html
