jquery get height of iframe content when loaded

Question

I have a Help page, help.php that I am loading inside an iframe in main.php How can I get the height of this page once it has loaded in the iframe?

I am asking this because I can't style the height of to iframe to 100% or auto. That's why I think I need to use javascript.. I am using jQuery

CSS:

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS:

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

Is the content of the iFrame coming from the same domain as the page it's in? — Andrew, Oct 02 '10 at 14:40
yes it is andrew, I want to use an iFrame because I use anchors in the help page — FFish, Oct 02 '10 at 14:46

FFish · Accepted Answer · 2010-10-04T05:29:16.533

108

ok I finally found a good solution:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src.

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}

edited Oct 04 '10 at 05:29

answered Oct 03 '10 at 21:04

FFish

10,964
34
95
136

this solution works great as the above just gets the size from the iframes cocntent within the container while this gets the `real` size – rickyduck Nov 17 '11 at 12:02
2

I believe the load event triggers on the same event loop so a setTimout of 1 millisecond will work just as well – George Mauer Jan 11 '13 at 15:31
hhmmm Anyone know how to get the height of an iframe that's hidden at the time of loading the parent. This method brings back 0. – JT... Mar 01 '13 at 08:07
1

You may want the `document` height, not the `body` height. Using jQuery you can grab it with `$(this.contentWindow.document).height()`. – vpiTriumph Oct 31 '13 at 19:18
To older ie, iframe.contentDocument.body.offsetHeight will work. http://stackoverflow.com/questions/2684693/iframe-document-body-scrollheight-is-double-the-correct-value – user1087079 Apr 26 '16 at 08:27
I preferr scrollHeight instead of offsetHeight see [this SO](https://stackoverflow.com/q/22675126/234110) for details – Anand Rockzz Jan 07 '18 at 23:08
In my tests (both in Firefox and Chrome) the 3 lines about Opera & Safari needing a kick-start cause the $('iframe').load() to be triggered again, which executes the 3 lines about Opera and Safari again, which triggers the load(), etc, resulting in an infinite loop. Since it's a rather old answer, I'm not sure those 3 lines are still necessary today. – s427 Aug 22 '18 at 10:44
3

When I run this I'm getting `Uncaught DOMException: Permission denied to access property "document" on cross-origin object` – Brady Dowling Jul 22 '21 at 14:54

Andrew · Answer 2 · 2010-10-03T01:44:36.373

The less complicated answer is to use .contents() to get at the iframe. Interestingly, though, it returns a different value from what I get using the code in my original answer, due to the padding on the body, I believe.

$('iframe').contents().height() + 'is the height'

This is how I've done it for cross-domain communication, so I'm afraid it's maybe unnecessarily complicated. First, I would put jQuery inside the iFrame's document; this will consume more memory, but it shouldn't increase load time as the script only needs to be loaded once.

Use the iFrame's jQuery to measure the height of your iframe's body as early as possible (onDOMReady) and then set the URL hash to that height. And in the parent document, add an onload event to the iFrame tag that will look at the location of the iframe and extract the value you need. Because onDOMReady will always occur before the document's load event, you can be fairly certain the value will get communicated correctly without a race condition complicating things.

In other words:

...in Help.php:

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

...and in the parent document:

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Hi Andrew so far very good help here. contents() works great, but I still need to test it with a bandwidth throttler. Maybe you can use the innerHeight() property. I have a problem in FF (OSX) using your solution putting the height in the hash. FF seems to keep on loading the getDocumentHeight() function in an infinitive loop? Safari is fine.. — FFish, Oct 02 '10 at 20:54
Interesting. I've added a check that prevents the setting of the hash if there's already a value there. You may need to tweak this if you are loading Help.php with a hash value (e.g. ``) — Andrew, Oct 03 '10 at 01:46
By the way, Assuming you can adjust for the difference in height, you probably needn't use the hash to communicate out of the iframe. If you do use the hash method, putting a `sleep(5)` in your Help.php should also be a good way of testing for any race conditions. If the iframe does somehow fire `onLoad` before `onDOMReady`, it should show up here. — Andrew, Oct 03 '10 at 01:58

score 26 · Answer 3 · answered Sep 11 '14 at 06:09

26

I found the following to work on Chrome, Firefox and IE11:

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

When the Iframes content is done loading the event will fire and it will set the IFrames height to that of its content. This will only work for pages within the same domain as that of the IFrame.

answered Sep 11 '14 at 06:09

Jack Zach Tibbles

800
1
11
27

works ok but for the width i have to do it like this or the contents gets cut $('iframe').width($('iframe').contents().width()+30); – Geomorillo Dec 09 '14 at 19:59
@AminGhaderi Works fine for me in firefox 40.0.3 – mixkat Sep 09 '15 at 18:25
@mixkat i do load a website in iframe via this solution and all solution in this topic but for me not work! i think this solutions do work for one page and do not work when we load complete a website into the iframe. my english is very bad , I hope you will understand. – Amin Ghaderi Sep 09 '15 at 20:18
@AminGhaderi if I got this right you re expecting this to work for every page in your site but of course this won't work for all pages as it only runs once when you load the frame. So it'll work for the first page fine but then if you want it to work for longer pages you will have to do it again either by loading the frame again with the new page or by calling the contents.height at some other point in your flow – mixkat Sep 10 '15 at 21:37

score 10 · Answer 4 · answered Sep 02 '16 at 14:51

10

The code to do this without jQuery is trivial nowadays:

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

To unhook the event:

frame.removeEventListener('load', syncHeight)

answered Sep 02 '16 at 14:51

cchamberlain

17,444
7
59
72

5

Nice and simple! Unfortunately not work for cross-domain iframes :( – TimoSolo Mar 22 '18 at 22:17
3

Yeah out of luck there. I'd leverage iframe-resizer library for that. Of course you need to be in control of both domains for it to work. – cchamberlain Mar 22 '18 at 22:34

RkaneKnight · Answer 5 · 2012-01-26T18:44:38.600

6

You don't need jquery inside the iframe to do this, but I use it cause the code is so much simpler...

Put this in the document inside your iframe.

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

added five above to eliminate scrollbar on small windows, it's never perfect on size.

And this inside your parent document.

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

edited Jan 26 '12 at 18:44

answered Jan 26 '12 at 18:37

RkaneKnight

95
1
2

This also won't work if you are displaying a PDF within the iframe. – Jason Foglia Mar 01 '14 at 04:19
1

Sorry but your example "inside frame" is clearly jQuery based. – T-moty Jun 04 '19 at 08:16

score 5 · Answer 6 · answered Mar 25 '19 at 00:40

simple one-liner starts with a default min-height and increases to contents size.

<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

score 4 · Answer 7 · answered Feb 15 '18 at 20:23

this is the correct answer that worked for me

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });

