Tutorials 参考 练习 Menu
Paid Courses

HTML <iframe> Tag


Example

An inline frame is marked up as follows:

<iframe src="http://booksky.99lb.net" title="W3Schools Free Online Web Tutorials"></iframe>
来试试吧 »

More "来试试吧" examples below.


Definition and Usage

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Tip: Use CSS to style the <iframe> (see example below). 

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the <iframe> is.


Browser Support

Element
<iframe> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
allow   Specifies a feature policy for the <iframe>
allowfullscreen true
false
Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method
allowpaymentrequest true
false
Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API
height pixels Specifies the height of an <iframe>. Default height is 150 pixels
loading eager
lazy
Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met
name text Specifies the name of an <iframe>
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url
Specifies which referrer information to send when fetching the iframe
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Enables an extra set of restrictions for the content in an <iframe>
src URL Specifies the address of the document to embed in the <iframe>
srcdoc HTML_code Specifies the HTML content of the page to show in the <iframe>
width pixels Specifies the width of an <iframe>. Default width is 300 pixels


Global Attributes

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


Event Attributes

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


More 示例

Example

Add and remove iframe borders (with CSS):

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

<iframe src="#" width="100%" height="300" style="border:none;">
</iframe>
来试试吧 »

Related Pages

HTML tutorial: HTML iframe

HTML DOM reference: IFrame Object


Default CSS Settings

Most browsers will display the <iframe> element with the following default values:

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}





W3Schools is optimized for learning and training. 示例 might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.