HTML`iframe`標籤

探索使用HTML的基礎知識iframe標籤

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

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

許多網站都使用iframe執行各種操作。您可能熟悉Codepen，Glitch或其他允許您在頁面的一部分進行編碼的站點，並且在框中看到了結果。那是一個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>My dog is a good dog</p>"></iframe>

沙盒

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

如果我們忽略它，則一切都被允許：

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

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

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

我們可以通過在sandbox屬性。您可以通過在兩者之間添加一個空格來允許多個。這是您可以使用的選項的不完整列表：

  • allow-forms：允許提交表格
  • allow-modals允許打開模態窗口，包括調用alert()在JavaScript中
  • 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 AmbientLightSensor接口
  • autoplay允許自動播放視頻和音頻文件
  • camera允許從getUserMedia API
  • display-capture允許使用getDisplayMedia API訪問屏幕內容
  • fullscreen允許進入全屏模式
  • geolocation允許訪問地理位置API
  • gyroscope允許訪問Sensors API陀螺儀界面
  • magnetometer允許訪問Sensors API磁力計接口
  • microphone使用getUserMedia API允許訪問設備麥克風
  • midi允許訪問Web MIDI API
  • payment允許訪問付款請求API
  • speaker允許通過設備揚聲器播放音頻
  • usb允許訪問WebUSB API。
  • vibrate允許訪問振動API
  • vr允許訪問WebVR API

推薦人

加載iframe時，瀏覽器會向其發送有關誰正在加載iframe的重要信息。Referer標頭（請注意單個r，是我們必須忍受的錯字）。

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

這referrerpolicy屬性可讓我們設置引薦來源網址，以便在加載時將其發送到iframe。引薦來源網址是HTTP標頭，可讓頁面知道誰在加載它。這些是允許的值：

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

免費下載我的HTML手冊


更多HTML教程：


在線技術維基！