HTML iframe 框架

HTML iframe 是框架的一種,也稱為內置框架或內聯框架,用來在網頁內嵌入另外一個網頁,例如現在非常流行的嵌入 Facebook 粉絲團到部落格或個人網站、在網站內容加上按讚或分享的按鈕都是常見的應用方式,HTML iframe 可以自己設定要嵌入的網頁所佔空間,如寬度與高度,也可以設定是否要顯示邊框或捲軸,幾乎所有主流的瀏覽器都支援 HTML iframe 框架語法。

HTML iframe 基本語法

<iframe src="要嵌入的網頁網址"></iframe>


標準的 HTML iframe 框架語法是由 <iframe> 開始至 </iframe> 結束,開頭的 <iframe> 標籤內的 src 就是用來指定要嵌入的網頁網址,如果想要寫得更完整一點,可以在 <iframe> 與 </iframe> 間加入"瀏覽器不支援的提示文字",當網友使用的瀏覽器不支援 HTML iframe 時,可以顯示提示文字讓網友知道有一個部分的內容沒有顯示。

HTML iframe 框架寬度與高度設定

<iframe src="要嵌入的網頁網址" width="寬度" height="高度"></iframe>


如果要替 iframe 加上寬度與高度,僅需使用 width 與 height 這兩個屬性即可,預設的屬性單位為 px,例如「width="200" height="200"」這樣寫就代表寬度與高度均是 200px,但為了管理上的效率,還是建議寫成「width="200px" height="200px"」比較完整,若是要使用百分比做為尺寸的單位,則一定要將百分比寫出來,例如「width="30%" height="50%"」這樣,否則瀏覽器可能會誤以為是用 px 做為單位。

HTML iframe 框架邊框顯示與隱藏

<iframe src="要嵌入的網頁網址" frameborder="0"></iframe>


網頁設計本來的風格在嵌入另一個網頁後,很可能會對原本的視覺效果有所影響,其中突兀的邊框可以說是相當明顯,還好 iframe 有提供隱藏邊框的功能,範例中的 frameborder="0" 代表隱藏邊框,如果是 frameborder="1" 則代表顯示邊框。

HTML iframe 框架 scrolling 捲軸

<iframe src="要嵌入的網頁網址" scrolling="no"></iframe>


既然是嵌入另一個網頁,就很可能會遇到網頁大小與主網頁的顯示區塊間的尺寸差異,嵌入的網頁可能很大或是內容很多,需要用到捲軸才方便,iframe 可以透過 scrolling 屬性來設定是否要顯示捲軸,scrolling 有三個屬性值,分別為 yes 代表要顯示捲軸、no 代表不顯示捲軸以及 auto 代表根據網頁大小自動顯示。

屬性混搭使用

<iframe src="要嵌入的網頁網址" width="200" height="200" frameborder="0" scrolling="no"></iframe>


以上幾個常用的屬性,可以同時用在一個 iframe 框架的設計上,調整出最適合的嵌入尺寸與形態,假設全部屬性都用上去,寫起來大至會向範例這個模樣,意思代表要嵌入一個寬度與高度都是 200px 的框架,邊框與捲軸都不顯示。

關於 iframe 內容的另開新視窗方式

HTML iframe 是框架功能,目的僅為用來嵌入其他 URL 的內容,至於透過 iframe 嵌入進來的內容,若要讓網友可以用新視窗開啟,例如被嵌入至網頁或部落格的 Facebook 粉絲團,網友可以直接從網頁中的 Facebook粉絲團直接前往 Facebook 官方網站,這個決定權在"被嵌入進來的網頁"內的連結是否有使用「target="_blank"」屬性,也就是超連結的"在新視窗開啟網頁"屬性。

關於 iframe 另開新視窗的技巧,請閱讀以下這篇:frame 連結另外開啟新視窗或在原本網頁開啟

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012