How To Automatically Resize an iframe

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

Published on
Jul 16, 2019

Read time
21 min read

Table of contents

Introduction The Problem The Solution The Code child.html parent.html child.html parent.html Minification

Introduction

In this article, we will learn how to use HTML and JavaScript to create dynamic iframes, acting as if they’re part of the parent window.

The iframe element allows web developers to embed one HTML page inside another. It’s so useful because they’re a part of HTML so you can use them almost anywhere — in website builders like Wix and Squarespace or in your next full-stack project.

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 height. That’s fine if your content also has a fixed height but if your content’s height changes you could easily end up looking at a double-scrollbar monstrosity like this:

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

To do this, we’d need to dynamically change the iframe’s height but security considerations mean 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 can send a height value from the iframe to the parent window. Then, in the parent window, we can set a simple script to dynamically update the height of the iframe.

The Code

For this tutorial, we’ll need two HTML files: a parent file where we put the iframe, and a child file containing the iframe’s contents.

child.html

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

As this tutorial is about the iframe, and not the functionality of what’s in it, feel free to copy and paste the following into child.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Lorem Ipsum Generator</title>
  </head>

  <body>
    <div id="container">
      <div id="text"></div>
      <button id="add-para">+</button>
      <button id="remove-para">-</button>
    </div>
  </body>

  <style>
    html,
    body {
      margin: 0;
      overflow: hidden;
    }

    * {
      font-family: sans-serif;
    }

    #container {
      max-width: 700px;
      margin: 0 auto;
      border: 1px solid grey;
      border-radius: 5px;
      padding: 20px;
    }
  </style>
</html>

