js獲取操作iframe子頁面中元素

antzone發表於2017-03-22
JS

本章節介紹一下如何如何在父頁面操作子頁面的元素，或者在子頁面中操作父頁面中的元素，既然是操作父頁面或者子頁面中的元素，那麼就首先要獲取document物件才可以，下面就分別做一下簡單介紹。

一.基本準備:

父頁面a.html程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
</head>  
<body>  
<iframe src="b.html" id="iframe"></iframe>
<div id="a">螞蟻部落一</div>
</body>  
</html>

子頁面b.html程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<div id="b">螞蟻部落二</div>
</body>
</html>

二.父頁面中操作子頁面中的元素:

操作子頁面中的元素，首先要獲取子頁面的document物件，實現此功能的方式有多重，我們只需要掌握一種就可以了，可能多了會造成一定的混亂，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function(){
  var iframe=document.getElementById("iframe");
  //獲取子頁面中id屬性值為b的元素物件
  iframe.contentWindow.document.getElementById("b");
}
</script>  
</head>  
<body>  
<iframe src="b.html" id="iframe"></iframe>   
</body>  
</html>

以上程式碼可以獲取子頁面中id屬性值為b的元素物件。

contentWindow屬性可以獲取iframe的window物件，後面的操作就是普通的DOM操作了。

三.子頁面中操作父頁面的元素:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function getParent() {
  if(window.self != window.top){
    var oDoc=window.self.parent.document;
    oDoc.getElementById("a").style.color="red";
  }
}
getParent()
</script>
</head>
<body>
<div id="b">螞蟻部落二</div>
</body>
</html>

以上程式碼可以將父頁面id屬性值為a的元素字型顏色設定為紅色。

相關文章