How to Use Iframes in HTML


Iframes in HTML

In web pages when we want to add one page inside another page then there is a tag of <iframe> in HTML which allow you to show a page inside another page.

Syntax:

<iframe src=”URL_here” />

Example:

Like if I want to show Facebook page on one side of my webpage so for this iframe is used.

Iframe Attributes:

While using iframes there are many attributes that help us to set the appearance of Iframe.

  • Width: it is used to set the width of iframe.
  • Height: it is used to set the height of iframe.
  • Scrolling: when we set the height and width of iframe then a problem appears the web page we import has a larger width and height and iframe show scrolled to scroll down the page so scrolling attribute is used control that it have three values auto, no and yes.
  • Src: the main and important attribute. In which we define the link of the page we want to show in iframe.
  • Name: the name property is used while we target iframe from hyper link tag.
  • Class: this property is used to apply some style on iframe like border:none;
  • Id: this property is used to select iframe in our script and perform some action.

Target iframe:

Some time we bound events in JavaScript that occurs on onclick so iframe and HTML link work together and make much same like thing.

Actually when we want to show a page in on user click then we bound iframe with <a> tag. The target attributes in HTML Link contain the name of iframe which we set in name attribute of iframe. When user click on link the desire page shown in iframe box.

 

Note: By default Facebook, Google block the iframe functionality so we can’t show Facebook page in iframe so as seen in above example Facebook and Google page was not shown in browsers. So to show Facebook like button Facebook provide his own iframe code. This is available at developer.facebook.com.

iframe facebook page output
iframe facebook page output