<script>
  const data = [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Dictum fusce ut placerat orci nulla pellentesque. Massa enim nec dui nunc mattis. Neque convallis a cras semper auctor neque vitae. Viverra nam libero justo laoreet. Eget mauris pharetra et ultrices neque. Neque viverra justo nec ultrices dui sapien. Ut venenatis tellus in metus vulputate eu scelerisque. Turpis in eu mi bibendum neque egestas. Cursus vitae congue mauris rhoncus.",
    "Est placerat in egestas erat imperdiet sed euismod nisi porta. Faucibus pulvinar elementum integer enim neque volutpat. Vel elit scelerisque mauris pellentesque. Magna eget est lorem ipsum. Sapien et ligula ullamcorper malesuada proin libero. Lectus magna fringilla urna porttitor. Elit scelerisque mauris pellentesque pulvinar. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Suspendisse potenti nullam ac tortor. Imperdiet nulla malesuada pellentesque elit eget gravida cum. Mollis aliquam ut porttitor leo a. Sem nulla pharetra diam sit amet nisl. Quam lacus suspendisse faucibus interdum posuere lorem ipsum. At volutpat diam ut venenatis tellus. Amet dictum sit amet justo. Urna molestie at elementum eu facilisis sed odio morbi quis. Ac orci phasellus egestas tellus.",
    "Id velit ut tortor pretium viverra suspendisse. Sed elementum tempus egestas sed. Mauris commodo quis imperdiet massa tincidunt nunc. Id ornare arcu odio ut. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Tellus id interdum velit laoreet id donec ultrices tincidunt. Quisque sagittis purus sit amet volutpat consequat mauris. Sit amet cursus sit amet dictum sit amet justo. Risus commodo viverra maecenas accumsan lacus vel. Laoreet id donec ultrices tincidunt arcu. Neque viverra justo nec ultrices. Massa placerat duis ultricies lacus sed turpis tincidunt. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Ut tellus elementum sagittis vitae et. Tempus urna et pharetra pharetra. Tincidunt vitae semper quis lectus nulla. At tempor commodo ullamcorper a lacus vestibulum sed. Mauris vitae ultricies leo integer.",
    "Nam at lectus urna duis convallis convallis tellus id interdum. Nunc sed velit dignissim sodales. Lectus vestibulum mattis ullamcorper velit. Duis at consectetur lorem donec. Velit egestas dui id ornare arcu odio ut. Quis varius quam quisque id diam vel quam elementum. Amet risus nullam eget felis eget nunc lobortis. Quam elementum pulvinar etiam non quam lacus. Mattis molestie a iaculis at erat. Mattis molestie a iaculis at erat pellentesque adipiscing. Convallis convallis tellus id interdum velit. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Amet dictum sit amet justo. Cras sed felis eget velit aliquet sagittis id consectetur purus. Nunc consequat interdum varius sit amet mattis vulputate enim. Morbi tincidunt augue interdum velit euismod. Tincidunt lobortis feugiat vivamus at augue eget arcu. Nulla aliquet enim tortor at auctor.",
    "Imperdiet nulla malesuada pellentesque elit eget gravida cum. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Convallis posuere morbi leo urna molestie at elementum eu. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Aliquam sem et tortor consequat. Odio aenean sed adipiscing diam donec adipiscing tristique. Ut diam quam nulla porttitor. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Vivamus at augue eget arcu dictum varius duis at. Odio aenean sed adipiscing diam donec. Quisque sagittis purus sit amet volutpat consequat mauris. Velit laoreet id donec ultrices. Iaculis urna id volutpat lacus laoreet non. Id neque aliquam vestibulum morbi blandit cursus risus. Laoreet id donec ultrices tincidunt. Mauris pharetra et ultrices neque ornare aenean. Aliquam etiam erat velit scelerisque in dictum. Mattis nunc sed blandit libero volutpat.",
    "Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Cursus sit amet dictum sit. Nisl purus in mollis nunc sed. Nullam ac tortor vitae purus faucibus ornare. Est sit amet facilisis magna etiam tempor orci. Adipiscing elit ut aliquam purus sit amet luctus. Quis varius quam quisque id diam. Enim sed faucibus turpis in eu. Ullamcorper eget nulla facilisi etiam dignissim diam. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sit amet porttitor eget dolor morbi non arcu risus quis. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Turpis tincidunt id aliquet risus. Sollicitudin aliquam ultrices sagittis orci a scelerisque. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi.",
    "Imperdiet sed euismod nisi porta lorem mollis aliquam. Risus quis varius quam quisque id diam vel quam elementum. Id cursus metus aliquam eleifend. Nunc vel risus commodo viverra. In massa tempor nec feugiat nisl pretium fusce. Convallis tellus id interdum velit laoreet id. Id consectetur purus ut faucibus pulvinar elementum integer. Enim facilisis gravida neque convallis a. Id leo in vitae turpis massa sed. Tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra. Aenean sed adipiscing diam donec adipiscing tristique risus. Aliquam ut porttitor leo a diam sollicitudin. In pellentesque massa placerat duis ultricies.",
    "Sapien pellentesque habitant morbi tristique. Quis eleifend quam adipiscing vitae proin sagittis nisl. Commodo nulla facilisi nullam vehicula ipsum. Et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris vitae ultricies leo integer. Magna fermentum iaculis eu non diam phasellus vestibulum. Sit amet justo donec enim diam vulputate. Eu lobortis elementum nibh tellus molestie nunc non blandit. Sit amet facilisis magna etiam tempor orci eu. Cursus mattis molestie a iaculis at erat pellentesque adipiscing. Vitae justo eget magna fermentum iaculis eu non. Eget dolor morbi non arcu.",
    "Scelerisque viverra mauris in aliquam sem fringilla ut. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Risus feugiat in ante metus dictum at tempor. Felis donec et odio pellentesque diam volutpat commodo sed. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Egestas sed sed risus pretium. Non consectetur a erat nam. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Posuere ac ut consequat semper viverra nam libero justo laoreet. Velit dignissim sodales ut eu sem. Augue lacus viverra vitae congue eu. Et ultrices neque ornare aenean euismod elementum nisi quis. Eu nisl nunc mi ipsum. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Urna nunc id cursus metus aliquam eleifend mi in.",
    "Sit amet dictum sit amet justo donec enim diam. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Consequat nisl vel pretium lectus. Velit egestas dui id ornare. Orci porta non pulvinar neque. Eu non diam phasellus vestibulum lorem sed risus ultricies. Dolor sit amet consectetur adipiscing elit ut. Sed elementum tempus egestas sed sed risus pretium. Sit amet tellus cras adipiscing enim. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Nisi vitae suscipit tellus mauris a diam maecenas sed enim. Senectus et netus et malesuada. Mi quis hendrerit dolor magna eget est lorem ipsum. Nunc sed id semper risus. Tempor id eu nisl nunc mi ipsum faucibus. Semper risus in hendrerit gravida rutrum. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Vestibulum lorem sed risus ultricies.",
    "Ipsum consequat nisl vel pretium lectus quam id leo. Faucibus et molestie ac feugiat sed. Turpis nunc eget lorem dolor. Risus nullam eget felis eget nunc lobortis mattis aliquam. Accumsan lacus vel facilisis volutpat est velit. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Ac orci phasellus egestas tellus. Nec ultrices dui sapien eget mi proin. Duis convallis convallis tellus id interdum velit laoreet. Lacus sed viverra tellus in. Consectetur adipiscing elit ut aliquam purus. In cursus turpis massa tincidunt dui ut ornare. Neque sodales ut etiam sit amet nisl purus in. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec.",
    "Nec ullamcorper sit amet risus nullam. Aliquam sem fringilla ut morbi. Sapien et ligula ullamcorper malesuada proin libero nunc. Tortor at auctor urna nunc id cursus metus. Cras pulvinar mattis nunc sed. Risus nec feugiat in fermentum posuere urna nec. Nulla aliquet enim tortor at auctor. Sit amet dictum sit amet justo donec enim. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eget velit aliquet sagittis id consectetur purus ut.",
    "Sit amet commodo nulla facilisi nullam vehicula ipsum a. Duis convallis convallis tellus id interdum. Tincidunt vitae semper quis lectus. Sit amet consectetur adipiscing elit duis tristique. Nunc sed blandit libero volutpat sed cras ornare arcu. Sapien eget mi proin sed libero enim sed faucibus turpis. Vitae congue eu consequat ac felis donec et odio. Cras pulvinar mattis nunc sed. Vitae et leo duis ut diam quam nulla. Quam nulla porttitor massa id. Tortor posuere ac ut consequat semper viverra nam. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Et molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris. Tempus quam pellentesque nec nam aliquam.",
    "Fusce ut placerat orci nulla pellentesque dignissim enim. Nunc sed id semper risus in hendrerit gravida rutrum. In hac habitasse platea dictumst. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Justo nec ultrices dui sapien eget mi proin sed libero. Dolor purus non enim praesent elementum facilisis leo vel. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Ut pharetra sit amet aliquam id diam maecenas. Commodo odio aenean sed adipiscing diam. Nunc vel risus commodo viverra maecenas. Proin sagittis nisl rhoncus mattis rhoncus urna. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Faucibus pulvinar elementum integer enim neque volutpat. Tortor dignissim convallis aenean et tortor at risus.",
    "Nibh cras pulvinar mattis nunc sed blandit. Sit amet venenatis urna cursus. Ipsum faucibus vitae aliquet nec ullamcorper. Purus in mollis nunc sed id semper risus. Venenatis lectus magna fringilla urna porttitor rhoncus. Est placerat in egestas erat imperdiet sed euismod. Fermentum dui faucibus in ornare quam viverra. In fermentum posuere urna nec tincidunt praesent semper. Tincidunt eget nullam non nisi est. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Urna et pharetra pharetra massa massa ultricies mi quis. Quis auctor elit sed vulputate mi sit. Sit amet mattis vulputate enim. Nullam non nisi est sit amet. Elementum curabitur vitae nunc sed velit. Odio morbi quis commodo odio. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Fringilla urna porttitor rhoncus dolor purus non enim praesent.",
    "Enim nec dui nunc mattis enim ut tellus elementum. Velit euismod in pellentesque massa placerat. Aliquam purus sit amet luctus venenatis lectus. Ac placerat vestibulum lectus mauris ultrices eros in. Interdum velit laoreet id donec ultrices. Tristique risus nec feugiat in fermentum posuere urna nec. Egestas sed tempus urna et pharetra pharetra massa. Ultrices vitae auctor eu augue ut lectus arcu. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Scelerisque felis imperdiet proin fermentum leo vel.",
    "Quis risus sed vulputate odio ut enim blandit volutpat. Nulla facilisi cras fermentum odio. Egestas erat imperdiet sed euismod nisi. Diam sollicitudin tempor id eu nisl nunc. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Convallis convallis tellus id interdum. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Morbi tincidunt augue interdum velit euismod in pellentesque. Massa placerat duis ultricies lacus sed turpis. Egestas integer eget aliquet nibh praesent. Mi proin sed libero enim sed faucibus turpis. Urna nec tincidunt praesent semper feugiat. Duis ut diam quam nulla porttitor massa id neque aliquam. Urna condimentum mattis pellentesque id nibh. Tellus rutrum tellus pellentesque eu tincidunt tortor.",
    "Varius quam quisque id diam vel. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Eget nunc scelerisque viverra mauris. Pretium lectus quam id leo in. Massa id neque aliquam vestibulum morbi. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Quis risus sed vulputate odio ut enim blandit. Dignissim cras tincidunt lobortis feugiat vivamus at augue. Velit dignissim sodales ut eu sem. Eget mi proin sed libero enim. Rhoncus aenean vel elit scelerisque mauris pellentesque. Ornare arcu odio ut sem nulla. Cursus mattis molestie a iaculis at erat pellentesque.",
    "At augue eget arcu dictum varius duis at consectetur. Risus ultricies tristique nulla aliquet enim tortor. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Nulla posuere sollicitudin aliquam ultrices. Varius vel pharetra vel turpis nunc eget lorem. Tristique senectus et netus et malesuada fames ac turpis egestas. Lectus magna fringilla urna porttitor. Ac placerat vestibulum lectus mauris. Feugiat vivamus at augue eget arcu dictum varius duis at. Egestas dui id ornare arcu. Et malesuada fames ac turpis.",
    "Cras ornare arcu dui vivamus arcu. Facilisis mauris sit amet massa vitae tortor. Sed turpis tincidunt id aliquet risus feugiat in ante metus. Tincidunt vitae semper quis lectus nulla. Et ultrices neque ornare aenean euismod elementum nisi. Egestas sed tempus urna et pharetra. Auctor augue mauris augue neque. Dui sapien eget mi proin sed libero enim sed. Sit amet consectetur adipiscing elit ut aliquam purus. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Adipiscing elit pellentesque habitant morbi tristique senectus et. Magna eget est lorem ipsum dolor sit. Libero id faucibus nisl tincidunt eget nullam non.",
  ];

  let numberOfParagraphs = 1;

  const addPara = () => {
    data.map((el, i) => {
      if (i === numberOfParagraphs - 1) {
        const p = document.createElement("p");
        p.setAttribute("id", i);
        const node = document.createTextNode(el);
        p.appendChild(node);
        document.getElementById("text").append(p);
      }
    });
  };

  const removePara = () => {
    document.getElementById(numberOfParagraphs).remove();
  };

  document.getElementById("add-para").addEventListener("click", () => {
    if (numberOfParagraphs < 20) {
      numberOfParagraphs++;
      addPara();
    }
  });

  document.getElementById("remove-para").addEventListener("click", () => {
    if (numberOfParagraphs > 0) {
      numberOfParagraphs--;
      removePara();
    }
  });

  addPara();
