Getting height of an iframe

Question

I'm building a dialog whose content is an iframe. When the dialog opens I have the following code that I pulled from various sources in attempting to make this work:

var iframeDOM = document.createElement("IFRAME"); 
iframeDOM.setAttribute("frameborder", "0"); 
iframeDOM.setAttribute("scrolling", plugin.settings.scrolling ? "" : "no"); 
iframeDOM.setAttribute("allowtransparency", isIE ? "true" : ""); 



var setDimensions = function(){
                        console.log("load");
                        var iframeWin = iframeDOM.contentWindow || iframeDOM.contentDocument.parentWindow;
                        if (iframeWin.document.body) {
                            console.log("new height: " + iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight); //Not giving real height, always 0
                            console.log("new client height: " + iframeWin.document.documentElement.clientHeight); 
                            iframeDOM.height = 550;
                            iframeDOM.width  = 550;
                        }

                    };

                    $(iframeDOM).load(setDimensions)
                                .appendTo($element.children().first())
                                .attr({ src: plugin.settings.href, name: new Date().getTime() });

As you can see I was attempting to log the height of the iFrame but it always prints 0 (as temporary workaround I'm setting the dimensions statically)

EDIT: Another solution which I've updated this OP with returns the error:

 Error: Permission denied to access property 'document' if (iframeWin.document.body) {

Maybe help you, http://stackoverflow.com/questions/5087278/how-to-get-the-height-of-an-iframe-with-javascript-from-inside-the-iframe-what — Felipe Oriani, Sep 12 '13 at 13:29
I just tried clientHeight , which I added to OP , and also returns 0 :( — parliament, Sep 12 '13 at 13:36
Check also this link http://stackoverflow.com/questions/3846132/jquery-get-height-of-iframe-content-when-loaded — Charaf JRA, Sep 12 '13 at 13:38
@FaceOfJock for that answer I get Error: Permission denied to access property 'document' if (iframeWin.document.body) { ... I updated OP — parliament, Sep 12 '13 at 13:46

Ganesh Pandhere · Accepted Answer · 2013-09-12T13:41:44.467

0

Iframe does not automatically take height and width. You need to define it manually, hence it is only possible through javascript to catch the actual height of page loading into iframe and assign it as a height for iframe. But this approach will create instability.

UPDATE

calculate the height of page using .height() function and assign it to the iframe. It will work this way.

edited Sep 12 '13 at 13:41

answered Sep 12 '13 at 13:31

Ganesh Pandhere

1,612
8
11

I'm doing it through javascript as you can see. Why do you say it will create instability? – parliament Sep 12 '13 at 13:32
It will first load your iframe with default values for height and width, then it will load the page and calculate the height of that page and then assign back to your iframe which will result in dancing iframe. – Ganesh Pandhere Sep 12 '13 at 13:36
That's ok, it's hidden at first and I show it after assigning dimensions. Unfortunately I don't see another way as it's currently loading into a tiny area and clipping the rest. – parliament Sep 12 '13 at 13:38

score 0 · Answer 2 · edited Dec 21 '13 at 23:53

Here's something I found that works pretty good. I think it needs tweaking but I'm not good with JavaScript.

<script language="JavaScript">
<!--
function autoResize(id){
  var newheight;
  var newwidth;

if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
}

document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<iframe name="content" src="http://my-domain.com/home.html" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');">
</iframe>

Getting height of an iframe

2 Answers2