revision :
The HTML inline frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one.
The <iframe> tag defines a rectangular region within the document, in which the browser can display a separate document, including scrollbars and borders.
An inline frame is used to embed another document within the current HTML document.
The "src" attribute is used to specify the URL of the document that occupies the inline frame.
Syntax: <iframe src="url" title="description"></iframe>
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.
iframe - set height and width: use the "height" and "width" attributes to specify the size of the iframe. The height and width are specified in pixels by default. Or you can add the style attribute and use the CSS height and width properties.
code:
<div>
<iframe src="demo_iframe.htm" height="180" width="300" title="iframe example"> </iframe>
<iframe src="demo_iframe.htm" style="height:180px;width:300px" title="iframe example"> <iframe>
</div>
iframe - remove the border: by default, an iframe has a border around it. To remove the border, add the style attribute and use the CSS border property. With CSS, you can also change the size, style and color of the iframe's border.
code:
<iframe src="demo_iframe.htm" style="border: none" height="150" width="300"
title="iframe example"> </iframe>
<iframe src="demo_iframe.htm" style="border: 2px dashed red;" height="150"
width="300" title="iframe example"> </iframe>
iframe - target for a link: an iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe:
When the target attribute of a link matches the name of an iframe, the link will open in the iframe.
<div.
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="90%"
title="iframe example"> </iframe>
<p> <a href="https://lwitters.com" target="iframe_a">lwitters.com </a> </p>
</div>
allow: specifies a feature policy for the <iframe>; the policy defines what features are available to the <iframe> based on the origin of the request (e.g. access to the microphone, camera, battery, web-share API, etc.).
allowfullscreen: set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method.
allowpaymentrequest: set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.
csp: a content security policy enforced for the embedded resource. See HTMLIFrameElement.csp for details.
frameborder: this attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).
height: the height of the frame in CSS pixels. Default is 150. P.S. not supported in HTML5.
code: <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
marginheight: this attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents; the value is given in pixels. For example marginheight = "10". P.S. not supported in HTML5.
marginwidth: this attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content; the value is given in pixels. For example marginwidth = "10". P.S. not supported in HTML5.
loading: indicates how the browser should load the iframe: a/ eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value), b/ lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
name: a targetable name for the embedded browsing context; this can be used in the "target" attribute of the <a>, <form>, or <base> elements; the "formtarget" attribute of the <input> or <button> elements; or the windowName parameter in the window.open() method.
code:
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
referrerpolicy: indicates which referrer to send when fetching the frame's resource:
sandbox: applies extra restrictions to the content in the frame; the value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:
src: the URL of the page to embed; use a value of "about:blank" to embed an empty page that conforms to the same-origin policy. Also note that programatically removing an <iframe>'s src attribute (e.g. via Element.removeAttribute()) causes "about:blank" to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.
scrolling: this attribute controls the appearance of the scrollbars that appear on the frame: this takes values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars. P.S. not supported in HTML5.
longdesc: this attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = "framedescription.htm". P.S. not supported in HTML5.
srcdoc: inline HTML to embed, overriding the "src" attribute. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute.
width: the width of the frame in CSS pixels. Default is 300.
code:
<div>
<iframe style="margin-left: 3vw;" src = "demo_iframe.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<iframe width="560" height="315" src="../pics/Wuzhen-20-10_01.mp4" frameborder="0" allowfullscreen></iframe>
</div>
how to make an iframe?
<iframe src="URL"></iframe>
functional iframe HTML code:
<iframe src="https://www.example.com/" width="1500px" height="500px"></iframe>
embed code for a Hubspot Youtube video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/S93nYy-Bxzo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
responsive iframe:
<iframe src="https://www.youtube.com/embed/S93nYy-Bxzo"></iframe>
iframe without borders:
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
Some legitimate uses for <iframe></iframe>: embedding third-party media; embedding your own media in a document-agnostic way; embedding code examples; embedding third party “applets” like payment forms.
Some terrible uses for <iframe></iframe>: photo gallery; forum or channel.
An <iframe> tag hosts a separate embedded window, with its own separate document and window objects. We can access them using properties:
"iframe.contentWindow" to get the window inside the <iframe>.
"iframe.contentDocument" to get the document inside the <iframe>, shorthand for "iframe.contentWindow.document".
When we access something inside the embedded window, the browser checks if the iframe has the same origin. If that's not so then the access is denied (writing to location is an exception, it's still permitted).
For instance, let's try reading and writing to <iframe> from another origin:
In the parent page:
const iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage('some message', '*');
In the iframe
window.onmessage = function(e) {
if (e.data === 'some message') {
alert('It works!');
}
};
In parent page:
window.onmessage = function(e) {
if (e.data === 'from iframe') {
alert('It works!');
}
};
In iframe:
window.top.postMessage('from iframe', '*')