網頁設計利器~iframe語法
網頁設計利器~iframe語法
一、前言
開始之前，先說明這篇文章的構想，要在選單中控制另一個 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
<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 (頁框設定)
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 就可以了
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 標籤上都不要有尺寸設定
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 尺寸
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 不同
三、實際狀況
iFrame 好用的地方在於，裡面甚至可以放入一個網站，若應用得當，對網頁設計是很有幫助的喔