搜尋

內嵌頁框 <iframe>

<iframe> 是 HTML 的內嵌頁框元素,可以在一個網頁中內嵌另外一個網頁,像是在網頁裡放入 Youtube 影片、Facebook 貼文區塊或廣告,通常都是使用 <iframe> 實現,這篇教學會介紹 <iframe> 內嵌頁框元素的用法。

HTML 教學 - 內嵌頁框 <iframe>

認識 <iframe>

<iframe> 是 HTML 的內嵌頁框元素,只要指定 src 屬性的網址內容,就能在一個網頁中內嵌另外一個網頁,例如網頁裡的 Youtube 影片、Facebook 貼文區塊或廣告,通常都是使用 <iframe> 的技術。

  • <iframe> 屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,內容元素會在網頁無法顯示時才會出現。
  • <iframe> 的顯示類型為「inline-block 區塊元素」,預設不會自動換行。
  • <iframe> 不可以是 <a><button> 的子元素

例如下方的 HTML 開啟後,會使用 <iframe> 內嵌特定網頁。

<iframe src="https://www.oxxostudio.tw" frameborder="1" width="400" height="300">
  看不到頁面時才會顯示這行文字
</iframe>

HTML 教學 - 內嵌頁框 <iframe> - 認識 <iframe>

<iframe> 支援屬性

<iframe> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),也會使用下方的專門屬性:

屬性 說明
src 要嵌入的網頁網址。
width 頁框寬度 ( px )。
height 頁框高度 ( px )。
name 元素名稱。
sandbox 針對嵌入的網頁開啟一些限制,如果不設定,表示採用預設的限制。
seamless 使 iframe display 變成 block 強制換行。

關於 sandbox 屬性,在沒有設定的狀態下,針對嵌入的網頁會有一些限制,如果需要開啟這些限制,可以使用下列對應的屬性值,可以放入「多個值」,每個值採用「空白」分格,各個屬性值的說明如下:

sandbox 屬性值 說明
allow-forms 允許提交表單。
allow-modals 允許打開 modal 視窗。
allow-orientation-lock 允許鎖定螢幕方向,例如行動裝置的水平或垂直。
allow-pointer-lock 允許使用 Pointer Lock API。
allow-popups 允許彈出視窗 ( 例如 target="_blank" )。
allow-popups-to-escape-sandbox 允許彈出視窗不繼承 sandbox 的設定。
allow-presentation 允許開啟 presentation session。
allow-same-origin 允許將 iframe 的內容視作 same origin。
allow-scripts 允許 iframe 內容可以執行 JavaScript。
allow-top-navigation 允許 iframe 可以將內容載入到 top level 的父層視窗 ( 例如 target="_top" )。
allow-top-navigation-by-user-activation 如果是使用者手動去點擊,允許 iframe 可以將內容載入到 top level 的父層視窗。

例如下方的例子,嵌入的網頁可以使用表單、JavaScript、彈出視窗...等功能。

<iframe src="https://www.oxxostudio.tw"
        frameborder="0"
        width="400"
        height="300"
        sandbox="allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts">
  看不到頁面時才會顯示這行文字
</iframe>

<iframe> 預設樣式

下方是 <iframe> 的預設樣式:

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片