比較大一點的WEB項目一般頁面都會用到iframe,這樣如何訪問各個iframe的內容就顯得比較重要,比如登陸頁放在一個iframe中,而登陸狀態顯示頁又放在同一個頁面的另一個iframe中,那樣的話在登陸的時候就得重新整理另一個iframe中的登陸狀態顯示頁,經本人一晚上GOOGLE+親測,得如下代碼,可通過javascript來訪問或重新整理同一個頁面中不同iframe中的內容。
本範例共3個測試檔案:index.html, ye1.html, ye2.html 各個檔案源碼如下:
index.html: 原始碼複製(IE有效)列印關於
- <!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>
<!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: 原始碼複製(IE有效)列印關於
- <!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>
<!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 原始碼複製(IE有效)列印關於
- <!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>
<!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瀏覽器上測試通過!