How To Change The Size Of The Iframe In Html

How to Automatically Resize an iframe

Use HTML and JavaScript to create dynamic iframes, acting as if they're part of the parent window

A laptop featuring HTML code on the screen. — Photo by Alex Knight on Unsplash

The <iframe> allows web developers to embed one HTML page inside some other. It'due south and so useful because they're a part of HTML then you lot can use them almost anywhere — in website builders like Wix and Squarespace or in your next full-stack projection.

YouTube uses iframes to allow embedded videos, Google uses them for their OAuth2 authentication, and by SaaS companies such as Mailchimp, Typeform and Outgrow to offer embeddable content.

However, iframes can also cause their fair share of problems and we'll discuss some of the most common ones in this article.

The Problem

By default, iframes have a fixed top. That's fine if your content likewise has a fixed height just if your content's height changes you could hands end up looking at a double-scrollbar monstrosity like this:

An iframe with a scrollbar within a browser viewport with a scrollbar.

What if nosotros wanted our iframe to comport like regular HTML elements, with content that wraps vertically?

To do this, we'd demand to dynamically change the iframe'due south height but security considerations hateful it is impossible for a parent window to access elements within the iframe.

In this article, I'll explain a foolproof way of achieving this effect, using vanilla JavaScript.

The Solution

Using the window.postMessage() method, we can safely communicate between the iframe and the parent window. That way, we tin send a height value from the iframe to the parent window. Then, in the parent window, nosotros can prepare a simple script to dynamically update the superlative of the iframe.

The Code

For this tutorial, we'll need two HTML files: a parent file where we put the iframe, and a kid file containing the iframe'south contents.

kid.html

Our child file volition contain a simple dummy text generator, where people can click a button to add together another paragraph of lorem ipsum text.

As this tutorial is well-nigh the iframe, and not the functionality of what's in it, feel gratuitous to copy and paste the post-obit into child.html:

You tin try out the code in a higher place in this CodePen:

parent.html

We can now insert our iframe into parent.html.

Add the usual HTML5 boilerplate lawmaking, and then insert the following betwixt the body tags:

          <iframe id="iframe" src="child.html" style="width:100%;border:none;"></iframe>

Just here nosotros encounter our trouble. Because nosotros gear up overflow: subconscious, the buttons and half of the commencement paragraph disappear.

And if we hadn't ready overflow: subconscious we'd run into two gyre-confined, every bit in the prototype above. To resolve this, we need to transport mail messages from child.html to the parent window!

child.html

So, back in child.html, we demand to add new event listeners to the script section.

We need to notify the parent element of the iframe's height:

every time information technology loads,
whenever the window is resized, and
whenever a button is pressed.

When each of these events occurs, nosotros'll trigger a function called sendPostMessage.

Put the following code just before the endmost <script> tag:

Now let'due south create our sendPostMessage() function.

We want to measure out the height of the element with the id container. If (and only if) the height changes, we desire to send a message called frameHeight to the parent window, notifying it of the update.

The following code should go higher up what we merely wrote:

The second statement of the postMessage method represents the target origin: the hostname of the parent window.

This is useful for security, making sure the bulletin is only sent to specific domains but for development purposes, we can prepare the target origin to '*'. This means any parent window will receive the bulletin.

Overall, the code of child.html should look like this:

parent.html

Let's load parent.html in the browser and open up the console (press CTRL+Shift+ J in Google Chrome).

Whenever nosotros resize the window, we should now come across values appear in the panel. The final pace is to employ these to set the iframe meridian whenever 1 of these values is sent.

We demand to listen for message events and whenever nosotros receive one we should use information technology to set the height property of the iframe (plus a little padding):

Overall, your parent.html file should look like this:

If you followed the steps correctly, your iframe will now resize automatically as if its contents were office of the parent window!

Minification

Every bit a last step, you lot could minify the above lawmaking so it'due south like shooting fish in a barrel for not-developers to re-create and paste into their HTML:

          <iframe id="i" src="child.html" fashion="width:100%;border:none;"></iframe><script>window.onmessage=e=>{e.information.hasOwnProperty("frameHeight")&&(document.getElementById("i").style.height=`${due east.data.frameHeight+30}px`)}</script>

If yous host your child.html file online (using a service like GitHub or Netlify), y'all can then insert your new URL into the src holding of the code to a higher place and transport it to anyone. Anyone can now embed your content as a dynamic iframe!

I hope y'all've found this tutorial useful! Thanks for reading.