The HTML <iframe> tag

Definition and Usage

<iframe> The tag defines an inline frame (inline frame).

Inline frames are used to embed another document within the current HTML document.

Tip:Please use CSS to set <iframe> styles (see the example below).

Tip:It is best to always use <iframe> Contains the title attribute. Screen readers can use this attribute to read information about <iframe> Description of content.

See also:

HTML Tutorial:HTML Iframe

HTML DOM Reference Manual:IFrame Object

Example

Example 1

The inline frame tag is as follows:

<iframe src="https://www.codew3c.com" title="CodeW3C.com Online Tutorial"></iframe>

Try It Yourself

Example 2

Add and remove the iframe border (using CSS):

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

Try It Yourself

Attribute

Attribute Value Description
Allow Specifies the functional policy of the <iframe>.
Allowfullscreen
  • True
  • False
 Set to true if the <iframe> can be activated in full-screen mode by calling the requestFullscreen() method.
Allowpaymentrequest
  • True
  • False
 Set to true if cross-origin <iframe> calls to the Payment Request API are allowed.
Height Pixels Specifies the height of the <iframe>. The default height is 150 pixels.
Loading
  • Eager
  • Lazy
 Specifies whether the browser should load the iframe immediately or defer loading until certain conditions are met.
Name Text Specifies the name of the <iframe>.
Referrerpolicy
  • No-referrer
  • No-referrer-when-downgrade
  • Origin
  • Origin-when-cross-origin
  • Same-origin
  • Strict-origin-when-cross-origin
  • Unsafe-url
 Specifies the referrer information to be sent when fetching the iframe.
Sandbox
  • Allow-forms
  • Allow-pointer-lock
  • Allow-popups
  • Allow-same-origin
  • Allow-scripts
  • Allow-top-navigation
 Enables a series of additional restrictions on the content within the <iframe>.
Src URL Specifies the URL of the document to be embedded within the <iframe>.
Srcdoc HTML Code Specifies the HTML content of the page to be displayed within the <iframe>.
Width Pixels Specifies the width of the <iframe>. The default width is 300 pixels.

Global Attribute

<iframe> The tag also supports Global Attributes in HTML.

event attributes

<iframe> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will use the following default values to display <iframe> Element:

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support