【HTML 教程】iframe

1、基本用法
<iframe src="https://www.example.com"
width="100%" height="500" frameborder="0"
allowfullscreen sandbox>
<p><a href="https://www.example.com">點(diǎn)擊打開(kāi)嵌入頁(yè)面a>p>
iframe>
上面的代碼在當(dāng)前網(wǎng)頁(yè)嵌入https://www.example.com,顯示區(qū)域的寬度是100%,高度是500像素。如果當(dāng)前瀏覽器不支持
瀏覽器普遍支持
allowfullscreen:允許嵌入的網(wǎng)頁(yè)全屏顯示,需要全屏 API 的支持,請(qǐng)參考相關(guān)的 JavaScript 教程。
frameborder:是否繪制邊框,0為不繪制,1為繪制(默認(rèn)值)。建議盡量少用這個(gè)屬性,而是在 CSS 里面設(shè)置樣式。
src:嵌入的網(wǎng)頁(yè)的 URL。
width:顯示區(qū)域的寬度。
height:顯示區(qū)域的高度。
sandbox:設(shè)置嵌入的網(wǎng)頁(yè)的權(quán)限,詳見(jiàn)下文。
importance:瀏覽器下載嵌入的網(wǎng)頁(yè)的優(yōu)先級(jí),可以設(shè)置三個(gè)值。high表示高優(yōu)先級(jí),low表示低優(yōu)先級(jí),auto表示由瀏覽器自行決定。
name:內(nèi)嵌窗口的名稱,可以用于、
referrerpolicy:請(qǐng)求嵌入網(wǎng)頁(yè)時(shí),HTTP 請(qǐng)求的Referer字段的設(shè)置。參見(jiàn)標(biāo)簽的介紹。
2、sandbox 屬性
嵌入的網(wǎng)頁(yè)默認(rèn)具有正常權(quán)限,比如執(zhí)行腳本、提交表單、彈出窗口等。如果嵌入的網(wǎng)頁(yè)是其他網(wǎng)站的頁(yè)面,你不了解對(duì)方會(huì)執(zhí)行什么操作,因此就存在安全風(fēng)險(xiǎn)。為了限制
sandbox可以當(dāng)作布爾屬性使用,表示打開(kāi)所有限制。
<iframe src="https://www.example.com" sandbox>
iframe>
sandbox屬性可以設(shè)置具體的值,表示逐項(xiàng)打開(kāi)限制。未設(shè)置某一項(xiàng),就表示不具有該權(quán)限。
allow-forms:允許提交表單。
allow-modals:允許提示框,即允許執(zhí)行window.alert()等會(huì)產(chǎn)生彈出提示框的 JavaScript 方法。
allow-popups:允許嵌入的網(wǎng)頁(yè)使用window.open()方法彈出窗口。
allow-popups-to-escape-sandbox:允許彈出窗口不受沙箱的限制。
allow-orientation-lock:允許嵌入的網(wǎng)頁(yè)用腳本鎖定屏幕的方向,即橫屏或豎屏。
allow-pointer-lock:允許嵌入的網(wǎng)頁(yè)使用 Pointer Lock API,鎖定鼠標(biāo)的移動(dòng)。
allow-presentation:允許嵌入的網(wǎng)頁(yè)使用 Presentation API。
allow-same-origin:不打開(kāi)該項(xiàng)限制,將使得所有加載的網(wǎng)頁(yè)都視為跨域。
allow-scripts:允許嵌入的網(wǎng)頁(yè)運(yùn)行腳本(但不創(chuàng)建彈出窗口)。
allow-storage-access-by-user-activation:允許在用戶激動(dòng)的情況下,嵌入的網(wǎng)頁(yè)通過(guò) Storage Access API 訪問(wèn)父窗口的儲(chǔ)存。
allow-top-navigation:允許嵌入的網(wǎng)頁(yè)對(duì)頂級(jí)窗口進(jìn)行導(dǎo)航。
allow-top-navigation-by-user-activation:允許嵌入的網(wǎng)頁(yè)對(duì)頂級(jí)窗口進(jìn)行導(dǎo)航,但必須由用戶激活。
allow-downloads-without-user-activation:允許在沒(méi)有用戶激活的情況下,嵌入的網(wǎng)頁(yè)啟動(dòng)下載。
注意,不要同時(shí)設(shè)置allow-scripts和allow-same-origin屬性,這將使得嵌入的網(wǎng)頁(yè)可以改變或刪除sandbox屬性。
3、loading 屬性
loading屬性可以觸發(fā)
auto:瀏覽器的默認(rèn)行為,與不使用loading屬性效果相同。
lazy:
的懶加載,即將滾動(dòng)進(jìn)入視口時(shí)開(kāi)始加載。 eager:立即加載資源,無(wú)論在頁(yè)面上的位置如何。
<iframe src="https://example.com" loading="lazy">iframe>
上面代碼會(huì)啟用
有一點(diǎn)需要注意,如果
的寬度和高度為4像素或更小。樣式設(shè)為
display: none或visibility: hidden。使用定位坐標(biāo)為負(fù)
X或負(fù)Y,將>放置在屏幕外。
本文完~
推薦閱讀
【HTML 教程】網(wǎng)頁(yè)的語(yǔ)義結(jié)構(gòu)

