This post is originally written here with all the images and code samples -> https://easyontheweb.com/how-to-use-iframe-in-html/
Even though I had used iframe in HTML before it was not until very recently when a teammate of mine used them and I went through his code that I understood them better. So, I decided to learn more about them and then share what I had learned through this article in which we see how to use iframe in HTML.
If you have no idea about what iframes are then let me just make you aware of them – I’m sure you must have visited websites where a video or an advertisement starts playing. No? Have you visited websites where there is a youtube window embedded? Well, whenever there is a website that shows the contents of some other website inside it, they are most probably using iframes.
iframes are HTML tags that enable a sub-window to be opened in the window of your HTML page. The content of the sub-window could be anything, it doesn’t even matter. What matters is that by using iframes, we are actually embedding a completely different HTML page into our parent HTML page.
When are iframes used?
The first time I used an iframe was for embedding a youtube video to an HTML page that I had created. Even though I did not know the internal workings of the tag back then, I knew that it could be used to display content from some other website on ours.
Displaying content from third-party websites is what the primary use of iframes is. You can show content from Youtube, Google maps, RSS Feeds etc. You can basically load content from any public webpage.
Another use of iframes is to display content from another part of your application or even a different microservice of your application on the page. I’ve seen people embedding a microservice in some other microservice through iframes. This keeps the embedded microservice isolated but still useful from the other one.
Some of the advantages of using iframes are :-
We do not need to update the data on the third party website as the people managing that site do it themselves.
Iframes provide a way to a different isolated microservice into our application.
Iframes are much easier to integrate than say integrating through packages.
Even though there are clear advantages of iframes, many developers still do not prefer using them. Here are the disadvantages of iframes :-
Security threats – Security is an issue when we are embedding content from some other website onto ours.
Lack of control – Even though iframes can somewhat control content inside them to a small degree, irritating content like autoplaying videos and popups can cause a bad user experience.
The iframe HTML tag
Even though the entire documentation on the iframe HTML tag can be found in the Mozilla documentation, I think it’ll be helpful if we do discuss the tag a bit in this article as well.
iframe tag example
One of the most interesting things about the iframe tag is that the content inside the tags is only used as a fallback, ie, it is usually not shown. The content will only be shown in case the browser does not support or allow iframes. When the iframe loads successfully, obviously the content of the embedded webpage would be shown.
When it comes to the attributes for this HTML tag the most important one is obviously the src attribute which is the URL of the webpage to be embedded using the iframe. Some of the other important ones are:-
height – The height of the iframe window
width – The width of the iframe window
loading – “eager” or “lazy” depending upon whether you want to load the iframe immediately or wait for it to be on the viewport
sandbox – list of restrictions that you can apply on the embedded webpage window, eg – no popups. (Refer to the documentation for a complete list of sandbox options).
srcdoc – accepts HTML and overrides the src attribute
Communication between the windows
A very important aspect when it comes to having an iframe in your webpage is the interaction with that iframe. This thing is even more important when it comes to integrating some other microservice/application window into your webpage when you have developed the other one as well.
The communication between the windows takes place through two main functions – postMessage and onMessage. Both of these functions are not specific to iframes though, they are methods on the Window object and well, as iframes themselves are nothing but a window themself, we communicate with them using these methods.
window.postMessage for iframe example
This very simple code is used to access the iframe element and then post a message onto that window. The variable iframeWindow is the target window for the message to be posted to.
The arguments for the postMessage function are an event and the targetOrigin. For more information on targetOrigin please refer to the documentation. For now, we’ve kept it as a wildcard * that will basically allow all.
The code above is to be written in the window that you are sending the message from, ie, the parent window. But, just sending the message is not enough. Your target window (running in the iframe) must also be listening to the message that was posted.
To listen for the posted message, you must write the onMessage method in the target window (or there must exist one if you’re using third party webpage and want to interact with that).
window.onMessage for iframe example
This code is to be written in the webpage that is being loaded in the iframe. Here, e is the event that is being passed from the parent window in the postMessage function, and on the basis of that, any operation is carried out in the embedded window. Simple, right?
One last thing between inter-window communication would be when you want to send a message to the parent window from the embedded window. Well, as we know, the postMessage function is actually a method on the Window object therefore we can use it communicate upwards as well.
From the embedded webpage we use window.top.postMessage to send messages to the parent window. The window.top method will give us access to the parent and then postMessage works the same way. Note that you’ll also listen to this message using onmessage in the parent window as well.
A very cool example of this communication is available here and I would recommend you try it out for a while or two.
That is it for this article where we discussed how to use iframe in HTML and I hope you did get something out of this article.
To explore more HTML/CSS articles please check out the Web Design section of the blog.
Also, if you want to be a part of a great facebook group with other developers including me, please join the Easy On The Web facebook group.
Top comments (0)