本文章適合略懂 Html 語法的人 =_=+
一、前言
開始之前，先說明這篇文章的構想，要在選單中控制另一個 Frame 裡的 iFrame 尺寸。以圖來表達這種說法的話，大概就像這樣：
變更 iFrame 的內容是小事，假如連尺寸都要變更該怎麼做呢? 看似簡單，因為涉及 Frame 問題就變得複雜，這裡先對 Frame 種類作簡單區別，之後才不會被複雜的 Frame 搞混了。
接著開始對它的結構作分析，要達到這個目標必須要開出下列五個網頁：
index.htm、frame1.htm、frame2.htm、iframe1.htm、iframe2.htm
frame1.htm 和 frame2.htm 藉頁框設定 frameset 語法嵌入母頁(index.htm)，目的只為了將選單和內容隔開，是屬於固定性質的 frame，不會對內容作更動；iframe1.htm 和 iframe2.htm 則藉 iframe 語法嵌入 frame2.htm，圖示如下：
接下來可以直接看 Html 語法了，說明少一點比較不會愈描愈黑 ^ ^
二、程式碼
index.htm
frame1.htm
frame2.htm
iframe1.htm
iframe2.htm
三、實際狀況
iFrame 好用的地方在於，裡面甚至可以放入一個網站，若應用得當，對網頁設計是很有幫助的喔。
一、前言
開始之前，先說明這篇文章的構想，要在選單中控制另一個 Frame 裡的 iFrame 尺寸。以圖來表達這種說法的話，大概就像這樣：
index.htm、frame1.htm、frame2.htm、iframe1.htm、iframe2.htm
frame1.htm 和 frame2.htm 藉頁框設定 frameset 語法嵌入母頁(index.htm)，目的只為了將選單和內容隔開，是屬於固定性質的 frame，不會對內容作更動；iframe1.htm 和 iframe2.htm 則藉 iframe 語法嵌入 frame2.htm，圖示如下：
二、程式碼
index.htm
<html>
<head><title>Index</title></head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="frame1.htm" name="frame1" id="frame1" scrolling="auto" noresize="noresize">
<frame src="frame2.htm" name="frame2" id="frame2">
</frameset>
<noframes><body></body></noframes>
</html>
很一般的 Frameset (頁框設定)<head><title>Index</title></head>
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="frame1.htm" name="frame1" id="frame1" scrolling="auto" noresize="noresize">
<frame src="frame2.htm" name="frame2" id="frame2">
</frameset>
<noframes><body></body></noframes>
</html>
frame1.htm
<html><head><title>Frame1</title></head><body>
<label>
<input type="button" name="button1" value="iframe1" onClick="parent.frame2.my_iframe.location.href='iframe1.htm'">
<input type="button" name="button2" value="iframe2" onClick="parent.frame2.my_iframe.location.href='iframe2.htm'">
</label>
</body></html>
按鈕跳過三個頁框控制 iFrame，是 JavaScript 用法，target 的話只要 my_iframe 就可以了<label>
<input type="button" name="button1" value="iframe1" onClick="parent.frame2.my_iframe.location.href='iframe1.htm'">
<input type="button" name="button2" value="iframe2" onClick="parent.frame2.my_iframe.location.href='iframe2.htm'">
</label>
</body></html>
frame2.htm
<html><head><title>Frame2</title></head><body>
<table border="1"><tr><td>
<iframe src="iframe1.htm" name="my_iframe" id="my_iframe" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</td></tr></table>
</body></html>
Table 和 iFrame 標籤上都不要有尺寸設定<table border="1"><tr><td>
<iframe src="iframe1.htm" name="my_iframe" id="my_iframe" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</td></tr></table>
</body></html>
iframe1.htm
<html><head><title>iFrame1</title></head><body>
<script language="JavaScript">
<!--
parent.document.all.my_iframe.width=300;
parent.document.all.my_iframe.height=200;
// -->
</script>
iFrame1
</body></html>
以 JavaScript 控制 iFrame 尺寸<script language="JavaScript">
<!--
parent.document.all.my_iframe.width=300;
parent.document.all.my_iframe.height=200;
// -->
</script>
iFrame1
</body></html>
iframe2.htm
<html><head><title>iFrame2</title></head><body>
<script language="JavaScript">
<!--
parent.document.all.my_iframe.width=200;
parent.document.all.my_iframe.height=300;
// -->
</script>
iFrame2
</body></html>
只有 iFrame 尺寸和 iframe1.htm 不同 <script language="JavaScript">
<!--
parent.document.all.my_iframe.width=200;
parent.document.all.my_iframe.height=300;
// -->
</script>
iFrame2
</body></html>
三、實際狀況
iFrame 好用的地方在於，裡面甚至可以放入一個網站，若應用得當，對網頁設計是很有幫助的喔。
| 2007/11/20 11:02 |
Trackback Address :: http://blog.raienet.com/trackback/373