score 4 · Answer 8 · answered May 14 '18 at 19:34

Accepted answer's $('iframe').load will now produce a.indexOf is not a function error. Can be updated to:

$('iframe').on('load', function() {
  // ...
});

Few others similar to .load deprecated since jQuery 1.8: "Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

score 2 · Answer 9 · answered Jun 04 '20 at 22:57

This is my ES6 friendly no-jquery take

document.querySelector('iframe').addEventListener('load', function() {
    const iframeBody = this.contentWindow.document.body;
    const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight);
    this.style.height = `${height}px`;
});

score 1 · Answer 10 · answered May 07 '20 at 14:20

This's a jQuery free solution that can work with SPA inside the iframe

document.getElementById('iframe-id').addEventListener('load', function () {
  let that = this;
  setTimeout(function () {
    that.style.height = that.contentWindow.document.body.offsetHeight + 'px';
  }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate
});

score 0 · Answer 11 · answered Oct 02 '21 at 13:45

Here is my solution, using pure JS for finding the total height of iframe content. NOTE:

Call this function after the iframe is loaded.

The iframe content must be in the same domain as the host page.

 function getIframeBodyTotalHeight() {
 var frm = document.getElementById("appframe");
 var frm_body = frm.contentWindow.document.body;

 var body_height = parseInt(frm_body.offsetHeight);
 var body_margin_top = parseInt(window.getComputedStyle(frm_body).getPropertyValue('margin-top').replace("px",""));
 var body_margin_bottom = parseInt(window.getComputedStyle(frm_body).getPropertyValue('margin-bottom').replace("px",""));
 var body_padding_top = parseInt(window.getComputedStyle(frm_body).getPropertyValue('padding-top').replace("px", ""));
 var body_padding_bottom = parseInt(window.getComputedStyle(frm_body).getPropertyValue('padding-bottom').replace("px", ""));

 var result = body_height + body_margin_top + body_margin_bottom + body_padding_top + body_padding_bottom;
 return result;
}

jquery get height of iframe content when loaded

11 Answers11

Linked