HTML 内联框架元素 (
<iframe>
)
表示嵌套
浏览上下文
,将另一 HTML 页面嵌入当前页面。
Each embedded browsing context has its own
会话历史
and
document
. The browsing context that embeds the others is called the
parent
浏览上下文
。
topmost
browsing context — the one with no parent — is usually the browser window, represented by the
Window
对象。
Because each browsing context is a complete document environment, every
<iframe>
in a page requires increased memory and other computing resources. While theoretically you can use as many
<iframe>
s as you like, check for performance problems.
| 内容类别 | 流内容 , 措词内容 , embedded content, interactive content, palpable content. |
|---|---|
| 准许内容 | None. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts embedded content. |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
application
,
document
,
img
,
none
,
presentation
|
| DOM 接口 |
HTMLIFrameElement
|
此元素包括 全局属性 .
allow
<iframe>
. The policy defines what features are available to the
<iframe>
based on the origin of the request (e.g. access to the microphone, camera, battery, web-share API, etc.).
allowfullscreen
true
若
<iframe>
can activate fullscreen mode by calling the
requestFullscreen()
方法。
allow="fullscreen"
.
allowpaymentrequest
true
if a cross-origin
<iframe>
should be allowed to invoke the
支付请求 API
.
allow="payment"
.
csp
HTMLIFrameElement.csp
了解细节。
height
150
.
loading
eager
: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
lazy
: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
名称
target
属性在
<a>
,
<form>
,或
<base>
elements; the
formtarget
属性在
<input>
or
<button>
elements; or the
windowName
parameter in the
window.open()
方法。
referrerpolicy
no-referrer
:
Referer
header will not be sent.
no-referrer-when-downgrade
(default): The
Referer
header will not be sent to
origin
s without
TLS
(
HTTPS
).
origin
: The sent referrer will be limited to the origin of the referring page: its
scheme
,
host
,和
port
.
origin-when-cross-origin
: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
same-origin
: A referrer will be sent for
same origin
, but cross-origin requests will contain no referrer information.
strict-origin
: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
strict-origin-when-cross-origin
: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
unsafe-url
: The referrer will include the origin
and
the path (but not the
fragment
,
password
,或
username
).
This value is unsafe
, because it leaks origins and paths from TLS-protected resources to insecure origins.
sandbox
allow-downloads-without-user-activation
: Allows for downloads to occur without a gesture from the user.
allow-downloads
: Allows for downloads to occur with a gesture from the user.
allow-forms
: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.
allow-modals
: Lets the resource
open modal windows
.
allow-orientation-lock
: Lets the resource
lock the screen orientation
.
allow-pointer-lock
: Lets the resource use the
指针锁 API
.
allow-popups
: Allows popups (such as
window.open()
,
target="_blank"
,或
showModalDialog()
). If this keyword is not used, the popup will silently fail to open.
allow-popups-to-escape-sandbox
: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.
allow-presentation
: Lets the resource start a
presentation session
.
allow-same-origin
: If this token is not used, the resource is treated as being from a special origin that always fails the
same-origin policy
.
allow-scripts
: Lets the resource run scripts (but not create popup windows).
allow-storage-access-by-user-activation
: Lets the resource request access to the parent's storage capabilities with the
存储访问 API
.
allow-top-navigation
: Lets the resource navigate the top-level browsing context (the one named
_top
).
allow-top-navigation-by-user-activation
: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.
allow-scripts
and
allow-same-origin
, as that lets the embedded document remove the
sandbox
attribute — making it no more secure than not using the
sandbox
attribute at all.
iframe
— such as if the viewer opens the frame in a new tab. Such content should be also served from a
separate origin
to limit potential damage.
sandbox
attribute is unsupported in Internet Explorer 9 and earlier.
src
about:blank
to embed an empty page that conforms to the
same-origin policy
. Also note that programatically removing an
<iframe>
's src attribute (e.g. via
Element.removeAttribute()
) causes
about:blank
to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.
srcdoc
src
attribute. If a browser does not support the
srcdoc
attribute, it will fall back to the URL in the
src
属性。
width
300
.
These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.
align
The alignment of this element with respect to the surrounding context.
frameborder
1
(the default) draws a border around this frame. The value
0
removes the border around this frame, but you should instead use the CSS property
border
to control
<iframe>
borders.
longdesc
A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.
marginheight
The amount of space in pixels between the frame's content and its top and bottom borders.
marginwidth
The amount of space in pixels between the frame's content and its left and right borders.
scrolling
auto
: Only when the frame's content is larger than its dimensions.
yes
: Always show a scrollbar.
no
: Never show a scrollbar.
mozbrowser
<iframe>
act like a top-level browser window. See
Browser API
了解细节。
Inline frames, like
<frame>
elements, are included in the
window.frames
pseudo-array.
With the DOM
HTMLIFrameElement
object, scripts can access the
window
object of the framed resource via the
contentWindow
property. The
contentDocument
property refers to the
document
在
<iframe>
,如同
contentWindow.document
.
From the inside of a frame, a script can get a reference to its parent window with
window.parent
.
Script access to a frame's content is subject to the
same-origin policy
. Scripts cannot access most properties in other
window
objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using
Window.postMessage()
.
由于
replaced element
, the position, alignment, and scaling of the embedded document within the
<iframe>
element's box, can be adjusted with the
object-position
and
object-fit
特性。
An
<iframe>
in action. After creating the frame, when the user clicks a button, its title is displayed in an alert.
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
title="iframe Example 1" width="400" height="300">
</iframe>
People navigating with assistive technology such as a screen reader can use the
title
属性
在
<iframe>
to label its content. The title's value should concisely describe the embedded content:
<iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe>
Without this title, they have to navigate into the
<iframe>
to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple
<iframe>
s and/or if embeds contain interactive content like video or audio.
| 规范 | 状态 | 注释 |
|---|---|---|
|
Referrer Policy
The definition of 'referrerpolicy attribute' in that specification. |
候选推荐 |
添加
referrerpolicy
属性。
|
|
HTML 实时标准
The definition of '<iframe>' in that specification. |
实时标准 | |
|
HTML5
The definition of '<iframe>' in that specification. |
推荐 | |
|
HTML 4.01 Specification
The definition of '<iframe>' in that specification. |
推荐 | |
| Screen Orientation API | 工作草案 |
添加
allow-orientation-lock
到
sandbox
属性。
|
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
iframe
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
Yes
注意事项
|
IE 完整支持 Yes | Opera 完整支持 Yes |
Safari
完整支持
Yes
注意事项
|
WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes |
Firefox Android
完整支持
Yes
注意事项
|
Opera Android 完整支持 Yes |
Safari iOS
完整支持
Yes
注意事项
|
Samsung Internet Android 完整支持 Yes |
align
弃用
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
allow
实验性
|
Chrome 完整支持 60 | Edge 完整支持 79 | Firefox 完整支持 74 | IE 不支持 No | Opera 完整支持 47 | Safari 完整支持 11.1 | WebView Android 完整支持 60 | Chrome Android 完整支持 60 | Firefox Android 不支持 No | Opera Android 完整支持 44 | Safari iOS 完整支持 11.3 | Samsung Internet Android 完整支持 8.0 |
allowfullscreen
|
Chrome
完整支持
27
|
Edge
完整支持
≤79
|
Firefox
完整支持
18
|
IE
完整支持
11
Prefixed
|
Opera
完整支持
≤15
|
Safari
完整支持
7
|
WebView Android
完整支持
37
|
Chrome Android
完整支持
27
|
Firefox Android
完整支持
18
|
Opera Android
完整支持
≤14
|
Safari iOS
完整支持
7
|
Samsung Internet Android
完整支持
1.5
|
allowpaymentrequest
实验性
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
Aspect ratio computed from
width
and
height
属性
|
Chrome 完整支持 79 | Edge 完整支持 79 |
Firefox
完整支持
71
|
IE 不支持 No | Opera 完整支持 66 | Safari 完整支持 14 | WebView Android 完整支持 79 | Chrome Android 完整支持 79 | Firefox Android 完整支持 79 | Opera Android 完整支持 57 | Safari iOS 完整支持 14 | Samsung Internet Android 完整支持 12.0 |
| External protocol URLs blocked 弃用 | Chrome ? | Edge ? | Firefox 完整支持 67 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android 完整支持 67 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
frameborder
弃用
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
height
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
loading
实验性
|
Chrome 完整支持 76 | Edge 完整支持 79 | Firefox 不支持 No | IE 不支持 No | Opera 完整支持 63 |
Safari
不支持
No
注意事项
|
WebView Android 不支持 No | Chrome Android 完整支持 76 | Firefox Android 不支持 No | Opera Android 完整支持 54 |
Safari iOS
不支持
No
注意事项
|
Samsung Internet Android 不支持 No |
longdesc
弃用
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
marginheight
弃用
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
marginwidth
弃用
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
名称
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
referrerpolicy
|
Chrome 完整支持 51 | Edge 完整支持 79 | Firefox 完整支持 50 | IE 不支持 No | Opera 完整支持 38 | Safari 完整支持 11.1 | WebView Android 完整支持 51 | Chrome Android 完整支持 51 | Firefox Android 完整支持 50 | Opera Android 完整支持 41 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 7.2 |
sandbox
|
Chrome 完整支持 4 | Edge 完整支持 12 | Firefox 完整支持 17 | IE 完整支持 10 | Opera 完整支持 15 | Safari 完整支持 5 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 17 | Opera Android ? | Safari iOS 完整支持 4.2 | Samsung Internet Android 完整支持 Yes |
sandbox="allow-downloads"
|
Chrome 完整支持 83 | Edge 完整支持 83 | Firefox 完整支持 82 | IE 不支持 No | Opera ? | Safari 不支持 No | WebView Android 完整支持 83 | Chrome Android 完整支持 83 | Firefox Android 完整支持 82 | Opera Android ? | Safari iOS 不支持 No | Samsung Internet Android ? |
sandbox="allow-modals"
|
Chrome ? | Edge ? | Firefox 完整支持 49 | IE 不支持 No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android 完整支持 49 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
sandbox="allow-popups"
|
Chrome 完整支持 Yes | Edge 完整支持 ≤18 | Firefox 完整支持 28 | IE ? | Opera 完整支持 Yes | Safari ? | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 27 | Opera Android ? | Safari iOS ? | Samsung Internet Android 完整支持 Yes |
sandbox="allow-popups-to-escape-sandbox"
|
Chrome 完整支持 46 | Edge 完整支持 79 | Firefox 完整支持 49 | IE 不支持 No | Opera 完整支持 32 | Safari ? | WebView Android 完整支持 46 | Chrome Android 完整支持 46 | Firefox Android 完整支持 49 | Opera Android 完整支持 32 | Safari iOS ? | Samsung Internet Android 完整支持 5.0 |
sandbox="allow-presentation"
|
Chrome 完整支持 53 | Edge 完整支持 79 | Firefox 完整支持 50 | IE 不支持 No | Opera 完整支持 40 | Safari ? | WebView Android 不支持 No | Chrome Android 完整支持 53 | Firefox Android 完整支持 50 | Opera Android 完整支持 41 | Safari iOS ? | Samsung Internet Android 完整支持 6.0 |
sandbox="allow-storage-access-by-user-activation"
实验性
非标
|
Chrome 不支持 No | Edge 不支持 No |
Firefox
完整支持
65
Disabled
|
IE 不支持 No | Opera 不支持 No | Safari 完整支持 11.1 | WebView Android 不支持 No | Chrome Android 不支持 No |
Firefox Android
完整支持
65
Disabled
|
Opera Android 不支持 No | Safari iOS 完整支持 11.3 | Samsung Internet Android 不支持 No |
sandbox="allow-top-navigation-by-user-activation"
|
Chrome 完整支持 58 | Edge 完整支持 79 | Firefox 完整支持 79 | IE 不支持 No | Opera 完整支持 45 |
Safari
完整支持
11.1
注意事项
|
WebView Android 完整支持 58 | Chrome Android 完整支持 58 | Firefox Android 完整支持 79 | Opera Android 完整支持 43 | Safari iOS ? | Samsung Internet Android 完整支持 7.0 |
scrolling
弃用
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
src
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
srcdoc
|
Chrome 完整支持 20 | Edge 完整支持 79 | Firefox 完整支持 25 | IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 6 | WebView Android 完整支持 37 | Chrome Android 完整支持 25 | Firefox Android 完整支持 25 | Opera Android ? | Safari iOS ? | Samsung Internet Android 完整支持 1.5 |
width
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。