HTML <iframe> tag

Definitie en gebruik

<iframe> De tag definieert een inline frame (inline frame).

inline frames worden gebruikt om een andere document in het huidige HTML-document in te voegen.

Tip:Gebruik CSS om <iframe> stijl te definiëren (zie het voorbeeld hieronder).

Tip:Het is altijd het beste om <iframe> Bevat de title eigenschap. Schermlezers kunnen deze eigenschap gebruiken om over <iframe> Beschrijving van de inhoud.

Zie ook:

HTML Tutorial:HTML Iframe

HTML DOM Referentie Handboek:IFrame object

Voorbeeld

Voorbeeld 1

De inline frame markering is als volgt:

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

Try it yourself

Example 2

Add and remove the border of the iframe (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 Define the functional policy of the <iframe>.
allowfullscreen
  • true
  • false
 Set to true if the <iframe> can activate 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 Define the height of the <iframe>. The default height is 150 pixels.
loading
  • eager
  • lazy
 Define whether the browser should load the iframe immediately or defer loading until certain conditions are met.
name Text Define 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
 Define the reference information to be sent when accessing the iframe.
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 Enable a series of additional restrictions on the content of the <iframe>.
src URL Define the address of the document to be embedded in the <iframe>.
srcdoc HTML code Define the HTML content of the page to be displayed in the <iframe>.
width Pixels Define the width of the <iframe>. The default width is 300 pixels.

Global properties

<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