JavaScript訪問同一個頁面中的不同iframe的內容！

learning_1發表於2008-10-17
JavaScript
比較大一點的WEB專案一般頁面都會用到iframe，這樣如何訪問各個iframe的內容就顯得比較重要，比如登陸頁放在一個iframe中，而登陸狀態顯示頁又放在同一個頁面的另一個iframe中，那樣的話在登陸的時候就得重新整理另一個iframe中的登陸狀態顯示頁，經本人一晚上GOOGLE+親測，得如下程式碼，可通過javascript來訪問或重新整理同一個頁面中不同iframe中的內容。
本樣例共3個測試檔案：index.html, ye1.html, ye2.html 各個檔案原始碼如下：
index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS框架測試</title>
</head>
<script language="javascript" type="text/javascript">
function fun()
{
    window.frames["ye1"].document.getElementById("con1").innerHTML = "aaa";  // 設定子窗體中的內容
//	window.frames["ye1"].location.reload();    // 重新整理子窗體
}
</script>
<body>
<p>
<iframe src="ye1.html" name="ye1" width="200" height="120" scrolling="auto"></iframe>
             <iframe src="ye2.html" name="ye2" width="300" height="120" scrolling="auto"></iframe>
</p>
<p>
  <input type="button" name="Submit" value="改變frm1的內容" onclick="fun()" />
</p>
<div id="main"></div>
</body>
</html>

ye1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頁面一</title>
<script>
	var i = Math.random();
	document.write(i);
</script>
</head>

<body>
<p>頁面一</p>
<div id="con1"></div>
</body>
</html>

ye1里加上一段javascript是為了方便在測試重新整理的時候能看到效果，即每回重新整理都隨機生成一個數.
ye2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頁面一</title>
</head>
<script language="javascript" type="text/javascript">
function fun()
{
	// window.parent.document.getElementById("main").innerHTML = "哎呀";   // 設定父窗體內的內容
	// window.parent.frames["ye1"].location.reload();   // 重新整理父窗體中的另一個子窗體
	window.parent.frames["ye1"].document.getElementById("con1").innerHTML = "bbb";  // 設定父窗體中的另一個子窗體的內容
}
</script>
<body>
<p>頁面二</p>
<p>
  <input type="button" name="Submit" value="改變頁面內容"  onclick="fun()"/>
</p>
<div id="con2"></div>
</body>
</html>

執行index.html點選按鈕即可看到效果，以上程式碼解決如下問題：
① 父窗體訪問或重新整理子窗體
② 子窗體訪問或重新整理父窗體
③ 同一個父窗體中的兩個子窗體之間的相互訪問或重新整理
程式碼經測試在IE5.5, IE6, IE7, IE8 Beta 2, FireFox, Opera, Chrome瀏覽器上測試通過！

相關文章