內嵌頁框 <iframe>
<iframe> 是 HTML 的內嵌頁框元素，可以在一個網頁中內嵌另外一個網頁，像是在網頁裡放入 Youtube 影片、Facebook 貼文區塊或廣告，通常都是使用 <iframe> 實現，這篇教學會介紹 <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>
<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;
}
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～