HTML - <iframe>
The HTML Inline Frame Element (<iframe>
) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head
and a body
or a head
and a frameset
, but not both a body
and a frameset
. However, an <iframe>
can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.
Examples
Example1
Here are a few examples demonstrating the use of the <iframe>
element.
A simple <iframe>
This is a basic example of an <iframe>
in action. After creating the frame, when the user clicks a button, its title is retrieved and displayed in an alert.
HTML
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"> <p>Your browser does not support iframes.</p> </iframe>
Result
Open a link in an <iframe> in another tab
In this example, a Google map is displayed in a frame;
HTML
<base target="_blank"> <iframe id="Example2" name="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>
Result
Result
Description
The HTML Inline Frame Element (<iframe>
) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head
and a body
or a head
and a frameset
, but not both a body
and a frameset
. However, an <iframe>
can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.
Content categories | Flow content, phrasing content, embedded content, interactive content, palpable content. |
---|---|
Permitted content | Special, see prose |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parent elements | Any element that accepts embedded content. |
DOM interface | HTMLIFrameElement |
Attributes
Includes the Global Attributes.
Name | Version | Description |
---|---|---|
align |
The alignment of this element with respect to the surrounding context. | |
allowfullscreen |
This attribute can be set to true if the frame is allowed to be placed into full screen mode by calling its Element.requestFullScreen() method. If this isn't set, the element can't be placed into full screen mode. |
|
frameborder |
HTML 4 | The value 1 (the default) tells the browser to draw a border between this frame and every other frame. The value 0 tells the browser not to draw a border between this frame and other frames. |
height |
Indicates the height of the frame HTML5 in CSS pixels, or HTML 4.01 in pixels or as a percentage. | |
longdesc |
HTML 4 | A URI of a long description of the frame. Due to widespread misuse, this is not helpful for non-visual browsers. |
marginheight |
HTML 4 | The amount of space in pixels between the frame's content and its top and bottom margins. |
marginwidth |
HTML 4 | The amount of space in pixels between the frame's content and its left and right margins. |
mozallowfullscreen |
Use allowfullscreen instead. In Gecko 9.0 or later, this attribute can be set to true if the frame is allowed to be placed into full screen mode by calling its element.mozRequestFullScreen() method. If this isn't set, the element can't be placed into full screen mode. |
|
webkitallowfullscreen |
Use allowfullscreen instead. In Chrome 17 or later (and maybe earlier), this attribute can be set to true if the frame is allowed to be placed into full screen mode by calling its element.webkitRequestFullScreen() method. If this isn't set, the element can't be placed into full screen mode. |
|
mozapp |
For frames hosting an open web app, this specifies the URL of the app manifest. This ensures that the app is loaded with the right permissions. See Using the Browser API for details. Available in Gecko 13.0 and later. | |
mozbrowser |
Indicates that the frame is to appear like a top-level browser window to the embedded content. This means that window.top , window.parent , window.frameElement , etc. will not reflect the frame hierarchy. This allows for a web browser UI to be implemented entirely with web technology, given the right permissions. See Using the Browser API for details. Available in Gecko 13.0 and later. |
|
name |
A name for the embedded browsing context (or frame). This can be used as the value of the target attribute of an <a> or <form> element, or the formtarget attribute of an <input> or <button> element. |
|
referrerpolicy |
A string indicating which referrer to use when fetching the resource:
|
|
remote |
Load the frame's page in a separate content process. | |
scrolling |
HTML 4 | Enumerated attribute indicating when the browser should provide a scroll bar (or other scrolling device) for the frame:
|
sandbox |
HTML5 | If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are:
Note:
|
src |
The URL of the page to embed. | |
srcdoc |
HTML5 | The content of the page that the embedded context is to contain. This attribute is expected to generally be used together with the sandbox attribute. If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present). Note that if the content of the attribute contains a script tag then a closing script tag is required for the script to run, even if nothing else comes after the script. |
width |
Indicates the width of the frame HTML5 in CSS pixels, or HTML 4.01 in pixels or as a percentage. |
Browser Compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | (Yes)[2] | (Yes) | (Yes) | (Yes)[3] |
sandbox |
4.0 | (Yes) | 17.0 (17.0) | 10 | 15 | 5 |
srcdoc |
20.0 | No support | 25.0 (25.0) | No support | 15 | 6 |
allowfullscreen |
17.0 webkit 27.0 |
(Yes) | 9.0 (9.0) moz 18.0 (18.0) |
11 ms |
(Yes) | (Yes) webkit 7 |
sandbox="allow-popups" |
? | (Yes) | 27.0 (27.0) | ? | ? | ? |
sandbox="allow-popups-to-escape-sandbox" |
46.0 | No support | 49.0 (49.0) | ? | 32 | ? |
sandbox="allow-modals" |
? | ? | 49.0 (49.0) | ? | ? | ? |
referrerpolicy |
51.0 | No support | 42.0 (42.0) [1] | ? | ? | ? |
sandbox="allow-presentation" |
53.0 | ? | ? | ? |
40 |
? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | (Yes) |
(Yes) |
(Yes)[2] | (Yes) | (Yes) | (Yes) |
(Yes) |
sandbox |
2.2 |
(Yes) |
17.0 (17.0) | 10 | No support | 4.2 |
(Yes) |
srcdoc |
? | ? | 25.0 (25.0) | No support | ? | ? | ? |
allowfullscreen |
? | ? | 9.0 (9.0) moz 18.0 (18.0) |
No support | No support | (Yes) webkit 7 |
? |
sandbox="allow-popups" |
? | ? | 27.0 (27.0) | ? | ? | ? | ? |
sandbox="allow-popups-to-escape-sandbox" |
No support | 46 | 49.0 (49.0) | ? | 32 | ? | 46.0 |
sandbox="allow-modals" |
? | ? | 49.0 (49.0) | ? | ? | ? | ? |
referrerpolicy |
No support | 51.0 | ? | ? | ? | ? | 51.0 |
sandbox="allow-presentation" |
No support | No support | ? | ? |
40 |
? | 53.0 |
[1] Implemented as referrer
and behind the flag network.http.enablePerElementReferrer
. Renamed to referrerpolicy
in Firefox 45.
[2] The resize
CSS property doesn't have any effect on this element due to bug 680823.
[3] Safari has a well-known bug that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.
Notes
Starting in Gecko 6.0, rendering of inline frames correctly respects the borders of their containing element when they're rounded using border-radius
.
Specifications
Specification | Status | Comment |
---|---|---|
Referrer Policy The definition of 'referrerpolicy attribute' in that specification. |
Working Draft | Added the referrerpolicy attribute. |
WHATWG HTML Living Standard The definition of '<iframe>' in that specification. |
Living Standard | |
HTML5 The definition of '<iframe>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<iframe>' in that specification. |
Recommendation | |
Screen Orientation API | Working Draft | Adds allow-orientation-lock to the sandbox attribute. |
Presentation API The definition of 'allow-presentation' in that specification. |
Editor's Draft | Adds allow-presentation to the sandbox attribute |
Scripting
Inline frames, like <frame>
elements, enter the window.frames
pseudo-array.
From the DOM iframe
element, scripts can get access to the window
object of the included HTML page via the contentWindow
property. The contentDocument
property refers to the document element inside the iframe
(this is equivalent to contentWindow.document
), but is not supported by Internet Explorer versions before IE8.
From the inside of a frame, a script can get a reference to the parent window via Window.parent
.
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with Window.postMessage()
.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/iframe