WEBTECH 網頁設計教學站
HTML iframe 框架語法
HTML iframe 用來設定嵌入框架的應用,首先解釋一下什麼是 HTML 框架,簡單來說,框架可以想像為一個櫥窗,裡面可以放很多的東西,這個櫥窗就像是一個網頁的主體,裡面放的東西可稱為內置框架,這個概念應該蠻容易了解的,那假設我們現在要在一個沒有框架的網頁內某個區塊,採用框架的方式嵌入其他網頁的內容,這時候就可以使用 HTML iframe 來處理,常常見到的如部落格邊欄上用 iframe 嵌入許多外掛,或者是網站上用 iframe 嵌入 Facebook 的粉絲團,都是相當普遍的 HTML iframe 應用方式。

HTML iframe 語法
<iframe src="嵌入目標" width="寬度" height="高度" frameborder="邊框參數" scrolling="卷軸參數"></iframe>
HTML 的 iframe 有許多參數可以設定,最重要的就是 src 這個部分,嵌入目標就是要嵌入的網頁,少了這個部分,iframe 就等於沒有存在意義,嵌入的網頁可以是相同網域內的其他頁面,也可以是外部網頁。width 與 height 分別用來設定 iframe 所要占用的寬度與高度。第三個參數 frameborder 可以用來設定 iframe 的邊框是否要顯示,如果寫為 frameborder="0" 代表不顯示邊框,如果寫成 frameborder="1" 則代表要顯示邊框。最後 scrolling 用來控制 iframe 的卷軸是否要顯示,有三種屬性質可以設定,寫成 scrolling="yes" 代表要顯示捲軸、寫成 scrolling="no" 代表不顯示捲軸、寫成 scrolling="auto" 則代表根據網頁大小自動顯示。

HTML iframe 範例
<iframe src="嵌入目標" width="250px" height="300px" frameborder="0" scrolling="no"></iframe>
此範例的寬度與高度設定都是以 px 為單位,這也是大部分瀏覽器(browser)的預設值,px 有沒有寫通常沒有影響(建議還是寫出來比較不容易出錯),但如果採用百分比做為單位,就一定要寫出來,否則光寫數字會造成瀏覽器的誤判,以為是要以 px 為單位,再來「frameborder="0"」代表不顯示邊框、「scrolling="no"」代表不顯示卷軸,基本上 HTML iframe 的概念就這麼簡單。

延伸閱讀

連絡我們