Raie's Blog :: Html，iFrame 控制

本文章適合略懂 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

<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">

</script>
iFrame1
</body></html>

以 JavaScript 控制 iFrame 尺寸

iframe2.htm

<html><head><title>iFrame2</title></head><body>
<script language="JavaScript">

</script>
iFrame2
</body></html>

只有 iFrame 尺寸和 iframe1.htm 不同

三、實際狀況

iFrame 好用的地方在於，裡面甚至可以放入一個網站，若應用得當，對網頁設計是很有幫助的喔。

Html，iFrame 控制

目錄

最近文章

最近回覆

網站流量