iframe · HTML 教程

# iframe `<iframe>`標簽用于在網頁里面嵌入其他網頁。 ## 基本用法 `<iframe>`標簽生成一個指定區域，在該區域中嵌入其他網頁。它是一個容器元素，如果瀏覽器不支持`<iframe>`，就會顯示內部的子元素。 ```html <iframe src="https://www.example.com" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p><a href="https://www.example.com">點擊打開嵌入頁面</a></p> </iframe> ``` 上面的代碼在當前網頁嵌入`https://www.example.com`，顯示區域的寬度是`100%`，高度是`500`像素。如果當前瀏覽器不支持`<iframe>`，則會顯示一個鏈接，讓用戶點擊。瀏覽器普遍支持`<iframe>`，所以內部的子元素可以不寫。 `<iframe>`的屬性如下。 - `allowfullscreen`：允許嵌入的網頁全屏顯示，需要全屏 API 的支持，請參考相關的 JavaScript 教程。 - `frameborder`：是否繪制邊框，`0`為不繪制，`1`為繪制（默認值）。建議盡量少用這個屬性，而是在 CSS 里面設置樣式。 - `src`：嵌入的網頁的 URL。 - `width`：顯示區域的寬度。 - `height`：顯示區域的高度。 - `sandbox`：設置嵌入的網頁的權限，詳見下文。 - `importance`：瀏覽器下載嵌入的網頁的優先級，可以設置三個值。`high`表示高優先級，`low`表示低優先級，`auto`表示由瀏覽器自行決定。 - `name`：內嵌窗口的名稱，可以用于`<a>`、`<form>`、`<base>`的`target`屬性。 - `referrerpolicy`：請求嵌入網頁時，HTTP 請求的`Referer`字段的設置。參見`<a>`標簽的介紹。 ## sandbox 屬性嵌入的網頁默認具有正常權限，比如執行腳本、提交表單、彈出窗口等。如果嵌入的網頁是其他網站的頁面，你不了解對方會執行什么操作，因此就存在安全風險。為了限制`<iframe>`的風險，HTML 提供了`sandbox`屬性，允許設置嵌入的網頁的權限，等同于提供了一個隔離層，即“沙箱”。 `sandbox`可以當作布爾屬性使用，表示打開所有限制。 ```html <iframe src="https://www.example.com" sandbox> </iframe> ``` `sandbox`屬性可以設置具體的值，表示逐項打開限制。未設置某一項，就表示不具有該權限。 - `allow-forms`：允許提交表單。 - `allow-modals`：允許提示框，即允許執行`window.alert()`等會產生彈出提示框的 JavaScript 方法。 - `allow-popups`：允許嵌入的網頁使用`window.open()`方法彈出窗口。 - `allow-popups-to-escape-sandbox`：允許彈出窗口不受沙箱的限制。 - `allow-orientation-lock`：允許嵌入的網頁用腳本鎖定屏幕的方向，即橫屏或豎屏。 - `allow-pointer-lock`：允許嵌入的網頁使用 Pointer Lock API，鎖定鼠標的移動。 - `allow-presentation`：允許嵌入的網頁使用 Presentation API。 - `allow-same-origin`：不打開該項限制，將使得所有加載的網頁都視為跨域。 - `allow-scripts`：允許嵌入的網頁運行腳本（但不創建彈出窗口）。 - `allow-storage-access-by-user-activation`：`sandbox`屬性同時設置了這個值和`allow-same-origin`的情況下，允許`<iframe>`嵌入的第三方網頁通過用戶發起`document.requestStorageAccess()`請求，經由 Storage Access API 訪問父窗口的 Cookie。 - `allow-top-navigation`：允許嵌入的網頁對頂級窗口進行導航。 - `allow-top-navigation-by-user-activation`：允許嵌入的網頁對頂級窗口進行導航，但必須由用戶激活。 - `allow-downloads-without-user-activation`：允許在沒有用戶激活的情況下，嵌入的網頁啟動下載。注意，不要同時設置`allow-scripts`和`allow-same-origin`屬性，這將使得嵌入的網頁可以改變或刪除`sandbox`屬性。 ## loading 屬性 `<iframe>`指定的網頁會立即加載，有時這不是希望的行為。`<iframe>`滾動進入視口以后再加載，這樣會比較節省帶寬。 `loading`屬性可以觸發`<iframe>`網頁的懶加載。該屬性可以取以下三個值。 - `auto`：瀏覽器的默認行為，與不使用`loading`屬性效果相同。 - `lazy`：`<iframe>`的懶加載，即將滾動進入視口時開始加載。 - `eager`：立即加載資源，無論在頁面上的位置如何。 ```html <iframe src="https://example.com" loading="lazy"></iframe> ``` 上面代碼會啟用`<iframe>`的懶加載。有一點需要注意，如果`<iframe>`是隱藏的，則`loading`屬性無效，將會立即加載。只要滿足以下任一個條件，Chrome 瀏覽器就會認為`<iframe>`是隱藏的。 > - `<iframe>`的寬度和高度為4像素或更小。 > - 樣式設為`display: none`或`visibility: hidden`。 > - 使用定位坐標為負`X`或負`Y`，將`<iframe`>放置在屏幕外。