HTML i-frame
The <iframe>
(inline frame) tag in HTML is used to embed another HTML document within the current document. It allows you to display external content such as web pages, videos, or even other HTML documents inside a frame.
Here’s a detailed explanation of the <iframe>
tag and its attributes:
Basic Syntax:
src
: Specifies the URL of the page to display inside the iframe.width
andheight
: Define the size of the iframe.
Attributes of <iframe>
Attribute |
Description |
Possible
Values |
Default |
src |
Specifies
the URL of the page to be embedded within the iframe. |
A valid
URL (e.g., https://example.com) |
None
(Required) |
width |
Defines
the width of the iframe. |
Pixel
values (e.g., 600px) or percentage (50%) |
300px (if
unspecified) |
height |
Defines
the height of the iframe. |
Pixel
values (e.g., 400px) or percentage (50%) |
150px (if
unspecified) |
name |
Assigns a
name to the iframe, which can be targeted by links or forms. |
A string
(e.g., myiframe) |
None |
sandbox |
Enables an
extra set of restrictions for the content in the iframe for enhanced
security. |
Empty
(restricts all features), or a space-separated list of values (e.g., allow-forms
allow-scripts) |
None |
allow |
Specifies
which features the iframe is allowed to use (e.g., camera, microphone,
fullscreen). |
A
space-separated list (e.g., fullscreen, camera) |
None |
srcdoc |
Specifies
the HTML content to be displayed inside the iframe, instead of a URL. |
HTML code
(e.g., <h1>Embedded content</h1>) |
None |
frameborder |
Controls
whether the iframe should have a border around it. |
0 (no
border), 1 (border visible) |
1
(default) |
allowfullscreen |
Allows the
iframe content to be displayed in fullscreen mode. |
true or false |
None |
loading |
Specifies
when the iframe content should be loaded. |
lazy, eager |
eager
(default) |
referrerpolicy |
Controls
the referrer information sent when navigating inside the iframe. |
no-referrer,
origin, unsafe-url, etc. |
no-referrer |
title |
Provides a
title for the iframe, improving accessibility and SEO. |
A string
(e.g., Google Search) |
None |
longdesc |
Specifies
a link to a detailed description of the content inside the iframe. |
A URL
(e.g., longdesc="description.html") |
None |
Examples
1. Basic Iframe with External Content
2. Iframe with Name (for Form Targeting)
You can target this iframe with a form:
3. Iframe with Sandbox Restrictions
This allows only scripts and forms to run inside the iframe, but blocks everything else (e.g., top-level navigation).
4. Iframe with a Custom srcdoc
Content
The srcdoc
attribute allows you to specify HTML content directly within the iframe.
5. Iframe with Lazy Loading
This will load the iframe content only when it's about to enter the viewport, which can improve page load times.
6. Iframe with Fullscreen Capability
This will allow the content (e.g., video) to be displayed in fullscreen mode.
7. Iframe with Referrer Policy
This prevents the iframe from sending any referrer information when navigating within the iframe.
Security Considerations
- Sandboxing: The
sandbox
attribute is particularly important for security. It limits the capabilities of the iframe content, which can help prevent malicious actions like script execution and form submissions.- Possible values for
sandbox
:allow-scripts
: Allows JavaScript to run.allow-forms
: Allows form submission.allow-same-origin
: Allows the iframe content to be treated as being from the same origin.allow-popups
: Allows popups to be opened.allow-top-navigation
: Allows the iframe to navigate the top-level browsing context (the parent page).- A blank
sandbox
attribute will block all features unless explicitly allowed.
- Possible values for
Iframe Accessibility
title
: Always provide atitle
attribute for iframes to improve accessibility, as screen readers use it to describe the content inside the iframe.longdesc
: You can use thelongdesc
attribute to link to a detailed description of the iframe content, especially useful for accessibility purposes.
Comments
Post a Comment