HTML iframe tag

What is iframe in HTML?

Iframe stands for Inline frame, which helps in embedding another website or HTML document. It helps in reusing the login amongst different websites.

This helps in reducing the development times and has its own pros and cons which you can find below in the article.

Firstly let me give you an example of one such example of embedding the website mindroast.com on the iframe.

Code for the above iframe, You can write the same on a simple HTML file and run it on any of your browsers.

<!DOCTYPE html>
<html>
<head>
    <title>Embedded Iframe Example</title>
</head>

<body>
    <h1>Embedded Mindroast website on Iframe Example</h1>
    <iframe src="https://mindroast.com" width="600" height="400" frameborder="0"></iframe>

</body>
</html>

Why use iframe?

Let us suppose you have a portal with all the logic to add a user, all the test cases everything is in place.

The existing users are using that portal to create new users, but now we have a new use case in which we have to integrate the same portal into another existing portal.

Now we have two options, either create the website from scratch or reuse the existing logic using iframe.

Iframe embedding

As we discussed earlier, iframe embedding is embedding your HTML content into your current website.

<iframe src="https://www.xyz.website" title="Your title.">

Here using the above syntax we can provide the source to the website that we want to plugin. The host website can decide for themselves about the size of the iframe which is required to be loaded.

We have multiple properties

width: Adjusting the width of the iframe.

height: Adjusting the height of the iframe.

frameborder: Property can be used to Remove the frame border.

allowfullscreen: Allows the screen to go into full-screen mode, on users action.

Performance impact of iframes

We have an iframe impact on the performance of the website, as resources are used to load the website. Loading many iframes could lead to impact the performance of the website.

Each iframe has to load different resources and network calls for loading the data, Html, CSS and other data. This may lead to the use of extra resources of the browser.

Rendering the iframe content may lead to additional use of the device memory and CPU. There should be a sweet spot between choosing the number of iframe you use for your application.

Ideally, as per my experience, Iframe or embedding in general should only be used when we are sharing heavily impactful applications. The case when writing the entire logic is more cumbersome.

Iframe Other Use Cases

As discussed earlier iframe is used for embedding different websites. So one can embed Google Maps, or any video to your website. Mainly for promotional purposes we generally need a marketing video to be embedded to our website.

Although iframe could have some security risk if not implemented properly.

---

About The Author

Apoorv Tomar is a software developer and blogs at Mindroast. You can connect with him on Twitter. Subscribe to the newsletter for the latest curated content. Don’t hesitate to say ‘Hi’ on any platform, just stating a reference of where did you find my profile.