HTML IFrames

Attribute | Details |
name | Sets the element's name, to be used with an a tag to change the iframe's src. |
width | Sets the element's width in pixels. |
height | Sets the element's height in pixels. |
src | Specifies the page that will be displayed in the frame. |
srcdoc | Specifies the content that will be displayed in the frame, assuming the browser supports it. The content must be valid HTML. |
sandbox | When set, the contents of the iframe is treated as being from a unique origin and features including scripts, plugins, forms and popups will be disabled. Restrictions can be selectively relaxed by adding a space-separated list of values. See the table in Remarks for possible values. |
allowfullscreen | Whether to allow the iframe’s contents to use requestFullscreen() |
Basics of an Inline Frame
The term "IFrame" means Inline Frame. It can be used to include another page in your page. This will yield a small frame which shows the exact contents of the base.html.
<iframe src="base.html"></iframe>
Sandboxing
The following embeds an untrusted web page with all restrictions enabled
<iframe sandbox src="http://example.com/"></iframe>
To allow the page to run scripts and submit forms, add allow-scripts and allow-forms to the sandbox attribute.
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
If there is untrusted content (such as user comments) on the same domain as the parent web page, an iframe can be used to disable scripts while still allowing the parent document to interact with its content using JavaScript.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
The parent document can add event listeners and resize the IFrame to fit its contents. This, along with allow-top navigation, can make the sandboxed iframe appear to be part of the parent document.
This sandbox is not a replacement for sanitizing input but can be used as part of a defense in depth strategy. Also be aware that this sandbox can be subverted by an attacker convincing a user to visit the iframe's source directly. The Content Security Policy HTTP header can be used to mitigate this attack.
Setting the Frame Size
The IFrame can be resized using the width and height attributes, where the values are represented in pixels (HTML 4.01 allowed percentage values, but HTML 5 only allows values in CSS pixels).
<iframe src="base.html" width="800" height="600"></iframe>
Using the "srcdoc" Attribute
The srcdoc attribute can be used (instead of the src attribute) to specify the exact contents of the iframe as a whole HTML document. This will yield an IFrame with the text "IFrames are cool!"
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
If the srcdoc attribute isn't supported by the browser, the IFrame will instead fall back to using the src attribute, but if both the src and srcdoc attributes are present and supported by the browser, srcdoc takes precedence.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
In the above example, if the browser does not support the srcdoc attribute, it will instead display the contents of the base.html page.
Using Anchors with IFrames
Normally a change of webpage within an Iframe is initiated from with the Iframe, for example, clicking a link inside the Ifame. However, it is possible to change an IFrame's content from outside the IFrame. You can use an anchor tag whose href attribute is set to the desired URL and whose target attribute is set to the iframe's name attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
</body>
</html>
ATutorialHub Related Guide
HTML Tutorials Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment