按情境分
1、不跨域時
2、主域相同、子域不同時
3、主域不同
不跨域時
訪問iframe
: contentWindow
訪問父級:parent
訪問頂級:top
a.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
</head>
<body>
<textarea id="message">這是高層的密碼!</textarea><br/>
<button id="test">看看員工在說什麼</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
<html xmlns="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>
<textarea id="message">這是員工的密碼!</textarea><br/>
<button id="test">看看領導在說什麼</button><br/>
<script> document.getElementById("test").onclick = function(){ alert(parent.document.getElementById("message").value); } </script>
</body>
</html>
跨域時
1、主域相同、子域不同
使用document.domain=主域名
a.html (http://a.xxx.com/js/crossdomain/demo/a.htm)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
</head>
<body>
<textarea id="message">這是高層的密碼!</textarea><br/>
<button id="test">看看員工在說什麼</button><br/><br/><br/>員工們:<br/>
<iframe src="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.getElementByI d("iframe").contentWindow.document.getElementByI d("message").value);
}
</script>
</body>
</html>
b.html ((http://b.xxx.com/com/js/crossdomain/demo/b.htm ))
<html xmlns="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>
<textarea id="message">這是員工的密碼!</textarea><br/>
<button id="test">看看領導在說什麼</button><br/>
<script>
document.domain = "jiaju.com";
document.getElementByI d("test").onclick = function(){
alert(parent.document.getElementByI d("message").value);
}
</script>
</body>
</html>
兩個域都設置:document.domain=‘jiaju.com’
2、主域不同
解決辦法:
1、location.hash
2、window.name
location.hash
location.hash
是什麼:
hash
屬性是一個可讀可寫的字符串,該字符串是 URL
的錨部分(從 #
號開始的部分)
http://www.xxx.com/js/crossdomain/proxy.html#iframeID=google&height=362&JJtype=height
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jiaju.com iframe proxy</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通過location.hash
方式傳遞參數給B,B通過定時器檢測hash
變化,執行對應操作。
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
</head>
<body>
<textarea id="message">這是高層的密碼!</textarea><br/>
<button id="test">看看員工在說什麼</button><br/><br/><br/>員工們:<br/>
<iframe src="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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSONP方式</title>
<script src="/js/crossdomain/crossdomain.js"></script>
</head>
<body>
<textarea id="message">這是員工的密碼!</textarea><br/>
<button id="test">看看領導在說什麼</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創建和上層同域的iframe
通過location.hash
方式傳遞參數給B ,B通過top.window
獲取頂層window
對象A
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)
<html xmlns="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";
function test(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)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B</title>
</head>
<body style="
<script src="/js/crossdomain/crossdomain.js"></script>
這裏是B(第二層)iframe<br/>
<div id="div" style="height:200px;color:#fff;">這裏高度可以變化</div>
<button id="btn">點擊改變高度</button><button id="btn2">點擊調用頂層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:"來自跨域的iframe的問候!"
});
}
</script>
</body>
</html>
location.hash
原理:
1、動態改變location.hash
,iframe
不會重載
2、無論跨域與否,iframe
內可以獲取自己的location.hash
3、只要域名相同就能通信,即使ABC三層嵌套
location.hash
通用解決辦法:
被嵌入的跨域的iframe
中引入
<script src="/js/crossdomain/crossdomain.js"></script>
提供以下方法:
JJcrossiframe.setHeight(‘youiframeID’) //自動設定跨域iframe高度
JJcrossiframe.setWidth(‘youiframeID’) //自動設定跨域iframe寬度
JJcrossiframe.callback(‘fn’,paramobj) //調用頂層iframe中fn函數
JJcrossiframe.init(paramobj , type) //自定義向頂層傳參數
// (type目前有:height,width,callback),
// 新增type需在代理頁面內自定義開發
location.hash
缺點
1、傳遞數據量有限
2、不太安全
window.name
window.name
是什麼:
name
在瀏覽器環境中是一個全局window
對象的屬性
當在 iframe
中加載新頁面時,name
的屬性值依舊保持不變
name
屬性僅對相同域名的 iframe
可訪問
window.name
的優勢:
- 數據量更大(2M)
- 更安全
- 可傳遞多種數據格式
window.name
的劣勢:
- 只適用於隱藏
iframe
的情形
原理(1) :
A創建iFrame
B,把要傳遞的數據放入window.name