The An inline frame is used to embed another document within the current HTML document. Tip: Use CSS to style the Tip: It is a good practice to always include a title attribute for the |
Example:
HTML
<iframe src="https://horje.com/learn/682/what-is-html-i-tag" title="Horje Free Online Web Tutorials">
</iframe>
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 |
Example:
HTML
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>
Example:
HTML
<style>
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
</style>
The allow
attribute specifies a feature policy to define what permissions are available to an <iframe>
.
The allow
Attribute can be used with the following elements:
<iframe>
<iframe>
allow
AttributeThe <iframe>
tag represents a nested browsing context and is used to embed an HTML document in your current HTML document.
The allow
attribute can be used with the <iframe>
attribute to specify a permissions policy to determine what features are available to it when it is initialized. I.e., permitting the <iframe>
to access the computer’s camera or microphone.
Example:
HTML
<iframe src="https://horje.com/learn/119/how-to-create-html-em-elements" allow="camera 'none'; microphone 'none'"></iframe>
iframe, short for "inline frame", is the most common way that the allowfullscreen attribute is used. Thanks mostly to video sites like YouTube and Vimeo, videos embedded by third-party websites using an iframe can use the allowfullscreen attribute to enable a "fullscreen" button within the iframe.
Here is sample code for a YouTube video embedded using an iframe along with the allowfullscreen attribute:
Example:
HTML
<iframe width="560" height="315" src="//www.youtube.com/embed/jofNR_WkoCE" allowfullscreen></iframe>
Note: This attribute is Experimental.
The allowpaymentrequest set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.
Note: This attribute is considered a legacy attribute and redefined as allow="payment".
Value | Description |
---|---|
allowpaymentrequest | This is a boolean attribute, the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. |
Example:
HTML
<iframe src="https://www.paypal.com/" allowpaymentrequest>
Your browser does not support iframe element.
</iframe>
An <iframe> with a specified height and width of 200 pixels:
The height
attribute specifies the height of an <iframe>
, in pixels.
The default height is 150 pixels.
<iframe height="pixels">
Value | Description |
---|---|
pixels | The height of the inline frame in pixels (e.g. height="100") |
Example:
HTML
<iframe src="https://horje.com/learn/683/what-is-html-iframe-tag" width="200" height="200">
The load
event fires when the eagerly-loaded content has all been loaded. At that time, it's entirely possible (or even likely) that there may be lazily-loaded images or iframes within the visual viewport that haven't yet loaded.
Example:
HTML
<iframe loading="lazy" src="https://horje.com/learn/683/what-is-html-iframe-tag" title="..."></iframe>
An <iframe> that act as a target for a link:
The name
attribute specifies a name for an iframe.
This name
attribute can be used to reference the element in a JavaScript, or as the value of the target
attribute of an <a>
or <form>
element, or the formtarget
attribute of an <input>
or <button>
element.
<iframe name="name">
Value | Description |
---|---|
name | Specifies a name for the <iframe> |
Example:
HTML
<iframe src="https://horje.com/learn/683/what-is-html-iframe-tag" name="iframe_a">
<p>Your browser does not support iframes.</p>
</iframe>
Specifies that no referrer information will be sent along with the request:
The referrerpolicy
attribute specifies which referrer information to send when fetching an iframe.
The numbers in the table specify the first browser version that fully supports the attribute.
<iframe referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url">
Value | Description |
---|---|
no-referrer | No referrer information will be sent along with a request |
no-referrer-when-downgrade | Default. The referrer header will not be sent to origins without HTTPS |
origin | Send only scheme, host, and port to the request client |
origin-when-cross-origin | For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path |
same-origin | For same-origin requests: Referrer info will be sent. For cross-origin requests: No referrer info will be sent |
strict-origin | Only send referrer info if the security level is the same (e.g. HTTPS to HTTPS). Do not send to a less secure destination (e.g. HTTPS to HTTP) |
strict-origin-when-cross-origin | Send full path when performing a same-origin request. Send only origin when the security level stays the same (e.g. HTTPS to HTTPS). Send no header to a less secure destination (HTTPS to HTTP) |
unsafe-url | Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe |
Example:
HTML
<iframe src="https://horje.com/view/1332/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="no-referrer"></iframe>
No referrer information will be sent along with a request.
Example:
HTML
<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="no-referrer"></iframe>
Default. The referrer header will not be sent to origins without HTTPS.
Example:
HTML
<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="no-referrer-when-downgrade"></iframe>
Send only scheme, host, and port to the request client.
Example:
HTML
<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="origin"></iframe>
For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path.
Example:
HTML
<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="origin-when-cross-origin"></iframe>
For same-origin requests: Referrer info will be sent. For cross-origin requests: No referrer info will be sent.
Example:
HTML
<iframe src="https://horje.com/view/1333/how-to-add-html-iframe-referrerpolicy-attribute" referrerpolicy="same-origin"></iframe>
Only send referrer info if the security level is the same (e.g. HTTPS to HTTPS). Do not send to a less secure destination (e.g. HTTPS to HTTP)
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe referrerpolicy attribute</h1>
<iframe src="https://w3schools.com/" referrerpolicy="strict-origin">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Send full path when performing a same-origin request. Send only origin when the security level stays the same (e.g. HTTPS to HTTPS). Send no header to a less secure destination (HTTPS to HTTP)
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe referrerpolicy strict-origin-when-cross-origin attribute</h1>
<iframe src="https://horje.com/" referrerpolicy="strict-origin-when-cross-origin">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe referrerpolicy unsafe-url attribute</h1>
<iframe src="https://horje.com/" referrerpolicy="unsafe-url">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
An <iframe> with extra restrictions.
The sandbox
attribute enables an extra set of restrictions for the content in the iframe.
When the sandbox
attribute is present, and it will:
<embed>
, <object>
, <applet>
, or other)The value of the sandbox
attribute can either be empty (then all restrictions are applied), or a space-separated list of pre-defined values that will REMOVE the particular restrictions.
The numbers in the table specify the first browser version that fully supports the attribute.
<iframe sandbox="value">
Value | Description |
---|---|
(no value) | Applies all restrictions |
allow-forms | Allows form submission |
allow-modals | Allows to open modal windows |
allow-orientation-lock | Allows to lock the screen orientation |
allow-pointer-lock | Allows to use the Pointer Lock API |
allow-popups | Allows popups |
allow-popups-to-escape-sandbox | Allows popups to open new windows without inheriting the sandboxing |
allow-presentation | Allows to start a presentation session |
allow-same-origin | Allows the iframe content to be treated as being from the same origin |
allow-scripts | Allows to run scripts |
allow-top-navigation | Allows the iframe content to navigate its top-level browsing context |
allow-top-navigation-by-user-activation | Allows the iframe content to navigate its top-level browsing context |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe sandbox attribute</h1>
<iframe src="https://horje.com/" sandbox>
<p>Your browser does not support iframes.</p>
</iframe>
<p>The "Get date and time" button will run a script in the inline frame.</p>
<p>Since the sandbox attribute is set, the content of the inline frame is not allowed to run scripts.</p>
<p>You can add "allow-scripts" to the sandbox attribute, to allow the JavaScript to run.</p>
</body>
</html>
Allows form submission.
The "Submit" button will submit the form in the inline frame.
Since the sandbox attribute is set to an empty string (""), the submission of the form in the inline frame will be blocked.
Add "allow-forms" to the sandbox attribute, to allow form submission.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe sandbox attribute</h1>
<iframe src="https://horje.com" sandbox="allow-forms">
<p>Your browser does not support iframes.</p>
</iframe>
<p>The "Submit" button will submit the form in the inline frame.</p>
<p>Since the sandbox attribute is set to an empty string (""), the submission of the form in the inline frame will be blocked.</p>
<p>Add "allow-forms" to the sandbox attribute, to allow form submission.</p>
</body>
</html>
Allows to open modal windows
Example:
HTML
<iframe src="https://horje.com" sandbox="allow-modals">
<p>Your browser does not support iframes.</p>
</iframe>
Allows to lock the screen orientation
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-orientation-lock">
</iframe>
Allows to use the Pointer Lock API.
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-pointer-lock">
</iframe>
Allows popups
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-popups">
</iframe>
Allows popups to open new windows without inheriting the sandboxing.
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-popups-to-escape-sandbox">
</iframe>
Allows to start a presentation session.
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-presentation">
</iframe>
Allows the iframe content to be treated as being from the same origin
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-same-origin">
</iframe>
Allows to run scripts
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-scripts">
</iframe>
Allows the iframe content to navigate its top-level browsing context
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-top-navigation">
</iframe>
Allows the iframe content to navigate its top-level browsing context, but only if initiated by user.
Example:
HTML
<iframe src="https://horje.com/" sandbox="allow-top-navigation-by-user-activation">
</iframe>
An <iframe> in its simplest use:
The src
attribute specifies the address of the document to embed in an iframe.
<iframe src="URL">
Value | Description |
---|---|
URL | Specifies the URL of the document to embed in the iframe.
Possible values:
|
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe src attribute</h1>
<iframe src="https://horje.com/view/1353/how-to-add-html-iframe-sandbox-allow-top-navigation-by-user-activation-attribute">
</iframe>
</body>
</html>
An <iframe> with a srcdoc attribute.
This is a way to add HTML Code to Iframe
The srcdoc
attribute specifies the HTML content of the page to show in the inline frame.
Tip: This attribute is expected to be used together with the sandbox
and seamless
attributes.
If a browser supports the srcdoc
attribute, it will override the content specified in the src
attribute (if present).
If a browser does NOT support the srcdoc
attribute, it will show the file specified in the src
attribute instead (if present).
The numbers in the table specify the first browser version that fully supports the attribute.
<iframe srcdoc="HTML_code">
Value | Description |
---|---|
HTML_code | The HTML content to show in the iframe. Must be valid HTML syntax |
Example:
HTML
<iframe srcdoc="<p>Hello world!</p>" src="https://horje.com/view/1354/how-to-add-html-iframe-src-attribute">
An <iframe> with a specified height and width of 200 pixels:
The width
attribute specifies the width of an iframe, in pixels.
The default width is 300 pixels.
<iframe width="pixels">
Value | Description |
---|---|
pixels | The width in pixels (like "100px" or just "100") |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The iframe height attribute</h1>
<iframe src="https://horje.com/" width="200" height="200">
</iframe>
</body>
</html>
This iframe will run according to your web browser fit.
Example:
HTML
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
<iframe src="https://horje.com" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Reffered: https://www.w3schools.com/tags/tag_iframe.asp
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 11 months ago |
Uploaded by: | Admin |
Views: | 37 |