An iframe (short for inline frame) is a small frame/window inside a webpage that displays a webpage of your site or from another website. You can consider an iframe a browser inside another browser. The content inside the iframe and the webpage that contains the iframe are not affected by each other. Changing anything on each window don’t affect the other.
Iframes are used to display google map, add social media widget (twitter’s tweet button, facebook’s like button), and often are used to display online advertisements (ex. google adsense) etc. in a webpage.
In this short lesson, you’ll learn how to create an iframe and control its different components.
Creating an iframe
To create an iframe, use the iframe element with the src attribute. The value of the src attribute is the URL of the webpage you want to display in the iframe. See the following example-
<iframe src="http://schoolsofweb.com/category/html-for-beginners/">Sorry, your browser doesn't support the iframe element. To see the iframe content, click <a href="http://schoolsofweb.com/category/html-for-beginners/">HTML for beginners</a> </iframe>
Output:
- Text based browsers, old browsers that don’t support iframe element will display the content written between the opening <iframe> and closing </iframe> tags.
- Typically, the default size of an iframe is 300px in width and 150px in height.
Attributes of an iframe
There are seven attributes of iframe (plus global attributes) permitted to use in HTML5-
- src
- height
- width
- name
- srcdoc
- sandbox
- seamless
Specifying the height and width of an iframe
To specify height of an iframe, use the height attribute and mention its height as value. The value is expressed in pixel.
Similarly, to specify width of an iframe, use the width attribute and mention its width as value. The value is expressed in pixel.
See the following example-
<iframe src=”http://schoolsofweb.com/category/html-for-beginners/” width=”100%” height=”400”>Sorry, your browser doesn't support the iframe element. To see the click <a href="http://schoolsofweb.com/category/html-for-beginners/">HTML for beginners</a> </iframe>
Output:
Targeting an iframe to open a webpage
If you want a webpage to open in an iframe clicking a link or submitting a form or executing a script, then, follow the two steps-
- Specify a name of the iframe using name attribute, and
- Use the target attribute in the link (or form element) element and give its value as the name of the iframe mentioned in the previous step. When you click the link, the URL that is specified in the href attribute will be opened in the iframe.
See the following example-
<a href=”http://schoolsofweb.com/category/html-for-beginners/” target=”frame1”>HTML for beginners</a> <a href=”http://schoolsofweb.com/category/php-beginner/” target=”frame1”>PHP for beginners </a> <iframe name=”frame1” width=”100%” height=”400”>Here will display content of the iframe.</iframe>
If you click the first link, HTML for Beginners course will be loaded in the iframe. Similarly, if you click the second link, PHP for Beginners course will be loaded in the iframe.
Output:
HTML for beginners
PHP for beginners
Making an iframe as part of the main document
To make an iframe as part of the main document, use the Boolean attribute seamless in the iframe element. Clicking any link in the iframe will load in the main document. Also, CSS from the main document can be applied in the iframe.
See the following example-
<iframe seamless src=”http://schoolsofweb.com/category/html-for-beginners/” width=”100%” height=”400”> Sorry, your browser doesn't support the iframe element. To see the click <a href="http://schoolsofweb.com/category/html-for-beginners/">HTML for beginners</iframe>
Output:
Unfortunately, no major browsers support this attribute yet. It is a new attribute in HTML5.
Defining content to display in the iframe
If you want a snippet of HTML or a webpage displays in the iframe and you want to define it in same document, then, mention the HTML snippet in the srcdoc attribute of the iframe element. See the following example-
<iframe src=”http://schoolsofweb.com/category/html-for-beginners/” srcdoc=”You want to be a web developer?” width=”100%” height=”100”>Sorry, your browser doesn't support the iframe element. To see the click <a href="http://schoolsofweb.com/category/html-for-beginners/">HTML for beginners</a> </iframe>
Output:
If both src and srcdoc attributes present in a iframe, then, srcdoc overrides the src attribute. So, in the output above, rather than showing the URL in the src attribute, the iframe is showing the content of the srcdoc attribute. It is another new attribute added in HTML5.