HTML iframes
What is iframe
An iframe or inline frame is used to display external objects including other web pages within a web page. An iframe pretty much acts like a mini web browser within a web browser. Also, the content inside an iframe exists entirely independent from the surrounding elements.
The basic syntax for adding an iframe to a web page can be given with:
The URL specified in theĀ srcĀ attribute points to the location of an external object or a web page.
The following example display “hello.html” file inside an iframe in the current document.
Example
<iframe src="hello.html"></iframe>
Setting Width and Height of an iFrame
TheĀ heightĀ andĀ widthĀ attributes are used to specify the height and width of the iframe.
Example
<iframe src="hello.html" width="400" height="200"></iframe>
You can also use CSS to set the width and height of an iframe, as shown here:
Example
<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>
Please see the tutorial onĀ HTML stylesĀ to learn the methods of applying CSS to HTML elements.
Note:Ā TheĀ widthĀ andĀ heightĀ attribute values are specified in pixels by default, but you can also set these values in percentage, such as 50%, 100% and so on. The default width of an iframe is 300 pixels, whereas the default height is 150 pixels.
Removing Default Frameborder
The iframe has a border around it by default. However, if you want to modify or remove the iframe borders, the best way is to use the CSSĀ borderĀ property.
The following example will simply render the iframe without any borders.
Example
<iframe src="hello.html" style="border: none;"></iframe>
Similarly, you can use theĀ borderĀ property to add the borders of your choice to an iframe. The following example will render the iframe with 2 pixels blue border.
Example
<iframe src="hello.html" style="border: 2px solid blue;"></iframe>
Using an iFrame as Link Target
An iframe can also be used as a target for theĀ hyperlinks.
An iframe can be named using theĀ nameĀ attribute. This implies that when a link with aĀ targetĀ attribute with that name as value is clicked, the linked resource will open in that iframe.
Let’s try out an example to understand how it basically works:
Example
<iframe src="demo-page.html" name="myFrame"></iframe>
<p><a href="https://www.tutorialrepublic.com" target="myFrame">Open TutorialRepublic.com</a></p>