Section 1

this is the contents of the iframe. Click here to randomize page content and force its height to change.

When the iframe is loaded inside the parent frame, its height is assigned or calculated, and will not automatically adjust to size of the embedded content. This causes the framed window to display a scroll bar when the content grows in height beyond the height set on the iframe in the parent window.

To resolve this issue, we need to notify the parent window when the height of contents within the iframe change.

Detecting change in content height can be done using the ResizeObserver Api, however this API is not supported by internet explorer.

As an alternative, we can simply poll the content height periodically to detect content changes. This example uses polling:

                    
                        const extraPadding = 40;
                        const pollingIntervalmillis = 1000;
                        let lastHeight = 0;
                        const checkHeight = function (callback) {
                            newHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight) + extraPadding;
                            if (lastHeight !== newHeight) {
                                callback(newHeight, () => {
                                    lastHeight = newHeight;
                                    setTimeout(() => checkHeight(callback), pollingIntervalmillis);
                                });
                            } else {
                                setTimeout(() => checkHeight(callback), pollingIntervalmillis);
                            };
                        }

Once a change in content height is detected, we must notify the top level window of this change, so it can resize the iframe accordingly. we can do so using any of following methods

Section 2

Use window.postMessage() method to safely send a message from the iframe to the parent window to notify it of change in content hieght.

                            
        targetWindow = window.parent;
        targetWindow.postMessage({ type: 'IFRAME_RESIZED', height }, '*');

Embed a second, hidden iframe from the parent page's domain with no contents within the first iframe, and pass the height to it as a query strnig paremet. Since this iframe is loaded from the same domain as the top level window, it can safely call a function directly on the page to notify it of a change in content height. 

                            
        <iframe
            id="hiddenIframe"
            name="hiddenIframe"
            width="1"
            height="1"
            style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></iframe>
                            
                        
                            
        const hiddenIframePath = 'https://s3.amazonaws.com/'
            + 'iframetest-domain1.transmissionmedia.ca/hiddeniframe.html';
        const iframe = document.getElementById('hiddenIframe');
        iframe.src = `${path}?height=${height}`;

Once the hidden iframe loads, it can call a function on the top frame (from the same domain) to resize the iframe:

                            
        var height = getFirstParam();
        
        //call a function in the parent page which hosts the page. since it's the host page of the page, it is able to resize the iFrame.
        //alert('hidden frame: ready to resize');
        window.top.resizeIframe(height);

Without notifying the parent page when the content height changes, we will get the double scroll bars

Randomly generated dynamic content

A bit of text.