<iframe> 是 HTML 內(nèi)聯(lián)框架元素，它能夠?qū)⒘硪粋€(gè) HTML 頁(yè)面嵌入到當(dāng)前頁(yè)面中。

每個(gè)嵌入的 <iframe>，都會(huì)有自己的會(huì)話歷史記錄和 DOM 樹(shù)，不過(guò)增加 <iframe> 也會(huì)增加內(nèi)存和其他計(jì)算資源，因?yàn)?br> 其擁有完整的文檔環(huán)境，所以在增加 <iframe> 的同時(shí)也要考慮性能問(wèn)題。

1. allow 屬性

用于為 <iframe> 指定其特征策略。

1.1 allow=fullscreen

用于代替 allowfullscreen=true 屬性，用于激活 <iframe> 的全屏模式。

1.2 allow=payment

用于代替 allowpaymentrequest=true 屬性，用于跨域的 <iframe> 調(diào)用 Payment Request API

2. csp 屬性

對(duì)嵌入的資源配置內(nèi)容安全策略。

3. width、heigth 屬性

指定 <iframe> 的寬高，可指定數(shù)字，單位像素；也可指定百分比。默認(rèn)寬 300px，高 150px。

4. importance 屬性

表示 <iframe> 的 src 屬性指定的資源的加載優(yōu)先級(jí)。

• auto 默認(rèn)值，不指定優(yōu)先級(jí)，瀏覽器根據(jù)自身情況決定。

• high 優(yōu)先級(jí)高

• low 優(yōu)先級(jí)低

5. name 屬性

用于定位嵌入的 <iframe> 的名稱(chēng)，該名稱(chēng)可以用作 <a> 標(biāo)簽 與 <form> 標(biāo)簽的 target
屬性值，也可以用作 <input> 標(biāo)簽和 <button> 標(biāo)簽的 formtarget 屬性值，還可以用作
window.open() 方法的 windowName 參數(shù)值。

6. referrerpolicy 屬性

表示在獲取 iframe 資源時(shí)如何發(fā)送 referrer 首部：

• no-referrer: 不發(fā)送 Referer 首部。

• no-referrer-when-downgrade (default): 向不受 TLS (HTTPS) 保護(hù)的 origin 發(fā)送請(qǐng)求時(shí)，
  不發(fā)送 Referer 首部。

• origin: referrer 首部中僅包含來(lái)源頁(yè)面的源。換言之，僅包含來(lái)源頁(yè)面的 scheme, host, 以及
  port。

• origin-when-cross-origin: 發(fā)起跨域請(qǐng)求時(shí)，僅在 referrer 中包含來(lái)源頁(yè)面的源。發(fā)起同源
  請(qǐng)求時(shí)，仍然會(huì)在 referrer 中包含來(lái)源頁(yè)面在服務(wù)器上的路徑信息。

• same-origin: 對(duì)于 same origin （同源）請(qǐng)求，發(fā)送 referrer 首部，否則不發(fā)送。

• strict-origin: 僅當(dāng)被請(qǐng)求頁(yè)面和來(lái)源頁(yè)面具有相同的協(xié)議安全等級(jí)時(shí)才發(fā)送 referrer 首部
  （比如從采用 HTTPS 協(xié)議的頁(yè)面請(qǐng)求另一個(gè)采用 HTTPS 協(xié)議的頁(yè)面）。如果被請(qǐng)求頁(yè)面的協(xié)議安全
  等級(jí)較低，則不會(huì)發(fā)送 referrer 首部（比如從采用 HTTPS 協(xié)議的頁(yè)面請(qǐng)求采用 HTTP 協(xié)議的頁(yè)面）。

