What are iFrames?

You’ve probably heard the word iFrame being thrown around, especially by developers and product owners. You may even think it’s some sort of Apple product that is going to revolutionise the world but no it’s not (sorry to get your hopes up Apple fans!). 

The interesting thing is that you’ve probably used iFrames on countless occasions without even knowing it. 

WHAT ARE IFRAMES?

Ok, so now that we’ve piqued your interest and you’re dying to know about this development feature, let’s get cracking! 

An iFrame, which gets its name from an inline Frame, is an HTML document that is embedded inside another document on a website or web page, therefore allowing you to include content from external sources on your website’s pages.

To explain this in layman’s terms, you have a webpage that you’ve developed, however in a section (or frame) of that website, you want to load some external piece of content or interactive functionality, this can be easily done but adding an iFrame to that section. 

Therefore the iFrame itself is its own website and whatever is part of that website, will get included in the section that you’ve allocated for it. 

It’s probably easier to explain this with a visual representation: 

Referencing the above webpage, imagine we wanted to insert (with the arrow) a content element / widget into the blue section, for example, a widget that shows the next 7 days weather forecast or latest stock prices, etc. 

So an easy way to do this is to insert an iFrame. The iFrame itself can contain loads of logic, visuals and content, in fact, it can contain anything as it is its own mini website that is simple and self-contained. 

IFRAME BROWSER SUPPORT

The iframe element is supported by all modern desktop and mobile browsers. This level of support makes them ideal to be used without limitations.

SHOW ME THE IFRAME CODE

To build a simple iframe, is really simple, in fact so simple that even non-coders could even understand how this works. In the iframe tag, we need to set the source URL (where the content for the iFrame is being loaded from) and the size of the iFrame by specifying the width and height in pixels:

<iframe src="https://www.example.com" width="200" height="200"></iframe>

For example, the code below will display a 400px square with the google website within it:

<iframe src="https://www.google.com/" height="400px" width="400px"></iframe>

WHY USE IFRAMES IN WEB DEVELOPMENT?

There are many reasons to use iFrames in websites, eCommerce shops and web applications. The most common and obvious reason is to embed third-party widgets or content into your website. 

For example an advertising banner or a Youtube video.  

Embedding iFrames into a website or web application, it’s an instant solution to getting these elements into your website with minimal coding and complications. 

What this means is that once you’ve embedded the iFrame into your website, the content of the iFrame is instantly displayed and accessible to website users, walah! 

Another reason includes the ability to load almost anything in an iFrame, therefore making them a powerful source to load and display content within your website. 

SECURITY

When loading an iFrame, you are mostly dealing with content provided by a third party over which you have no control (whatever is provided, is what will be displayed).

Therefore, you are increasing the risk of having a potential vulnerability in your website or web application. You may also simply have to deal with a bad user experience (like annoying video auto-play) which is part of the content that is loaded in the iFrame.

Scrutinising which third-party providers you are going to use, to load their content into your iFrame, will reduce these risks. You want to make sure that these providers are trusted and that their content is genuine and won’t break. 

ARE THERE BENEFITS TO USING IFRAMES?

There certainly are benefits to using iFrames when it comes to the development of websites. 

1. Easy of use: As mentioned above iFrames are easy to create and embed into a website. 
2. Well supported: iFrames are supported by all major web browsers
3. Allows embedding of third-party content: The main reason for an iFrame to be used is so that we can embed third party content into a website
4. Say goodbye to slow-loading: If you see slow-loading & low-performing third-party content, such as icons and advertisements, an iframe can assist you.

WHAT ARE THE DOWNSIDES TO USING IFRAMES?

1. Security: You have no control over what content is loaded in the iFrame. Therefore anything malicious will be rendered to your users.
2. iFrame control: Similar to the point above, we have no control over the styling or content of what’s in the iFrame. Therefore we aren’t able to change how this content looks (in the scenario you wanted to make certain content look and feel like the main website’s branding). 

SOME EXAMPLES OF IFRAMES IN USE

1. Twitter timeline: If your company uses Twitter, you can easily embed Twitter within your website using an iFrame. This quickly allows you to share news or updates instantly via your latest tweets.
2. Google Maps: Google Maps is highly popular for displaying locations within a map. You can easily embed a Google Map on your website to allow users to find out where you are located. 
3. Youtube videos: You can quickly and easily add Youtube videos to your website or web app through iFrames. 
4. Stock prices: Stock prices are something that constantly change, by using an iFrame you’re able to embed widgets that show the real time prices to your audiences
5. Podcasts: Podcasts are a great way to get users to consume your content. Why not use a Podcast player on your website? With iFrames it’s easy and a no-brainer. 

SO WHATS THE VERDICT?

When it comes to iFrames they’re very commonly used by web developers and for a good reason. They can be used to embed content of many kinds such as articles, to website homepages, to learning modules, interactive widgets and so much more. 

This gives websites and web apps the ability to house content from these third party platforms and providers, very easily and quickly. This is a massive time saving as no custom code is needed to do a full integration, it’s a quick iFrame embed that takes a few minutes and you’re done.

There are many more upsides than downsides to using iFrames, hence their popularity and high usage. 

All in all, iFrame is a powerful element if you want more engagement for your visitors. Think of iFrame as part of the content that you make, not as an integral part of your website. 

If you still need to use it for development purposes, remember only to use content from a trustworthy site. We hope that this article helped in understanding iFrame.