Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

Dynamiczne dostosowanie rozmiaru iframe w zależności od wysokości treści

Bret Cameron Digital Consultant / Concurrent Design Group
Poznaj problemy z dynamicznym dostosowaniem rozmiaru iframe w zależności od wysokości jego treści i sprawdź, jak możesz sobie z nimi poradzić.
Dynamiczne dostosowanie rozmiaru iframe w zależności od wysokości treści

<iframe> umożliwia osadzanie jednej strony HTML w drugiej. Dzięki iframe możesz osadzić film z YouTube na swojej stronie, a Google używa ramek np. do uwierzytelniania Oauth2. Używają go również firmy SaaS, takie jak Mailchimp, Typeform i Outgrow, które oferują treści do osadzenia. Jednak iframe może być niestety problematyczny. W tym artykule omówię jeden z takich problemów.


Problem

iframe ma domyślnie stałą wysokość. To dobrze, jeśli Twoja treść również ma z góry ustaloną wysokość, ale jeśli wysokość treści się zmienia, to możesz skończyć z czymś takim:


A co jeśli chcielibyśmy, aby nasz iframe zachowywał się jak zwykły element HTML, którego wysokość odpowiada treści? Aby to zrobić, musielibyśmy dynamicznie zmieniać wysokość iframe, ale ze względów bezpieczeństwa okno nadrzędne nie ma dostępu do elementów w iframe. W tym artykule wyjaśnię niezawodny sposób osiągnięcia tego efektu za pomocą vanilla JavaScript.


Rozwiązanie

Za pomocą metody window.postMessage() możemy bezpiecznie komunikować się między iframe a oknem nadrzędnym. W ten sposób można wysłać wartość wysokości z elementu iframe do okna nadrzędnego. Następnie w oknie nadrzędnym możemy ustawić prosty skrypt, aby dynamicznie aktualizować wysokość iframe.


Kod

Potrzebujemy dwóch plików HTML: pliku nadrzędnego, w którym umieszczamy element iframe, oraz pliku podrzędnego z zawartością elementu iframe.


child.html

Nasz plik child będzie zawierał prosty generator tekstu, w którym będzie można kliknąć przycisk, aby dodać kolejny akapit tekstu lorem ipsum. Ponieważ mówimy tutaj o elemencie iframe, a nie o tym, co jest w nim zawarte, to możesz po prostu skopiować i wkleić następujące elementy do 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>

Możesz zobaczyć powyższy kod w akcji w CodePen.


parent.html

Możemy teraz wstawić nasz iframe do parent.html. Dodaj parę linijek, by zrobić poprawny dokument HTML5:

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

Ale tutaj spotykamy się z jednym z problemów — ponieważ ustawiliśmy overflow: hidden, to przyciski oraz połowa pierwszego akapitu znikają. A gdybyśmy nie ustawili overflow: hidden, to zobaczylibyśmy dwa paski przewijania tak jak na powyższym obrazku. Aby rozwiązać ten problem, musimy wysłać wiadomości z child.html do okna nadrzędnego.


child.html

Wracając do child.html, musimy dodać nowe detektory zdarzeń do sekcji script. Trzeba też powiadomić element nadrzędny o wysokości elementu iframe:

  • za każdym razem, gdy się ładuje,
  • za każdym razem, gdy zmienia się rozmiar okna, oraz
  • za każdym razem, kiedy naciskamy przycisk.


Gdy zetkniemy się z jednym z powyższych zdarzeń, to uruchamiamy funkcję o nazwie sendPostMessage. Umieszczamy następujący kod tuż przed tagiem zamykającym <script>:

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


Stwórzmy teraz naszą funkcję sendPostMessage().

Chcemy zmierzyć wysokość elementu o id container. Jeśli (i tylko jeśli) wysokość się zmieni, to wysyłamy wiadomość o nazwie frameHeight do okna nadrzędnego, zawiadamiając je o aktualizacji. Poniższy kod powinien wykraczać poza to, co właśnie napisaliśmy:

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
  }
}


Drugi argument metody postMessage reprezentuje nazwę hosta, do którego to adresujemy wiadomość. Jest to przydatne ze względów bezpieczeństwa, ponieważ upewniamy się, że wiadomość została wysłana tylko do określonych domen, ale testowo możemy ustawić to na „*”. Oznacza to, że każde okno nadrzędne otrzyma naszą wiadomość.

Kod child.html powinien więc wyglądać następująco:

<!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

Załaduj parent.html w przeglądarce i otwórz konsolę (naciśnij ctrl + shift + J w Google Chrome). Ilekroć zmieniamy rozmiar okna, powinniśmy też widzieć, jak wartości pojawiają się w konsoli. Ostatnim krokiem będzie użycie ich do ustawienia wysokości iframe za każdym razem, gdy okno otrzyma wiadomość z nową wysokością. Musimy nasłuchiwać nadejścia nowych wiadomości i za każdym razem, gdy je otrzymamy, powinniśmy ich użyć, aby ustawić właściwość height elementu iframe (z dodatkowym małym marginesem):

<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>

Plik parent.html powinien zatem wyglądać następująco:

<!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>


Jeśli poprawnie wykonało się powyższe kroki, to iframe zmieni się automatycznie, zupełnie jakby jego zawartość była częścią okna nadrzędnego.


Minifikacja

Na koniec można zminifikować powyższy kod, aby osoby niebędące programistami były w stanie go łatwo kopiować i wklejać do swojego kodu 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>

Jeśli hostujesz plik child.html online (korzystając z usługi takiej jak GitHub lub Netlify), możesz wrzucić nowy adres URL do właściwości src powyższego kodu i wysłać go do dowolnej osoby. Każdy może teraz osadzać Twoje treści jako dynamiczny iframe.

Mam nadzieję, że ten tekst Ci się w jakiś sposób przyda. Dzięki za uwagę!

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej