1. Home
    2. »
  2. Javascript
    3. » Automatic iFrame Sizing

Automatic iFrame Sizing

Javascript
admin

To add a second JavaScript code to allow embedding and auto-resizing of remote iframed pages, you can use the postMessage API to communicate between the iframe and the parent page. Below is an example of how you can achieve this.

Automatic iFrame Sizing is easy!

On the remote site (iframe content):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Content</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        function sendDimensions() {
            const height = document.body.scrollHeight;
            const width = document.body.scrollWidth;
            parent.postMessage({ height, width }, '*');
        }

        window.onload = sendDimensions;
        window.onresize = sendDimensions;
    </script>
</head>
<body>
    <!-- Your iframe content goes here -->
    <h1>Iframe Content</h1>
    <p>This is an example of iframe content that will be resized automatically.</p>
</body>
</html>

On the parent site (site serving the content with iframe):

<iframe 
    id="my-iframe" 
    src="https://remote-site.com/iframe-content.html" 
    style="width:400px; height:200px; border:none; outline:3px dotted #ccc; overflow:hidden;" 
    scrolling="no">
</iframe>

<script type="text/javascript">
function adjustIframeDimensions(event) {
    if (event.origin !== "https://remote-site.com") {
        return;
    }

    const iframe = document.getElementById("my-iframe");
    iframe.style.height = event.data.height + "px";
    iframe.style.width = event.data.width + "px";
}

window.addEventListener("message", adjustIframeDimensions, false);
</script>

In this example, the remote site sends its dimensions to the parent site using postMessage. The parent site listens for the message and adjusts the iframe dimensions accordingly. Make sure to replace "https://remote-site.com/iframe-content.html" with the actual URL of your remote iframe content.

This approach ensures that the iframe content is resized automatically, even if it comes from a different domain.

If you are using the same domain to serve the main page and also the iframed page, this code should serve you well:

<iframe 
   id="my-iframe" 
   src="./terryjett/example.html" 
   style="width:400px; height:200px; border:none; outline:3px dotted #ccc; overflow:hidden;" 
   onload="AdjustIframeDimensions()"
   scrolling="no">
</iframe>

<script type="text/javascript">
function AdjustIframeDimensions() {
   try {
      let iframe = document.getElementById("my-iframe");
      requestAnimationFrame(() => {
         iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
         iframe.style.width = iframe.contentWindow.document.body.scrollWidth + "px";
      });
   } catch (error) {
      console.error("Error adjusting iframe dimensions:", error);
   }
}
</script>

Added improvements:

  • Debouncing the Resize Function: If the content inside the iframe changes frequently, you might want to debounce the resize function to avoid excessive resizing.

  • Error Handling: Adding error handling can make your code more robust.

  • Using requestAnimationFrame: This can help make the resizing smoother.

Hope this simple code makes your "iframe life" better and thanks for reading.

Tags