探索使用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 APIdisplay-capture
允許使用getDisplayMedia API訪問屏幕內容fullscreen
允許進入全屏模式geolocation
允許訪問地理位置APIgyroscope
允許訪問Sensors API陀螺儀界面magnetometer
允許訪問Sensors API磁力計接口microphone
使用getUserMedia API允許訪問設備麥克風midi
允許訪問Web MIDI APIpayment
允許訪問付款請求APIspeaker
允許通過設備揚聲器播放音頻usb
允許訪問WebUSB API。vibrate
允許訪問振動APIvr
允許訪問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教程:
- HTML簡介
- HTML`iframe`標籤
- HTML表格
- HTML`video`標籤
- HTML`audio`標籤
- 文字的HTML標籤
- HTML表格
- HTML img標籤
- HTML`a`標籤
- HTML`picture`標籤
- HTML`figure`標籤
- HTML容器標籤
- 網絡上的可訪問性
- 如何在HTML中創建註釋
- 如何在暗模式下更改HTML圖像URL
- 使用`srcset`的響應式圖像
- 在黑暗模式下更改圖標