osvik · March 24, 2019 21:24
diff --git a/embedded.html b/embedded.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8" />
    <title>Embedded html document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
 </head>

 <body>
    <div id="iframeContentContainer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit scelerisque mauris pellentesque pulvinar pellentesque. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Ultrices mi tempus imperdiet nulla. Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Arcu dui vivamus arcu felis bibendum ut. Ultricies mi eget mauris pharetra et ultrices neque. Sagittis orci a scelerisque purus semper eget duis. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Quam id leo in vitae turpis massa sed elementum tempus. Interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Bibendum enim facilisis gravida neque convallis a cras. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu. Pellentesque sit amet porttitor eget dolor morbi. Aliquet nec ullamcorper sit amet risus nullam eget. Nunc faucibus a pellentesque sit amet porttitor.</p>
        <p>Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Risus feugiat in ante metus dictum at tempor commodo. At imperdiet dui accumsan sit amet. Mi eget mauris pharetra et ultrices neque ornare. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Egestas dui id ornare arcu odio ut sem nulla pharetra. Faucibus a pellentesque sit amet. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Ut ornare lectus sit amet est. Amet est placerat in egestas. Id interdum velit laoreet id donec ultrices. Turpis massa tincidunt dui ut ornare. Purus in mollis nunc sed id semper risus. Purus sit amet luctus venenatis lectus magna. Accumsan lacus vel facilisis volutpat est velit. Et molestie ac feugiat sed lectus.</p>
    </div>
    <script>
        /**
         * Passes the iframed page height to the parent. It must happen after the page stops rendering.
         */
        document.addEventListener("DOMContentLoaded", function() {
            var iframeContentContainerHeight = document.getElementById("iframeContentContainer").scrollHeight;
            var message = 'iframeContentContainerHeight:' + iframeContentContainerHeight;
            parent.postMessage(message, "*");
            window.onresize = function(ev) {
                var threshold = 5;
                var newIframeContentContainerHeight = document.getElementById("iframeContentContainer").scrollHeight;
                var containerHeightDiff = iframeContentContainerHeight - newIframeContentContainerHeight;
                if ( containerHeightDiff > threshold || containerHeightDiff < -threshold ) {
                    iframeContentContainerHeight = newIframeContentContainerHeight;
                    message = 'iframeContentContainerHeight:' + iframeContentContainerHeight;
                    parent.postMessage(message, "*");
                }
            }
        });
    </script>
 </body>

 </html>
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8" />
    <title>Inserting a responsive iframe in a page</title>
 </head>

 <body>

    <h1>Inserting a responsive iframe in a page</h1>

    <div style="width: 50%;">

        <!-- START EMBED IFRAME -->
        <iframe src="embedded.html" id="responsiveIframe" style="border: 0; width: 100%; overflow: hidden;"></iframe>
        <script>
            /**
             * Gets the iframe height from the embedded html and applies it to the parent.
             */
            window.addEventListener("message", function(e) {
                if ((typeof e.data === 'string') && (e.data.indexOf('iframeContentContainerHeight:') > -1)) {
                    var responsiveIframeHeight = Number(e.data.split('iframeContentContainerHeight:')[1]);
                    document.getElementById('responsiveIframe').height = responsiveIframeHeight + 40 + 'px';
                }
            }, false);
        </script>
        <!-- END EMBED IFRAME -->
    </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Embedded html document</title>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>

	<body>
	<div id="iframeContentContainer">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit scelerisque mauris pellentesque pulvinar pellentesque. Mollis nunc sed id semper risus in hendrerit gravida rutrum. Ultrices mi tempus imperdiet nulla. Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Arcu dui vivamus arcu felis bibendum ut. Ultricies mi eget mauris pharetra et ultrices neque. Sagittis orci a scelerisque purus semper eget duis. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Quam id leo in vitae turpis massa sed elementum tempus. Interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Bibendum enim facilisis gravida neque convallis a cras. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu. Pellentesque sit amet porttitor eget dolor morbi. Aliquet nec ullamcorper sit amet risus nullam eget. Nunc faucibus a pellentesque sit amet porttitor.</p>
	<p>Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Risus feugiat in ante metus dictum at tempor commodo. At imperdiet dui accumsan sit amet. Mi eget mauris pharetra et ultrices neque ornare. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Egestas dui id ornare arcu odio ut sem nulla pharetra. Faucibus a pellentesque sit amet. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Ut ornare lectus sit amet est. Amet est placerat in egestas. Id interdum velit laoreet id donec ultrices. Turpis massa tincidunt dui ut ornare. Purus in mollis nunc sed id semper risus. Purus sit amet luctus venenatis lectus magna. Accumsan lacus vel facilisis volutpat est velit. Et molestie ac feugiat sed lectus.</p>
	</div>
	<script>
	/**
	* Passes the iframed page height to the parent. It must happen after the page stops rendering.
	*/
	document.addEventListener("DOMContentLoaded", function() {
	var iframeContentContainerHeight = document.getElementById("iframeContentContainer").scrollHeight;
	var message = 'iframeContentContainerHeight:' + iframeContentContainerHeight;
	parent.postMessage(message, "*");
	window.onresize = function(ev) {
	var threshold = 5;
	var newIframeContentContainerHeight = document.getElementById("iframeContentContainer").scrollHeight;
	var containerHeightDiff = iframeContentContainerHeight - newIframeContentContainerHeight;
	if ( containerHeightDiff > threshold \|\| containerHeightDiff < -threshold ) {
	iframeContentContainerHeight = newIframeContentContainerHeight;
	message = 'iframeContentContainerHeight:' + iframeContentContainerHeight;
	parent.postMessage(message, "*");
	}
	}
	});
	</script>
	</body>

	</html>