Make iframe automatically adjust height according to the contents without using scrollbar?

html

iframe-resizing

responsive

cross-domain

byAnton Shumikhin·Aug 5, 2024

Use window.postMessage to enable dynamic height adjustment for your iframe. Create an onload event in the parent window to listen for height messages. The iframe needs to postMessage its current height back to the parent window after content loads.

Parent page:

<iframe src="content.html" id="iframe" onload="resizeIframe(this)" style="width:100%;"></iframe>
<script>
function resizeIframe(iframe) {
  // Adding a super attentive security guard!
  window.addEventListener('message', (e) => {
    // "He listens only to trusted sources!"
    if (e.origin === "https://trustedsource.com") {
      // "Bingo! He found the new height!"
      iframe.style.height = e.data + 'px';
    }
  }, false);
}
</script>

Content in iframe (inner.html):

<script>
function sendHeight() {
  // "Now, we need our chief to measure the new height!"  
  var height = document.documentElement.scrollHeight;
  // "Chief: 'Parent page, height is here!'"
  parent.postMessage(height, "https://parentpage.com");
}
window.onload = sendHeight; 
// Chief: 'Everyone in position! When window loads, send height!'
</script>

Replace https://trustedsource.com and https://parentpage.com with your real domains for security. This technique will provide your iframe a perfectly fitted pair of jeans, dynamically resized to its content's height!

Handling cross-domain resizing

When working across different domains, resizing iframes based on content can become a puzzle due to security restrictions. The awesome iframe-resizer library comes to rescue by handling iframe communication across domains securely and fashionably!

Secure resizing

To ensure a secure resizing experience, using the sandbox attribute with allow-same-origin flag is advisable. It flips a special switch to allow iframe document to act as if it's from the same origin as the parent, maintaining sandbox security and facilitiating resizing.

Taking care of the iframe's life events

Managing dynamic content

If your iframe keeps changing — say, it's a bit hyperactive — using inline event handlers like onload might not be enough. In these cases, iframe-resizer becomes even more handy as it adjusts the iframe height in response to changes in DOM.

Trick of the trade — the zero-height strategy

Try this simple trick: Set the height to '0px' before calculating the new height. This ensures that the scroll height includes only the height of the content, excluding any extra space from a previously larger content serving a zeroed base height:

iframe.style.height = '0px';  
// Frame goes, "Time for a diet, let me shrink!"

iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px'; 
// Now frame screams, "Bring on the carbs, I'm back to original size!"

Browser's special needs

Each browser comes with its own special needs while handling iframe resizing. Especially when dealing with complex styles and JavaScript interactions, make sure testing across multiple browsers like Safari is a part of your QA checklist to ensure that your iframe behaves!

Keeping it tidy

To create visually appealing iframes, prevent them from having default borders and scroll bars by setting the frameborder attribute to 0 and the scrolling attribute to auto. Every pixel matters to create a seamless integration into the parent page!

Beyond resizing - responsibilities of a well-behaved iframe

Keep it clean with external scripts

To use scripts effectively and still maintain a clean codebase, avoid inline JavaScript. Instead, utilize external scripts and class-based selectors to handle the dynamic resizing of iframes.

If jQuery's your thing

For jQuery enthusiasts, here's how you can set the iframe height based on the content within. This is better suited when the content inside the iframe is from the same domain.

$('#iframe').on('load', function() {
   // Iframe on a mission, says, "Let's get to height fitting!"
  $(this).height($(this).contents().find("body").height());
});

Make it responsive

Ensure your iframe shrinks and grows graciously with different screen sizes. Set its width as a percentage, and let the height adjust based on the content. This way, your iframe is responsive, and stays friendly with devices of all shapes and sizes!

explain-codes / Html / Make iframe automatically adjust height according to the contents without using scrollbar?

Linked

Adjust width and height of iframe to fit with content in it



Full-screen iframe with a height of 100%



Textarea Auto height



How do you give iframe 100% height



How can I scale the content of an iframe?

