HTML iframe
Jakob Jenkov |
The iframe element is used to include other HTML pages in a frame
inside another HTML page. Here is a simple example:
<iframe width="500" height="200" src="http://tutorials.jenkov.com/"></iframe>
The width and height attributes set the size of the iframe
element in the HTML document in which it is used.
The src attribute sets the URL of the HTML page to show inside the iframe
element.
Here is how it looks if the above iframe code is included in an HTML page:
Allowed iframe Content
You can show other files than HTML files inside an iframe element. In fact, all files
that can be shown in a browser can be included in an iframe, for instance .gif,
.jpg, .png and .svg files. An iframe can also be used to include
videos from YouTube in your HTML page (to learn how, go to YouTube, find a video and get the embed code for it).
iframe Attributes
The iframe element has the following attributes:
| Attribute | Description |
|---|---|
width |
Sets the width of the iframe in the HTML document in which it is used. |
height |
Sets the height of the iframe in the HTML document in which it is used. |
name |
Sets the name of the iframe. The name is used when referring to this iframe via JavaScript |
sandbox |
Security settings for the iframe elements. Possible values are:
""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
.
These values tell whether forms are allowed in the iframe, whether content from the
same origin as the loaded page is allowed, whether JavaScript is allowed to run in the
iframe and whether the iframe can navigate the user away from the page containing the
iframe.
|
seamless |
Specifies that the iframe should look like it is part of the including page. |
src |
Sets the URL of the HTML document to show in this iframe. |
srcdoc |
Sets the HTML to show in this iframe. Can be used instead of the src attribute. |
| Tweet | |
Jakob Jenkov | |
