How to Display a Web Page inside HTML iFrame

How to Display a Web Page inside HTML iFrame?
72 / 100 SEO Score

How to Display a Web Page inside HTML iFrame

HTML Iframes

An Iframe comes in handy when a developer needs to display a webpage in another webpage. The syntax for an Iframe is:

<iframe src="URL">
    alternative content for browsers which do not support iframe.
</iframe>

The size of an Iframe can be reset in the same way as an image. Use the width and height attributes to customize the size of an Iframe – note that dimensions are measured in pixels by default. The frameboarder attribute tells the browser whether or not to include a boarder around an iFrame. If you assign it a value of 1, a boarder will be included otherwise it will be omitted if you assign a value of 0 to the attribute.

You can use an Iframe as a link target. This implies that

Default CSS Settings

Most browsers will display the <iframe> element with the following default values:

iframe:focus { 
  outline: none;
}

iframe[seamless] { 
  display: block;
}

How to Set Width and Height of iframe?

<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Iframes example</h2>    
<p>Use the height and width attributes to specify the size of the iframe:</p>    
<iframe src="https://www.javatpoint.com/" height="300" width="400"></iframe>    
</body>    
</html>

How to Set Width and Height of iframe in Percentage?

<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Iframes</h2>    
<p>You can use the height and width attributes to specify the size of the iframe:</p>    
<iframe src="https://www.htmlkick.com/" height="50%" width="70%"></iframe>    
</body>    
</html>

How to Remove the border of iframe?

<!DOCTYPE html>    
<html>    
<body>    
<h2>Remove the Iframe Border</h2>    
<p>This iframe example doesn't have any border</p>     
<iframe src="https://www.htmlkick.com/" style="border:none;"></iframe>    
</body>    
</html>

Attributes of <iframe>

 

Attribute nameValueDescription
allowfullscreenIf true then that frame can be opened in full screen.
heightPixelsIt defines the height of the embedded iframe, and the default height is 150 px.
nametextIt gives the name to the iframe. The name attribute is important if you want to create a link in one frame.
frameborder1 or 0It defines whether iframe should have a border or not. (Not supported in HTML5).
WidthPixelsIt defines the width of embedded frame, and default width is 300 px.
srcURLThe src attribute is used to give the path name or file name which content to be loaded into iframe.
sandbox
This attribute is used to apply extra restrictions for the content of the frame
allow-formsIt allows submission of the form if this keyword is not used then form submission is blocked.
allow-popupsIt will enable popups, and if not applied then no popup will open.
allow-scriptsIt will enable the script to run.
allow-same-originIf this keyword is used then the embedded resource will be treated as downloaded from the same source.
srcdocThe srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports).
scrolling
It indicates that browser should provide a scroll bar for the iframe or not. (Not supported in HTML5)
autoScrollbar only shows if the content of iframe is larger than its dimensions.
yesAlways shows scroll bar for the iframe.
noNever shows scrollbar for the iframe.