Dynamically Resizing Cross-Domain IFrames

In the age of embedded content and third-party integrations, iframes have become an essential tool for web developers. They allow us to embed content from one site into another seamlessly. However, one common challenge is resizing the iframe to fit its content, especially when dealing with cross-domain iframes, and framed content that should change the size of the page over time.

Note that to use this technique, both the parent and the third-party child web site must have code to communicate with each other. All modern browsers enforce this.

Step 1: Embed the Iframe

<iframe id="myIframe" src="https://example.com/iframe-content" width="420" height="1024" style="width:100%;border:0;overflow:hidden;" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Note that the scroll bar is hidden in this iframe to prevent it flashing when the internal content changes size.

Step 2: Set Up the Parent Window

<script>
    window.addEventListener('message', function(event) {
        if (event.origin !== 'https://example.com') return;
        var iframe = document.getElementById('myIframe');
        iframe.style.height = event.data.height + 'px';
    }, false);
</script>

Step 3: Implement the Iframe Content

<script>
    window.addEventListener("DOMContentLoaded", function () {
        setInterval(function () {
            var height = document.body.scrollHeight;
            window.parent.postMessage({height: height}, document.referrer);
        }, 250);
    });
</script>

Note that this script posts an update every 1/4 second to handle dynamic page size changes in a responsive manner at a reasonable rate.

Conclusion

Dynamically resizing cross-domain iframes is a common challenge that can be effectively addressed using the postMessage method. By combining this method with some simple JavaScript code, we can create a responsive and user-friendly experience, allowing the iframe to adjust its height based on its content.

This approach ensures a seamless integration of third-party content and enhances the overall usability of the website. It demonstrates the flexibility and power of modern web development techniques, providing a robust solution for one of the more nuanced challenges in front-end development.