</script>

You can try out the code above in this CodePen:

See the Pen Lorem Ipsum Generator by Bret Cameron (@BretCameron) on CodePen.

parent.html

We can now insert our iframe into parent.html.

Add the usual HTML5 boilerplate code, and then insert the following between the body tags:

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

But here we encounter our problem. Because we set overflow: hidden, the buttons and half of the first paragraph disappear.

And if we hadn’t set overflow: hidden we’d see two scroll-bars, as in the image above. To resolve this, we need to send post messages from child.html to the parent window!

child.html

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

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

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

When each of these events occurs, we’ll trigger a function called sendPostMessage.

Put the following code just before the closing script tag:

window.onload = () => sendPostMessage();
window.onresize = () => sendPostMessage();
document.getElementById("add-para").onclick = () => sendPostMessage();
document.getElementById("remove-para").onclick = () => sendPostMessage();

Now let’s create our sendPostMessage() function.

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

The following code should go above what we just wrote:

let height;
const sendPostMessage = () => {
  if (height !== document.getElementById("container").offsetHeight) {
    height = document.getElementById("container").offsetHeight;
    window.parent.postMessage(
      {
        frameHeight: height,
      },
      "*"
    );
    console.log(height); // check the message is being sent correctly
  }
};

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="ie=edge" http-equiv="X-UA-Compatible" />
    <title>Lorem Ipsum Generator</title>
  </head>

  <body>
    <div id="container">
      <div id="text"></div>
      <button id="add-para">+</button>
      <button id="remove-para">-</button>
    </div>
  </body>

  <style>
    html,
    body {
      margin: 0;
      overflow: hidden;
    }

    * {
      font-family: sans-serif;
    }

    #container {
      max-width: 700px;
      margin: 0 auto;
      border: 1px solid grey;
      border-radius: 5px;
      padding: 20px;
    }
  </style>
