?
This document uses PHP Chinese website manual Release
HTML內(nèi)聯(lián)框架元素 <iframe>表示嵌套的瀏覽上下文，有效地將另一個(gè)HTML頁面嵌入到當(dāng)前頁面中。在HTML 4.01中，文檔可能包含頭部和正文，或頭部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文檔主體中使用。每個(gè)瀏覽上下文都有自己的會(huì)話歷史記錄和活動(dòng)文檔。包含嵌入內(nèi)容的瀏覽上下文稱為父瀏覽上下文。頂級瀏覽上下文（沒有父級）通常是瀏覽器窗口。
內(nèi)容類別 | 流內(nèi)容，短語內(nèi)容，嵌入式內(nèi)容，互動(dòng)內(nèi)容，可觸及的內(nèi)容。 |
|---|---|
允許的內(nèi)容 | 特別看散文 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許的父母 | 任何接受嵌入內(nèi)容的元素。 |
允許ARIA角色 | 應(yīng)用程序，文件，img |
DOM界面 | HTMLIFrameElement |
屬性
該元素包含全局屬性。
align已廢棄HTML4.01,已廢棄HTML5在包含此元素的上下文環(huán)境中的對齊方式frameborderHTML 4only取值為1時(shí)（默認(rèn)值），告訴瀏覽器在當(dāng)前iframe與其他iframe之間繪制邊框，取0時(shí)則無需繪制此邊框。
height以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。
longdescHTML 4only指向frame詳細(xì)描述的URI（統(tǒng)一資源標(biāo)識(shí)符），因?yàn)閺V泛亂用，該屬性在非視覺瀏覽器中沒什么作用。
marginheightHTML 4only框架內(nèi)容到框架的上下邊距，以像素格式表示。
marginwidthHTML 4only框架內(nèi)容到框架的左右邊距，以像素格式表示。
mozallowfullscreen使用allowfullscreen屬性代替。在Gecko9.9及更高版本上，如果允許通過調(diào)用element.mozRequestFullScreen()方法，設(shè)置frame為全屏模式，該屬性被設(shè)置為true。如果該屬性未被設(shè)置，iframe元素不能被設(shè)置為全屏模式。
webkitallowfullscreen使用 allowfullscreen 屬性代替。在Chrome 17及更高版本上（或者更早），如果允許通過調(diào)用element.webkitRequestFullScreen()方法，設(shè)置iframe為全屏模式，該屬性被設(shè)置為true，如果該屬性未被設(shè)置，iframe元素不能被設(shè)置為全屏模式。
mozapp只有在火狐 OSFor 框架托管 anopen web 應(yīng)用程序, 這指定了 app 的 URL。這樣可以確保使用正確的權(quán)限加載應(yīng)用程序。查看瀏覽器 API 尋找詳細(xì)信息。
mozbrowser只有在火狐 OSIndicates, 框架是出現(xiàn)像一個(gè)頂層瀏覽器窗口的嵌入內(nèi)容。這意味著窗口. 頂部, 窗口. frameElement 等將不反映框架層次結(jié)構(gòu)。這使得 web 瀏覽器 UI 可以完全使用 web 技術(shù)實(shí)現(xiàn), 并賦予了正確的權(quán)限。有關(guān)詳細(xì)信息, 請參閱使用瀏覽器 API?？稍诒诨?3.0 和更高版本。
name嵌入的瀏覽上下文（框架）的名稱。該名稱可以用作<a>標(biāo)簽，<form>標(biāo)簽的target屬性值，或<input>標(biāo)簽和<button>標(biāo)簽的formtaget屬性值。
remote只有 Firefox 上的 OSLoad 在一個(gè)單獨(dú)的內(nèi)容過程中提供了框架的頁面。
referrerpolicy一個(gè)字符串,指示在獲取資源時(shí)要使用的引用:
"no-referrer"這意味著Referer:頭不會(huì)被發(fā)送。
“
no-referrer-when-downgrade”表示Referer:當(dāng)導(dǎo)航到?jīng)]有TLS（HTTPS）的原點(diǎn)時(shí)，不會(huì)發(fā)送標(biāo)題。如果沒有另外指定策略，這是用戶代理的默認(rèn)行為。
"origin"這意味著引用者將成為頁面的來源，即大致的方案，主機(jī)和端口。
"origin-when-cross-origin"這意味著對其他出發(fā)地的導(dǎo)航將僅限于該方案，主機(jī)和端口，同一來源的導(dǎo)航將包括引用者的路徑。
"unsafe-url"這意味著引用者將包括來源和路徑（但不包括片段，密碼或用戶名）。這種情況是不安全的，因?yàn)樗梢詫碜訲LS保護(hù)的資源的起點(diǎn)和路徑泄漏到不安全的起點(diǎn)。
scrollingHTML4 僅枚舉屬性,指示瀏覽器應(yīng)為框架提供滾動(dòng)條(或其他滾動(dòng)設(shè)備)的時(shí)間:
auto: 只在需要時(shí)設(shè)置
yes: 總有滾動(dòng)條
no: 沒有滾動(dòng)條
sandboxHTML5only如果指定了空字符串，該屬性對呈現(xiàn)在iframe框架中的內(nèi)容啟用一些額外的限制條件。屬性值可以是用空格分隔的一系列指定的字符串。有效的值有：
allow-forms: 允許嵌入的瀏覽上下文可以提交表單。如果該關(guān)鍵字未使用，該操作將不可用。
allow-modals: 允許內(nèi)嵌瀏覽環(huán)境打開模態(tài)窗口。
allow-orientation-lock: 允許內(nèi)嵌瀏覽環(huán)境禁用屏幕朝向鎖定（譯者注：比如智能手機(jī)、平板電腦的水平朝向或垂直朝向）。
allow-pointer-lock: 允許內(nèi)嵌瀏覽環(huán)境使用 Pointer Lock API.
allow-popups: 允許彈窗 (類似window.open, target="_blank",showModalDialog)。如果沒有設(shè)置該屬性，相應(yīng)的功能將靜默失效。
allow-popups-to-escape-sandbox: 允許沙箱文檔打開新窗口，并且不強(qiáng)制要求新窗口設(shè)置沙箱標(biāo)記。例如，這將允許一個(gè)第三方的沙箱環(huán)境運(yùn)行廣告開啟一個(gè)登陸頁面，新頁面不強(qiáng)制受到沙箱相關(guān)限制。
allow-presentation: 允許嵌入者控制是否iframe啟用一個(gè)展示會(huì)話。
allow-same-origin: 允許將內(nèi)容作為普通來源對待。如果未使用該關(guān)鍵字，嵌入的內(nèi)容將被視為一個(gè)獨(dú)立的源。
allow-scripts: 允許嵌入的瀏覽上下文運(yùn)行腳本（但不能window創(chuàng)建彈窗）。如果該關(guān)鍵字未使用，這項(xiàng)操作不可用。
allow-top-navigation:嵌入的頁面的上下文可以導(dǎo)航（加載）內(nèi)容到頂級的瀏覽上下文環(huán)境（browsing context）。如果未使用該關(guān)鍵字，這個(gè)操作將不可用。
allow-top-navigation-by-user-activation：允許嵌入式瀏覽上下文僅在由用戶手勢啟動(dòng)時(shí)將內(nèi)容導(dǎo)航（加載）到頂層瀏覽上下文。如果不使用該關(guān)鍵字，則不允許該操作。
注意:
當(dāng)被嵌入的文檔與主頁面同源時(shí)，強(qiáng)烈建議不要同時(shí)使用
allow-scripts和allow-same-origin，否則的話將允許嵌入的文檔通過代碼刪除sandbox屬性。雖然你可以這么做，但是這樣的話其安全性還不如不用sandbox。
如果攻擊者可以將潛在的惡意內(nèi)容往用戶的已沙箱化的iframe中顯示，那么沙箱操作的安全性將不再可靠。推薦把這種內(nèi)容放置到獨(dú)立的專用域中，減小可能的損失。
沙箱屬性(sandbox)在Internet Explorer 9及更早的版本上不被支持
src嵌套頁面的URL地址。使用遵守同源策略的 'about:blank' 來嵌套空白頁。
srcdocHTML5only該屬性值可以是HTML代碼，這些代碼會(huì)被渲染到iframe中，如果同時(shí)指定了src屬性，srcdoc會(huì)覆蓋src所指向的頁面。該屬性最好能與sandbox和seamless屬性一起使用。
width以CSS像素格式HTML5，或以像素格式HTML 4.01，或以百分比格式指定frame的寬度。
腳本
內(nèi)聯(lián)的框架，就像 <frame> 元素一樣，會(huì)加入 window.frames 偽數(shù)組（類數(shù)組的對象）中。
通過contentWindow屬性，腳本可以訪問iframe元素所包含的HTML頁面的window對象。contentDocument屬性則引用了iframe中的文檔元素（等同于使用contentWindow.document），但I(xiàn)E8-不支持。
通過訪問window.parent，腳本可以從框架中引用它的父框架的window。
腳本試圖訪問的框架內(nèi)容必須遵守同源策略，并且無法訪問非同源的window對象的幾乎所有屬性。同源策略同樣適用于子窗體訪問父窗體的window對象。跨域通信可以通過window.postMessage來實(shí)現(xiàn)。
示例
有一些例子來展示如何操作<iframe>
<iframe>簡單示例
這是一個(gè)<iframe>的基本例子。在創(chuàng)建框架之后，當(dāng)用戶點(diǎn)擊一個(gè)按鈕時(shí)，其標(biāo)題被檢索并顯示在警報(bào)中。
HTML
<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>
輸出結(jié)果
<iframe>在另一個(gè)標(biāo)簽中打開鏈接
在這個(gè)例子中，Google地圖顯示在一個(gè)框架中;
HTML
<base target="_blank"><iframe id="Example2" title="Example2" width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"></iframe><br><small> <a href="https://maps.google.com/maps?f=q&source=embed&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a></small>
返回值
注意事項(xiàng)
從Gecko 6.0開始，內(nèi)聯(lián)框架的渲染在使用四舍五入時(shí)正確地尊重了包含它們的元素的邊界border-radius。
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
引用者策略該規(guī)范中“引用策略屬性”的定義。 | 編輯草稿 | 增加了referrerpolicy屬性。 |
HTML生活標(biāo)準(zhǔn)該規(guī)范中'<iframe>的定義。 | 生活水平 | |
HTML5該規(guī)范中'<iframe>'的定義。 | 建議 | |
HTML 4.01規(guī)范該規(guī)范中'<iframe>'的定義。 | 建議 | |
屏幕定位API | 工作草案 | 向sandbox屬性添加allow-orientation-lock。 |
演示文稿在該規(guī)范中定義了“允許演示文稿”。 | 候選推薦 | 將允許演示添加到沙箱屬性 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 1 | (Yes) | (Yes)1 | (Yes) | (Yes) | (Yes)2 |
align | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
allowfullscreen | 27 17 webkit | (Yes) | 18 9 moz | 11 ms | (Yes) | 7 (Yes) webkit |
allowpaymentrequest | No | No | No | No | No | No |
frameborder | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
height | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
longdesc | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
marginheight | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
marginwidth | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
name | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
referrerpolicy | 51 | No | 50 | No | ? | ? |
scrolling | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
sandbox | 4 | (Yes) | 17 | 10 | 15 | 5 |
src | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
srcdoc | 20 | No | 25 | No | 15 | 6 |
width | 1 | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | (Yes)1 | (Yes) | (Yes) | (Yes)2 |
align | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
allowfullscreen | ? | ? | (Yes) | 18 9 moz | No | No | 7 (Yes) webkit |
allowpaymentrequest | No | No | No | No | No | No | No |
frameborder | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
height | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
longdesc | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
marginheight | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
marginwidth | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
name | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
referrerpolicy | 51 | 51 | No | 50 | No | ? | ? |
scrolling | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
sandbox | (Yes) | (Yes) | (Yes) | 17 | 10 | ? | 4.2 |
src | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
srcdoc | ? | ? | No | 25 | No | ? | ? |
width | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |