diff options
Diffstat (limited to 'devdocs/html/element%2Fiframe.html')
| -rw-r--r-- | devdocs/html/element%2Fiframe.html | 435 |
1 files changed, 435 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fiframe.html b/devdocs/html/element%2Fiframe.html new file mode 100644 index 00000000..fd1b435e --- /dev/null +++ b/devdocs/html/element%2Fiframe.html @@ -0,0 +1,435 @@ +<header><h1><iframe>: The Inline Frame element</h1></header><div class="section-content"><p>The <code><iframe></code> <a href="../index">HTML</a> element represents a nested <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context">browsing context</a>, embedding another HTML page into the current one.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/iframe.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Each embedded browsing context has its own <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document">document</a> and allows URL navigations. The navigations of each embedded browsing context are linearized into the <a href="https://developer.mozilla.org/en-US/docs/Web/API/History">session history</a> of the <em>topmost</em> browsing context. The browsing context that embeds the others is called the <em>parent browsing context</em>. The <em>topmost</em> browsing context — the one with no parent — is usually the browser window, represented by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window"><code>Window</code></a> object.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> Because each browsing context is a complete document environment, every <code><iframe></code> in a page requires increased memory and other computing resources. While theoretically you can use as many <code><iframe></code>s as you like, check for performance problems.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="allow"><a href="#allow"><code>allow</code></a></dt> <dd> <p>Specifies a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Permissions_Policy">Permissions Policy</a> for the <code><iframe></code>. The policy defines what features are available to the <code><iframe></code> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> A Permissions Policy specified by the <code>allow</code> attribute implements a further restriction on top of the policy specified in the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy"><code>Permissions-Policy</code></a> header. It doesn't replace it.</p> </div> </dd> <dt id="allowfullscreen"><a href="#allowfullscreen"><code>allowfullscreen</code></a></dt> <dd> <p>Set to <code>true</code> if the <code><iframe></code> can activate fullscreen mode by calling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen"><code>requestFullscreen()</code></a> method.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> This attribute is considered a legacy attribute and redefined as <code>allow="fullscreen"</code>.</p> </div> </dd> <dt id="allowpaymentrequest"> +<a href="#allowpaymentrequest"><code>allowpaymentrequest</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Set to <code>true</code> if a cross-origin <code><iframe></code> should be allowed to invoke the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a>.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> This attribute is considered a legacy attribute and redefined as <code>allow="payment"</code>.</p> </div> </dd> <dt id="credentialless"> +<a href="#credentialless"><code>credentialless</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Set to <code>true</code> to make the <code><iframe></code> credentialless, meaning that its content will be loaded in a new, ephemeral context. It doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy"><code>Cross-Origin-Embedder-Policy</code></a> (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/IFrame_credentialless">IFrame credentialless</a> for more details.</p> </dd> <dt id="csp"> +<a href="#csp"><code>csp</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>A <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> enforced for the embedded resource. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/csp"><code>HTMLIFrameElement.csp</code></a> for details.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>The height of the frame in CSS pixels. Default is <code>150</code>.</p> </dd> <dt id="loading"><a href="#loading"><code>loading</code></a></dt> <dd> <p>Indicates how the browser should load the iframe:</p> <ul> <li> +<code>eager</code>: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).</li> <li> +<code>lazy</code>: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.</li> </ul> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>A targetable name for the embedded browsing context. This can be used in the <code>target</code> attribute of the <a href="a"><code><a></code></a>, <a href="form"><code><form></code></a>, or <a href="base"><code><base></code></a> elements; the <code>formtarget</code> attribute of the <a href="input"><code><input></code></a> or <a href="button"><code><button></code></a> elements; or the <code>windowName</code> parameter in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/open"><code>window.open()</code></a> method.</p> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>Indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the frame's resource:</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: 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.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: 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).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): 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).</li> <li> +<code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> </ul> </dd> <dt id="sandbox"><a href="#sandbox"><code>sandbox</code></a></dt> <dd> <p>Controls the restrictions applied to the content embedded in the <code><iframe></code>. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:</p> <ul> <li> +<code>allow-downloads</code>: Allows downloading files through an <a href="a"><code><a></code></a> or <a href="area"><code><area></code></a> element with the <a href="a#download">download</a> attribute, as well as through the navigation that leads to a download of a file. This works regardless of whether the user clicked on the link, or JS code initiated it without user interaction.</li> <li> +<code>allow-downloads-without-user-activation</code> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr>: Allows for downloads to occur without a gesture from the user.</li> <li> +<code>allow-forms</code>: Allows the page to submit forms. If this keyword is not used, form will be displayed as normal, but submitting it will not trigger input validation, sending data to a web server or closing a dialog.</li> <li> +<code>allow-modals</code>: Allows the page to open modal windows by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert"><code>Window.alert()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm"><code>Window.confirm()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/print"><code>Window.print()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt"><code>Window.prompt()</code></a>, while opening a <a href="dialog"><code><dialog></code></a> is allowed regardless of this keyword. It also allows the page to receive <a href="https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a> event.</li> <li> +<code>allow-orientation-lock</code>: Lets the resource <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li> <li> +<code>allow-pointer-lock</code>: Allows the page to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a>.</li> <li> +<code>allow-popups</code>: Allows popups (like from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/open"><code>Window.open()</code></a>, <code>target="_blank"</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/showModalDialog"><code>Window.showModalDialog()</code></a>). If this keyword is not used, that functionality will silently fail.</li> <li> +<code>allow-popups-to-escape-sandbox</code>: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon the page the ad links to.</li> <li> +<code>allow-presentation</code>: Allows embedders to have control over whether an iframe can start a <a href="https://developer.mozilla.org/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li> <li> +<code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same-origin policy</a> (potentially preventing access to <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#cross-origin_data_storage_access">data storage/cookies</a> and some JavaScript APIs).</li> <li> +<code>allow-scripts</code>: Allows the page to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.</li> <li> +<code>allow-storage-access-by-user-activation</code> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr>: Allows a document loaded in the <code><iframe></code> to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a> to request access to unpartitioned cookies.</li> <li> +<code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li> <li> +<code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li> <li> +<code>allow-top-navigation-to-custom-protocols</code>: Allows navigations to non-<code>http</code> protocols built into browser or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">registered by a website</a>. This feature is also activated by <code>allow-popups</code> or <code>allow-top-navigation</code> keyword.</li> </ul> <div class="notecard note" id="sect5"> <p><strong>Note:</strong></p> <ul> <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li> <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li> </ul> </div> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#inherited_origins">same-origin policy</a>. Also note that programmatically removing an <code><iframe></code>'s src attribute (e.g. via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a>) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</p> </dd> <dt id="srcdoc"><a href="#srcdoc"><code>srcdoc</code></a></dt> <dd> <p>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>The width of the frame in CSS pixels. Default is <code>300</code>.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>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.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The alignment of this element with respect to the surrounding context.</p> </dd> <dt id="frameborder"> +<a href="#frameborder"><code>frameborder</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> to control <code><iframe></code> borders.</p> </dd> <dt id="longdesc"> +<a href="#longdesc"><code>longdesc</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</p> </dd> <dt id="marginheight"> +<a href="#marginheight"><code>marginheight</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The amount of space in pixels between the frame's content and its top and bottom borders.</p> </dd> <dt id="marginwidth"> +<a href="#marginwidth"><code>marginwidth</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The amount of space in pixels between the frame's content and its left and right borders.</p> </dd> <dt id="scrolling"> +<a href="#scrolling"><code>scrolling</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Indicates when the browser should provide a scrollbar for the frame:</p> <ul> <li> +<code>auto</code>: Only when the frame's content is larger than its dimensions.</li> <li> +<code>yes</code>: Always show a scrollbar.</li> <li> +<code>no</code>: Never show a scrollbar.</li> </ul> </dd> </dl> +</div> +<h2 id="scripting">Scripting</h2> +<div class="section-content"> +<p>Inline frames, like <a href="frame"><code><frame></code></a> elements, are included in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/frames"><code>window.frames</code></a> pseudo-array.</p> <p>With the DOM <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a> object, scripts can access the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window"><code>window</code></a> object of the framed resource via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow"><code>contentWindow</code></a> property. The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument"><code>contentDocument</code></a> property refers to the <code>document</code> inside the <code><iframe></code>, same as <code>contentWindow.document</code>.</p> <p>From the inside of a frame, a script can get a reference to its parent window with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/parent"><code>window.parent</code></a>.</p> <p>Script access to a frame's content is subject to the <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. Scripts cannot access most properties in other <code>window</code> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"><code>Window.postMessage()</code></a>.</p> +</div> +<h2 id="positioning_and_scaling">Positioning and scaling</h2> +<div class="section-content"><p>As a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a>, the position, alignment, and scaling of the embedded document within the <code><iframe></code> element's box, can be adjusted with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> properties.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="a_simple_iframe">A simple <iframe></h3> +<div class="section-content"> +<p>This example embeds the page at <a href="https://example.org" target="_blank">https://example.org</a> in an iframe.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1dYkOe7fKKNk0GCdsu5n/KZ8saQvnEli3HVS0rCRtJA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.org<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe Example 1<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="A simple iframe sample" id="frame_a_simple_iframe" width="640" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/iframe/runner.html?id=a_simple_iframe" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>People navigating with assistive technology such as a screen reader can use the <a href="../global_attributes/title"><code>title</code> attribute</a> on an <code><iframe></code> to label its content. The title's value should concisely describe the embedded content:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ja0X+4t4cPwx3xEKv5yE3Wu1Zl+f5YzxhlrFlNY5bw0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Wikipedia page for Avocados<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://en.wikipedia.org/wiki/Avocado<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Without this title, they have to navigate into the <code><iframe></code> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <code><iframe></code>s and/or if embeds contain interactive content like video or audio.</p> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts embedded content.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role"><code>document</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role"><code>img</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element">HTML Standard <br><small># the-iframe-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>iframe</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1</summary>The <code>resize</code> CSS property doesn't have any effect on this element due to <a href="https://bugzil.la/680823">bug 680823</a>.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤15</td> +<td class="bc-supports-yes"><details><summary>≤4</summary>Safari has a <a href="https://www.quirksmode.org/bugreports/archives/2005/02/hidden_iframes.html">bug</a> that prevents iframes from loading if the <code>iframe</code> element was hidden when added to the page. <code>iframeElement.src = iframeElement.src</code> should cause it to load the iframe.</details></td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>The <code>resize</code> CSS property doesn't have any effect on this element due to <a href="https://bugzil.la/680823">bug 680823</a>.</details></td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes"><details><summary>≤3.2</summary>Safari has a <a href="https://www.quirksmode.org/bugreports/archives/2005/02/hidden_iframes.html">bug</a> that prevents iframes from loading if the <code>iframe</code> element was hidden when added to the page. <code>iframeElement.src = iframeElement.src</code> should cause it to load the iframe.</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>allow</code></th> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">74</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">44</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">8.0</td> +</tr> +<tr> +<th><code>allowfullscreen</code></th> +<td class="bc-supports-yes">3817–38</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">189–18</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">2515–25</td> +<td class="bc-supports-yes">10.15.1</td> +<td class="bc-supports-yes">384.4–38</td> +<td class="bc-supports-yes">3818–38</td> +<td class="bc-supports-yes">189–18</td> +<td class="bc-supports-yes">2514–25</td> +<td class="bc-supports-yes"><details><summary>12</summary>Only available on iPad, not on iPhone.</details></td> +<td class="bc-supports-yes">3.01.0–3.0</td> +</tr> +<tr> +<th><code>allowpaymentrequest</code></th> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">56–83</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">56–83</td> +<td class="bc-supports-yes">44</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">8.0</td> +</tr> +<tr> +<th><code>credentialless</code></th> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">96</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">74</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21.0</td> +</tr> +<tr> +<th><code>external_protocol_urls_blocked</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>frameborder</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>height</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>loading</code></th> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">64</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">55</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">12.0</td> +</tr> +<tr> +<th><code>longdesc</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>marginheight</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>marginwidth</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>sandbox</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>scrolling</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>src</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>srcdoc</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>width</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">CSP: frame-ancestors</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe</a> + </p> +</div> |