了解使用 HTML 的 iframe 標籤的基礎知識

iframe 標籤允許我們將來自其他來源（其他網站）的內容嵌入我們的網頁中。

從技術上講，iframe 創建了一個嵌套的瀏覽上下文。這意味著 iframe 中的任何內容都不會干擾父頁面，反之亦然。JavaScript 和 CSS 不會「洩漏」到/從 iframe 中。

許多網站使用 iframe 執行各種操作。你可能熟悉 Codepen、Glitch 或其他允許你在頁面的一部分中編寫代碼並在框中查看結果的網站。這就是一個 iframe。

你可以通過以下方式創建一個 iframe：

<iframe src="page.html"></iframe>

你也可以加載絕對 URL：

<iframe src="https://site.com/page.html"></iframe>

你可以設置一組寬度和高度參數（或使用 CSS 設置它們），否則 iframe 將使用默認值，即 300x150 像素的框：

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

srcdoc 屬性允許您指定一些內嵌 HTML 以顯示。這是 src 的替代方案，但最近版本並不支持 Edge 18 及更低版本和 IE：

<iframe srcdoc="<p>我的狗是一隻乖狗</p>"></iframe>

沙盒

sandbox 屬性允許我們限制 iframe 中允許的操作。

如果省略它，則允許做任何操作：

<iframe src="page.html"></iframe>

如果將其設置為 “"，則不允許任何操作：

<iframe src="page.html" sandbox=""></iframe>

我們可以通過在 sandbox 屬性中添加選項來選擇允許的操作。您可以通過在它們之間添加空格來允許多個操作。以下是您可以使用的選項的不完整列表：

  • allow-forms：允許提交表單
  • allow-modals：允許打開模態窗口，包括在 JavaScript 中調用 alert()
  • allow-orientation-lock：允許鎖定屏幕方向
  • allow-popups：允許彈出窗口，使用 window.open() 和 target="_blank" 鏈接
  • allow-same-origin：將正在加載的資源視為同一原始網站
  • allow-scripts：允許加載的 iframe 執行腳本（但不能創建彈出窗口）
  • allow-top-navigation：允許 iframe 訪問頂層瀏覽上下文

允許

這是目前的實驗性功能，僅受基於 Chromium 的瀏覽器支持，這是父窗口與 iframe 之間資源共享的未來。

它類似於 sandbox 屬性，但允許我們允許特定功能，包括：

  • accelerometer：允許訪問 Sensors API 的加速度計接口
  • ambient-light-sensor：允許訪問 Sensors API 的環境光傳感器接口
  • autoplay：允許自動播放視頻和音頻文件
  • camera：允許從 getUserMedia API 訪問相機
  • display-capture：允許使用 getDisplayMedia API 訪問屏幕內容
  • fullscreen：允許訪問全屏模式
  • geolocation：允許訪問 Geolocation API
  • gyroscope：允許訪問 Sensors API 的陀螺儀接口
  • magnetometer：允許訪問 Sensors API 的磁力儀接口
  • microphone：允許使用 getUserMedia API 訪問設備麥克風
  • midi：允許訪問 Web MIDI API
  • payment：允許訪問 Payment Request API
  • speaker：允許通過設備揚聲器播放音頻
  • usb：允許訪問 WebUSB API
  • vibrate：允許訪問 Vibration API
  • vr：允許訪問 WebVR API

Referrer

加載 iframe 時，瀏覽器會在 Referer 標頭中向其發送重要信息，該標頭指示誰在加載它（請注意單個 r 的拼寫錯誤，我們必須容忍）。

referrerpolicy 屬性允許我們在加載 iframe 時設置要發送的 referrer。referrer 是一個 HTTP 標頭，用於讓頁面知道誰在加載它。以下是允許的值：

  • no-referrer-when-downgrade：這是默認值，當當前頁面在 HTTPS 上加載並且 iframe 在 HTTP 協議上加載時，它會發送 referrer
  • no-referrer：不發送 referrer 標頭
  • origin：發送 referrer，並且只包含原始網址（端口、協議、域名），而不是默認的原始網址 + 路徑
  • origin-when-cross-origin：在 iframe 中從同一原始網址（端口、協議、域名）加載時，以完整形式發送 referrer（原始網址 + 路徑）。否則，只發送原始網址
  • same-origin：僅在從 iframe 中的同一原始網址（端口、協議、域名）加載時發送 referrer
  • strict-origin：如果當前頁面在 HTTPS 上加載並且 iframe 也在 HTTPS 協議上加載，則發送原始網址作為 referrer。如果 iframe 在 HTTP 上加載，則不發送任何內容
  • strict-origin-when-cross-origin：在同一原始網址工作時，以原始網址 + 路徑作為 referrer 發送。如果當前頁面在 HTTPS 上加載並且 iframe 也在 HTTPS 協議上加載，則發送原始網址作為 referrer。如果 iframe 在 HTTP 上加載，則不發送任何內容
  • unsafe-url：即使從 HTTP 加載資源並且當前頁面在 HTTPS 上加載，也會將原始網址 + 路徑作為 referrer 發送