快捷導(dǎo)航

js iframe跨域訪問(同主域/非同主域)分別深入介紹

更新時間：2013年01月24日 17:53:52 作者：

js跨域是個討論很多的話題。iframe跨域訪問也被研究的很透了,本文今天就叨叨兩句，感興趣的朋友可以了解下，就當(dāng)鞏固知識了，希望本文對你有所幫助

js跨域是個討論很多的話題。iframe跨域訪問也被研究的很透了。
一般分兩種情況：
一、是同主域下面，不同子域之間的跨域；
　　同主域，不同子域跨域，設(shè)置相同的document.domian就可以解決;
父頁訪問子頁，可以document.getElementById("myframe").contentWindow.document來訪問iframe頁面的內(nèi)容；如果支持contentDocument也可以直接document.getElementById("myframe").contentDocument訪問子頁面內(nèi)容；
　　子頁訪問父頁，可以parent.js全局屬性
二、是不同主域跨域；
　　前提，www.a.com下a.html，a.html內(nèi)iframe調(diào)用了www.b.com下的b.html，b.html下iframe調(diào)用了www.a.com下的c.html
　　b.html是不無法直接訪問a.html的對象，因為涉及到跨域，但可以訪問parent，同樣c.html的parent可以訪問b.html。c.html和a.html同域，是可以訪問a下的對象的。parent.parent.js對象!
　　看下面實例：
　　a.html

復(fù)制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標(biāo)題文檔</title> 
</head> 
<body> 
<iframe src="http://www.b.com/b.html" ></iframe> 
<ul id="getText"></ul> 
<script> 
function dosome(text){ 
document.getElementById("getText").innerHTML= decodeURI(text); 
} 
</script> 
</body> 
</html> 

b.html

復(fù)制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標(biāo)題文檔</title> 
</head> 
<body> 
<iframe id="myfarme" src="###"></iframe> 
<ul id="ct"> 
<li>這里是內(nèi)容1</li> 
<li>這里是內(nèi)容2</li> 
<li>這里是內(nèi)容3</li> 
<li>這里是內(nèi)容4</li> 
<li>這里是內(nèi)容5</li> 
<li>這里是內(nèi)容6</li> 
</ul> 
<script> 
window.onload = function(){ 
var text = document.getElementById('ct').innerHTML; 
document.getElementById('myfarme').src="http://www.a.com/c.html?content="+encodeURI(text); 
} 
</script> 
</body> 
</html> 

c.html

復(fù)制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標(biāo)題文檔</title> 
<script> 
window.onload = function(){ 
var text = window.location.href.split('=')[1] 
console.log(parent.parent) 
parent.parent.dosome(text); 
} 
</script> 
</head> 
<body> 
ddddddddddd 
</body> 
</html> 