Skip to content
Crossdomain iframe height resizing
HTML JavaScript
Find file
Latest commit ac687ba @jhnlsn Update
demo link no longer valid

Iframe Height

Iframe height is a simple tool to allow cross domain messaging, specifically iframe height resizing for responsive designs.


Add the parent.js file to your containing page and the child.js to the contained page.

In the parent page make a call to:


Config options defined below.

In the child page, make a call to messageParent() from your document ready function or window onload function. The the messageParent function tries to use the document.scrollHeight to get the height of the document, but this is not always going to be the case for everyone. You might just want to get the height of a given element or body using jquery or other selector.

Config Options

Options : {
    src : '' // The source url that the iframe is going to load
    element : '' // The id of the element that the iframe will be rendered into
    domain : '' // Used for security purposes to validate where the message is coming from.  When you have some control of the parent and child you will want to set this. See demo.


window.onload = function() {
        src : '',
        domain : '',
        element : 'embed'


IframeResize is © 2011 John Nelson and is licensed under the terms of GPL & MIT licenses.

Something went wrong with that request. Please try again.