FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@coder 918

HTML IFrames


2021-11-17 20:26 · 7 min read

What is an Iframe?

An iframe is also known as Inline Frame. It can be used to include another page in your page. This will yield a small frame that shows the exact contents of the base.html.

<h2 style="text-align:center">In this Iframe we embed The Pro Developer Website</h2>
<iframe src="https://blog.theprodevelopers.com/" width="100%" height="300px"></iframe>
<h2 style="text-align:center">In this Iframe we embed a HTML webpage </h2>
<iframe src="iframe-example.html" width="100%" height="300px"></iframe>

AttributeDetails
nameSets the element's name, to be used with a tag to change the iframe's src.
widthSets the element's width in pixels.
heightSets the element's height in pixels.
srcSpecifies the page that will be displayed in the frame
srcdocSpecifies the content that will be displayed in the frame, assuming the browser supports it. The content must be valid HTML.
sandboxWhen 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.
allowfullscreenWhether to allow the iframe’s contents to use requestFullscreen()

 

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-topnavigation, can make the sandboxed iframe appear to be part of the parent document.

 

Note: 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="https://blog.theprodevelopers.com" width="800" height="600"></iframe>

 

Using of "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>Hi i am paragraph and you can directly change Inner HTML of Iframe using srcdoc</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.

Example:

<iframe srcdoc="<p>Iframe is Cool!</p>" src="https://blog.theprodevelopers.com"></iframe>

 

In the above example, if the browser does not support the srcdoc attribute, it will instead display the contents of the blog.theprodevelopers.com 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

<iframe src="iframe-example.html" name="myIframe" width="100%" height="200"></iframe><br>
<a href="https://blog.theprodevelopers.com" target="myIframe">Change the Iframe content to The Pro Developer website</a>

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer