HTML iframe 框架設計

HTML iframe 框架設計是一個相當古老的傳統 HTML 技術,不過這個技術至今都還有許多網站在使用,雖然漸漸有 HTML5 的技術在取代 HTML iframe 框架技術,卻還是有許多網頁設計師喜歡 iframe 的框架設計,因為它的語法簡單好用,又受到絕大多數主流瀏覽器的支援,確實是個相當不錯的解決方案,像是臉書(Facebook)的粉絲團嵌入功能就有 iframe 的框架版本,其實最早就是利用 iframe 框架的嵌入方式,後來才有 HTML5 的嵌入方式,除此之外,還有許多大型網站上都看得到這種 HTML iframe 框架的應用。

也許讀者會很好奇,HTML iframe 框架到底是什麼樣的東西,這裡稍微解釋一下,框架是一種用來將網頁規劃出一個區域,用來嵌入其他頁面的技術,例如在一個空白網頁中,嵌入許許多多不同的網站內容,這種效果就可以使用 HTML iframe 框架技術來完成,以下我們就來看看到底這個好用的 HTML iframe 框架到底要怎麼使用。

HTML iframe 框架語法

檔案: 在新視窗開啟程式碼文字檔
以上就是 HTML 的 iframe 框架語法,幾個參數介紹如下
  • src:用來設定被嵌入的網頁網址,必要項目。
  • scrolling:用來設定卷軸是否要顯示,scrolling="no" 表示不顯示卷軸,scrolling="yes" 表示要顯示卷軸,scrolling="auto" 則代表隨著框架的大小自動顯示卷軸。
  • frameborder:用來設定框架的邊框是否要顯示,frameborder="0" 表示不顯示邊框,frameborder="1" 則表示要顯示邊框。
  • height:設定框架的高度
  • width:設定框架的寬度
以上幾種常見的 iframe 參數設定方式都很簡單,重點在 src 一定要寫,否則不會顯示內容。

HTML iframe 框架應用範例

檔案: 在新視窗開啟程式碼文字檔
範例的語法僅供參考,我們並沒有替 src 設定要顯示的內容,如果要顯示哪個網頁,就把網址填入,這個範例框架的大小為 400x100,框架的邊框不會顯示(frameborder="0"),邊框的卷軸也不會顯示(scrolling="0"),寫出一個簡單的 HTML iframe 就是這麼簡單。

關於 HTML iframe 框架的使用注意事項

任何的技術都有一定的便利性,也有應該遵守的基本原則,以今天介紹的這個 HTML iframe 框架設計技術來說,要嵌入一個網頁或是模組到另外一個網頁,可以說是易如反掌的事情,不過在嵌入的同時,應該要卻定的是被嵌入的網頁或模組本身"允許被嵌入",這樣才可以嵌入,通常 iframe 都是應用來嵌入自己的網頁或模組,要不然就是用來嵌入提供"被嵌入"服務的內容,不應該任意遷入未經授權的網頁內容,這是基本的網路禮儀。

更多 HTML 網頁設計基礎
分享於 2015-03-01 - 更新於 2017-07-31