- 3 years ago
- Shahzad Gujjar
- 2876 Views
-
4
You’ll learn how to use an iframe to view a web page inside another web page in this guide.
What is iframe
External objects, such as other web pages, are displayed inside a web page using an iframe or inline frame. An iframe is essentially a mini web browser inside a web browser. Furthermore, the content of an iframe exists independently of the surrounding elements.
The following is the basic syntax for adding an iframe to a web page:
<iframe src="URL"></iframe>
The src attribute defines a URL that refers to the position of an external object or web page.
In the example below, the “hello.html” file is shown in an iframe inside the current document.
<iframe src="hello.html"></iframe>
Setting Width and Height of an iFrame
The iframe’s height and width are specified with the height and width attributes.
<iframe src="hello.html" width="400" height="200"></iframe>
You may also use CSS to specify an iframe’s width and height, as seen here:
<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>
To learn how to apply CSS to HTML elements, please see the HTML styles tutorial.
NOTE: By default, the width and height attribute values are specified in pixels, but you can also set the values in percentages, such as 50%, 100%, and so on. An iframe’s default width is 300 pixels, and it’s default height is 150 pixels.
Removing Default Frame border
By default, the iframe has a border around it. If you want to change or delete the iframe borders, the CSS border property is the best option.
The iframe will be rendered without any borders in the following case.
<iframe src="hello.html" style="border: none;"></iframe>
Similarly, the border property may be used to add custom borders to an iframe. The iframe will be rendered with a 2-pixel blue border in the following case.
<iframe src="hello.html" style="border: 2px solid blue;"></iframe>
Using an iFrame as Link Target
The hyperlinks can also be targeted using an iframe.
The name attribute can be used to give an iframe a name. This means that if you select a link with that name as the target attribute, the linked resource will open in that iframe.
Let’s look at an example and see how it works in practice:
<iframe src="demo-page.html" name="myFrame"></iframe>
<p><a href="https://www.tutorialrepublic.com" target="myFrame">Open TutorialRepublic.com</a></p>
- 3 years ago
- Shahzad Gujjar
- 2876 Views
-
4