</html>

<script>
  const data = [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Dictum fusce ut placerat orci nulla pellentesque. Massa enim nec dui nunc mattis. Neque convallis a cras semper auctor neque vitae. Viverra nam libero justo laoreet. Eget mauris pharetra et ultrices neque. Neque viverra justo nec ultrices dui sapien. Ut venenatis tellus in metus vulputate eu scelerisque. Turpis in eu mi bibendum neque egestas. Cursus vitae congue mauris rhoncus.",
    "Est placerat in egestas erat imperdiet sed euismod nisi porta. Faucibus pulvinar elementum integer enim neque volutpat. Vel elit scelerisque mauris pellentesque. Magna eget est lorem ipsum. Sapien et ligula ullamcorper malesuada proin libero. Lectus magna fringilla urna porttitor. Elit scelerisque mauris pellentesque pulvinar. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Suspendisse potenti nullam ac tortor. Imperdiet nulla malesuada pellentesque elit eget gravida cum. Mollis aliquam ut porttitor leo a. Sem nulla pharetra diam sit amet nisl. Quam lacus suspendisse faucibus interdum posuere lorem ipsum. At volutpat diam ut venenatis tellus. Amet dictum sit amet justo. Urna molestie at elementum eu facilisis sed odio morbi quis. Ac orci phasellus egestas tellus.",
    "Id velit ut tortor pretium viverra suspendisse. Sed elementum tempus egestas sed. Mauris commodo quis imperdiet massa tincidunt nunc. Id ornare arcu odio ut. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Tellus id interdum velit laoreet id donec ultrices tincidunt. Quisque sagittis purus sit amet volutpat consequat mauris. Sit amet cursus sit amet dictum sit amet justo. Risus commodo viverra maecenas accumsan lacus vel. Laoreet id donec ultrices tincidunt arcu. Neque viverra justo nec ultrices. Massa placerat duis ultricies lacus sed turpis tincidunt. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Ut tellus elementum sagittis vitae et. Tempus urna et pharetra pharetra. Tincidunt vitae semper quis lectus nulla. At tempor commodo ullamcorper a lacus vestibulum sed. Mauris vitae ultricies leo integer.",
    "Nam at lectus urna duis convallis convallis tellus id interdum. Nunc sed velit dignissim sodales. Lectus vestibulum mattis ullamcorper velit. Duis at consectetur lorem donec. Velit egestas dui id ornare arcu odio ut. Quis varius quam quisque id diam vel quam elementum. Amet risus nullam eget felis eget nunc lobortis. Quam elementum pulvinar etiam non quam lacus. Mattis molestie a iaculis at erat. Mattis molestie a iaculis at erat pellentesque adipiscing. Convallis convallis tellus id interdum velit. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Amet dictum sit amet justo. Cras sed felis eget velit aliquet sagittis id consectetur purus. Nunc consequat interdum varius sit amet mattis vulputate enim. Morbi tincidunt augue interdum velit euismod. Tincidunt lobortis feugiat vivamus at augue eget arcu. Nulla aliquet enim tortor at auctor.",
    "Imperdiet nulla malesuada pellentesque elit eget gravida cum. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Convallis posuere morbi leo urna molestie at elementum eu. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Aliquam sem et tortor consequat. Odio aenean sed adipiscing diam donec adipiscing tristique. Ut diam quam nulla porttitor. Enim praesent elementum facilisis leo vel fringilla est ullamcorper. Vivamus at augue eget arcu dictum varius duis at. Odio aenean sed adipiscing diam donec. Quisque sagittis purus sit amet volutpat consequat mauris. Velit laoreet id donec ultrices. Iaculis urna id volutpat lacus laoreet non. Id neque aliquam vestibulum morbi blandit cursus risus. Laoreet id donec ultrices tincidunt. Mauris pharetra et ultrices neque ornare aenean. Aliquam etiam erat velit scelerisque in dictum. Mattis nunc sed blandit libero volutpat.",
    "Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Cursus sit amet dictum sit. Nisl purus in mollis nunc sed. Nullam ac tortor vitae purus faucibus ornare. Est sit amet facilisis magna etiam tempor orci. Adipiscing elit ut aliquam purus sit amet luctus. Quis varius quam quisque id diam. Enim sed faucibus turpis in eu. Ullamcorper eget nulla facilisi etiam dignissim diam. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sit amet porttitor eget dolor morbi non arcu risus quis. Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Turpis tincidunt id aliquet risus. Sollicitudin aliquam ultrices sagittis orci a scelerisque. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi.",
    "Imperdiet sed euismod nisi porta lorem mollis aliquam. Risus quis varius quam quisque id diam vel quam elementum. Id cursus metus aliquam eleifend. Nunc vel risus commodo viverra. In massa tempor nec feugiat nisl pretium fusce. Convallis tellus id interdum velit laoreet id. Id consectetur purus ut faucibus pulvinar elementum integer. Enim facilisis gravida neque convallis a. Id leo in vitae turpis massa sed. Tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra. Aenean sed adipiscing diam donec adipiscing tristique risus. Aliquam ut porttitor leo a diam sollicitudin. In pellentesque massa placerat duis ultricies.",
    "Sapien pellentesque habitant morbi tristique. Quis eleifend quam adipiscing vitae proin sagittis nisl. Commodo nulla facilisi nullam vehicula ipsum. Et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris vitae ultricies leo integer. Magna fermentum iaculis eu non diam phasellus vestibulum. Sit amet justo donec enim diam vulputate. Eu lobortis elementum nibh tellus molestie nunc non blandit. Sit amet facilisis magna etiam tempor orci eu. Cursus mattis molestie a iaculis at erat pellentesque adipiscing. Vitae justo eget magna fermentum iaculis eu non. Eget dolor morbi non arcu.",
    "Scelerisque viverra mauris in aliquam sem fringilla ut. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Risus feugiat in ante metus dictum at tempor. Felis donec et odio pellentesque diam volutpat commodo sed. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Egestas sed sed risus pretium. Non consectetur a erat nam. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Posuere ac ut consequat semper viverra nam libero justo laoreet. Velit dignissim sodales ut eu sem. Augue lacus viverra vitae congue eu. Et ultrices neque ornare aenean euismod elementum nisi quis. Eu nisl nunc mi ipsum. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Urna nunc id cursus metus aliquam eleifend mi in.",
    "Sit amet dictum sit amet justo donec enim diam. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Consequat nisl vel pretium lectus. Velit egestas dui id ornare. Orci porta non pulvinar neque. Eu non diam phasellus vestibulum lorem sed risus ultricies. Dolor sit amet consectetur adipiscing elit ut. Sed elementum tempus egestas sed sed risus pretium. Sit amet tellus cras adipiscing enim. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Nisi vitae suscipit tellus mauris a diam maecenas sed enim. Senectus et netus et malesuada. Mi quis hendrerit dolor magna eget est lorem ipsum. Nunc sed id semper risus. Tempor id eu nisl nunc mi ipsum faucibus. Semper risus in hendrerit gravida rutrum. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Vestibulum lorem sed risus ultricies.",
    "Ipsum consequat nisl vel pretium lectus quam id leo. Faucibus et molestie ac feugiat sed. Turpis nunc eget lorem dolor. Risus nullam eget felis eget nunc lobortis mattis aliquam. Accumsan lacus vel facilisis volutpat est velit. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Ac orci phasellus egestas tellus. Nec ultrices dui sapien eget mi proin. Duis convallis convallis tellus id interdum velit laoreet. Lacus sed viverra tellus in. Consectetur adipiscing elit ut aliquam purus. In cursus turpis massa tincidunt dui ut ornare. Neque sodales ut etiam sit amet nisl purus in. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec.",
    "Nec ullamcorper sit amet risus nullam. Aliquam sem fringilla ut morbi. Sapien et ligula ullamcorper malesuada proin libero nunc. Tortor at auctor urna nunc id cursus metus. Cras pulvinar mattis nunc sed. Risus nec feugiat in fermentum posuere urna nec. Nulla aliquet enim tortor at auctor. Sit amet dictum sit amet justo donec enim. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Eget velit aliquet sagittis id consectetur purus ut.",
    "Sit amet commodo nulla facilisi nullam vehicula ipsum a. Duis convallis convallis tellus id interdum. Tincidunt vitae semper quis lectus. Sit amet consectetur adipiscing elit duis tristique. Nunc sed blandit libero volutpat sed cras ornare arcu. Sapien eget mi proin sed libero enim sed faucibus turpis. Vitae congue eu consequat ac felis donec et odio. Cras pulvinar mattis nunc sed. Vitae et leo duis ut diam quam nulla. Quam nulla porttitor massa id. Tortor posuere ac ut consequat semper viverra nam. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Et molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris. Tempus quam pellentesque nec nam aliquam.",
    "Fusce ut placerat orci nulla pellentesque dignissim enim. Nunc sed id semper risus in hendrerit gravida rutrum. In hac habitasse platea dictumst. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Justo nec ultrices dui sapien eget mi proin sed libero. Dolor purus non enim praesent elementum facilisis leo vel. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Ut pharetra sit amet aliquam id diam maecenas. Commodo odio aenean sed adipiscing diam. Nunc vel risus commodo viverra maecenas. Proin sagittis nisl rhoncus mattis rhoncus urna. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Faucibus pulvinar elementum integer enim neque volutpat. Tortor dignissim convallis aenean et tortor at risus.",
    "Nibh cras pulvinar mattis nunc sed blandit. Sit amet venenatis urna cursus. Ipsum faucibus vitae aliquet nec ullamcorper. Purus in mollis nunc sed id semper risus. Venenatis lectus magna fringilla urna porttitor rhoncus. Est placerat in egestas erat imperdiet sed euismod. Fermentum dui faucibus in ornare quam viverra. In fermentum posuere urna nec tincidunt praesent semper. Tincidunt eget nullam non nisi est. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Urna et pharetra pharetra massa massa ultricies mi quis. Quis auctor elit sed vulputate mi sit. Sit amet mattis vulputate enim. Nullam non nisi est sit amet. Elementum curabitur vitae nunc sed velit. Odio morbi quis commodo odio. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Fringilla urna porttitor rhoncus dolor purus non enim praesent.",
    "Enim nec dui nunc mattis enim ut tellus elementum. Velit euismod in pellentesque massa placerat. Aliquam purus sit amet luctus venenatis lectus. Ac placerat vestibulum lectus mauris ultrices eros in. Interdum velit laoreet id donec ultrices. Tristique risus nec feugiat in fermentum posuere urna nec. Egestas sed tempus urna et pharetra pharetra massa. Ultrices vitae auctor eu augue ut lectus arcu. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Scelerisque felis imperdiet proin fermentum leo vel.",
    "Quis risus sed vulputate odio ut enim blandit volutpat. Nulla facilisi cras fermentum odio. Egestas erat imperdiet sed euismod nisi. Diam sollicitudin tempor id eu nisl nunc. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Convallis convallis tellus id interdum. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Morbi tincidunt augue interdum velit euismod in pellentesque. Massa placerat duis ultricies lacus sed turpis. Egestas integer eget aliquet nibh praesent. Mi proin sed libero enim sed faucibus turpis. Urna nec tincidunt praesent semper feugiat. Duis ut diam quam nulla porttitor massa id neque aliquam. Urna condimentum mattis pellentesque id nibh. Tellus rutrum tellus pellentesque eu tincidunt tortor.",
    "Varius quam quisque id diam vel. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Eget nunc scelerisque viverra mauris. Pretium lectus quam id leo in. Massa id neque aliquam vestibulum morbi. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Quis risus sed vulputate odio ut enim blandit. Dignissim cras tincidunt lobortis feugiat vivamus at augue. Velit dignissim sodales ut eu sem. Eget mi proin sed libero enim. Rhoncus aenean vel elit scelerisque mauris pellentesque. Ornare arcu odio ut sem nulla. Cursus mattis molestie a iaculis at erat pellentesque.",
    "At augue eget arcu dictum varius duis at consectetur. Risus ultricies tristique nulla aliquet enim tortor. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Nulla posuere sollicitudin aliquam ultrices. Varius vel pharetra vel turpis nunc eget lorem. Tristique senectus et netus et malesuada fames ac turpis egestas. Lectus magna fringilla urna porttitor. Ac placerat vestibulum lectus mauris. Feugiat vivamus at augue eget arcu dictum varius duis at. Egestas dui id ornare arcu. Et malesuada fames ac turpis.",
    "Cras ornare arcu dui vivamus arcu. Facilisis mauris sit amet massa vitae tortor. Sed turpis tincidunt id aliquet risus feugiat in ante metus. Tincidunt vitae semper quis lectus nulla. Et ultrices neque ornare aenean euismod elementum nisi. Egestas sed tempus urna et pharetra. Auctor augue mauris augue neque. Dui sapien eget mi proin sed libero enim sed. Sit amet consectetur adipiscing elit ut aliquam purus. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Adipiscing elit pellentesque habitant morbi tristique senectus et. Magna eget est lorem ipsum dolor sit. Libero id faucibus nisl tincidunt eget nullam non.",
  ];

  let numberOfParagraphs = 1;

  const addPara = () => {
    data.map((el, i) => {
      if (i === numberOfParagraphs - 1) {
        const p = document.createElement("p");
        p.setAttribute("id", i);
        const node = document.createTextNode(el);
        p.appendChild(node);
        document.getElementById("text").append(p);
      }
    });
  };

  const removePara = () => {
    document.getElementById(numberOfParagraphs).remove();
  };

  document.getElementById("add-para").addEventListener("click", () => {
    if (numberOfParagraphs < 20) {
      numberOfParagraphs++;
      addPara();
    }
  });

  document.getElementById("remove-para").addEventListener("click", () => {
    if (numberOfParagraphs > 0) {
      numberOfParagraphs--;
      removePara();
    }
  });

  addPara();

  let height;

  const sendPostMessage = () => {
    if (height !== document.getElementById("container").offsetHeight) {
      height = document.getElementById("container").offsetHeight;
      window.parent.postMessage(
        {
          frameHeight: height,
        },
        "*"
      );
      console.log(height);
    }
  };

  window.onload = () => sendPostMessage();
  window.onresize = () => sendPostMessage();
  document.getElementById("add-para").onclick = () => sendPostMessage();
  document.getElementById("remove-para").onclick = () => sendPostMessage();
</script>

parent.html

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

Whenever we resize the window, we should now see values appear in the console. The final step is to use these to set the iframe height whenever one of these values is sent.

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="ie=edge" http-equiv="X-UA-Compatible" />
    <title>Parent File</title>
  </head>

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

    <script>
      window.onmessage = (e) => {
        if (e.data.hasOwnProperty("frameHeight")) {
          document.getElementById("iframe").style.height = `${
            e.data.frameHeight + 30
          }px`;
        }
      };
    </script>
  </body>
</html>

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

Minification

As a final step, you could minify the above code so it’s easy for non-developers to copy and paste into their HTML:

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

If you host your child.html file online (using a service like GitHub or Netlify), you can then insert your new URL into the src property of the code above and send it to anyone. Anyone can now embed your content as a dynamic iframe!

I hope you’ve found this tutorial useful! Thanks for reading.

How To Automatically Resize an iframe

Introduction

The Problem

The Solution

The Code

child.html

parent.html

child.html

parent.html

Minification

Related articles