• strict-origin-when-cross-origin: 當(dāng)發(fā)起同源請(qǐng)求時(shí)，在 referrer 首部中包含完整的 URL。
  當(dāng)被請(qǐng)求頁(yè)面與來(lái)源頁(yè)面不同源但是有相同協(xié)議安全等級(jí)時(shí)（比如 HTTPS→HTTPS），在 referrer
  首部中僅包含來(lái)源頁(yè)面的源。當(dāng)被請(qǐng)求頁(yè)面的協(xié)議安全等級(jí)較低時(shí)（比如 HTTPS→HTTP），不發(fā)送 referrer 首部。

• unsafe-url: 始終在 referrer 首部中包含源以及路徑 （但不包括 fragment，密碼，或用戶(hù)名）。
  這個(gè)值是不安全的, 因?yàn)檫@樣做會(huì)暴露受 TLS 保護(hù)的資源的源和路徑信息。

7. sandbox 屬性

該屬性對(duì)呈現(xiàn)在 iframe 框架中的內(nèi)容啟用一些額外的限制條件。

屬性值可以為空字符串（這種情況下會(huì)啟用所有限制），也可以是用空格分隔的一系列指定的字符串。有效的值有：

• allow-downloads-without-user-activation : 允許在沒(méi)有征求用戶(hù)同意的情況下下載文件.
• allow-forms: 允許嵌入的瀏覽上下文提交表單。如果沒(méi)有使用該關(guān)鍵字，則無(wú)法提交表單。
• allow-modals: 允許嵌入的瀏覽上下文打開(kāi)模態(tài)窗口。
• allow-orientation-lock: 允許嵌入的瀏覽上下文鎖定屏幕方向（譯者注：比如智能手機(jī)、平板電腦的水平朝向或垂直朝向）。
• allow-pointer-lock: 允許嵌入的瀏覽上下文使用 Pointer Lock API.
• allow-popups: 允許彈窗 (例如 window.open, target="_blank", showModalDialog)。如果沒(méi)有使用該關(guān)鍵字，相應(yīng)的功能將自動(dòng)被禁用。
• allow-popups-to-escape-sandbox: 允許沙箱化的文檔打開(kāi)新窗口，并且新窗口不會(huì)繼承沙箱標(biāo)記。例如，安全地沙箱化一個(gè)廣告頁(yè)面，而不會(huì)在廣告鏈接到的新頁(yè)面中啟用相同的限制條件。
• allow-presentation: 允許嵌入的瀏覽上下文開(kāi)始一個(gè) presentation session。
• allow-same-origin: 如果沒(méi)有使用該關(guān)鍵字，嵌入的瀏覽上下文將被視為來(lái)自一個(gè)獨(dú)立的源，這將使 same-origin policy 同源檢查失敗。
• allow-scripts: 允許嵌入的瀏覽上下文運(yùn)行腳本（但不能創(chuàng)建彈窗）。如果沒(méi)有使用該關(guān)鍵字，就無(wú)法運(yùn)行腳本。
• allow-storage-access-by-user-activation : 允許嵌入的瀏覽上下文通過(guò) Storage Access API 使用父級(jí)瀏覽上下文的存儲(chǔ)功能。
• allow-top-navigation: 允許嵌入的瀏覽上下文導(dǎo)航（加載）內(nèi)容到頂級(jí)的瀏覽上下文。
• allow-top-navigation-by-user-activation: 允許嵌入的瀏覽上下文在經(jīng)過(guò)用戶(hù)允許后導(dǎo)航（加載）內(nèi)容到頂級(jí)的瀏覽上下文。

8. src 屬性

被嵌套的頁(yè)面的 URL 地址。使用 about:blank 值可以嵌入一個(gè)遵從同源策略的空白頁(yè)。

9. srcdoc 屬性

該屬性是一段 HTML 代碼，這些代碼會(huì)被渲染到 iframe 中。如果瀏覽器不支持 srcdoc 屬性，則會(huì)渲染 src 屬性表示的內(nèi)容。

<iframe
  src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
  title="iframe example 1"
  width="400"
  height="300"
>
  <p>Your browser does not support iframes.</p>
</iframe>