<iframe>
The <iframe> element embeds another HTML page or document inside the current page. It is useful for isolated embeds, external content, and sandboxed previews.
Overview
The <iframe> element embeds another HTML page or document inside the current page. It is useful for isolated embeds, external content, and sandboxed previews.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML attribute | ||||||
height | 1 | 12 | 1 | 3 | 18 | 2 |
name | 1 | 12 | 1 | 3 | 18 | 2 |
src | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
width | 1 | 12 | 1 | 3 | 18 | 2 |
| DOM API | ||||||
| The HTMLIFrameElement interface provides special properties and methods (beyond those of the HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| If the iframe and the iframe's parent document are Same Origin, returns a Document (that is, the active document in the inline frame's nested browsing context), else returns null. | 1 | 12 | 1 | 3 | 18 | 1 |
| The contentWindow property returns the Window object of an HTMLIFrameElement. | 1 | 12 | 1 | 3 | 18 | 1 |
| The getSVGDocument() method of the HTMLIFrameElement interface returns the Document object of the embedded SVG. | 1 | 12 | 3.5 | 3.1 | 18 | 2 |
| The height property of the HTMLIFrameElement interface returns a string that reflects the height attribute of the iframe element, indicating the height of the frame in CSS pixels. | 1 | 12 | 1 | 3 | 18 | 1 |
| The name property of the HTMLIFrameElement interface is a string value that reflects the name attribute of the iframe element, indicating the specific name of the element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLIFrameElement.src A string that reflects the src HTML attribute, containing the address of the content to be embedded. | 1 | 12 | 1 | 3 | 18 | 1 |
| The width property of the HTMLIFrameElement interface returns a string that reflects the width attribute of the iframe element, indicating the width of the frame in CSS pixels. | 1 | 12 | 1 | 3 | 18 | 1 |
- The `resize` CSS property doesn't have any effect on this element due to bug 680823.
- Safari has a 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.
- Safari on iOS has a 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.
Syntax
<iframe src="https://example.com"
width="600" height="400"
title="外部コンテンツ"
loading="lazy"
sandbox="allow-scripts allow-same-origin">
</iframe>Live demo
Title attribute. heavymain
Iframe to is title attribute in content. Description provide(akseshiriti).
Use cases
Embedded tools
Host external widgets, maps, or previews that need a separate document context.
Sandboxed content
Isolate untrusted or separately managed content in its own browsing context.
Cautions
- Iframes can create keyboard, sizing, and loading complexity, especially when many are stacked on one page.
- Cross-origin embeds may limit styling, scripting, and direct interaction in ways that must be planned for explicitly.
Accessibility
- Give each iframe a clear title so users understand what embedded content they are entering before focus moves inside it.
Related links
Powered by web-features