1

I have iframe with content like below, 

    <iframe  frameborder="no" src="http:localhost/com" id="iframe">
     <div style="height:850px;width:700px;">div text </div>
   </iframe>

This shows the iframe with hori. and vertical scroll but not the height on inner content of 850px.

how can i change the iframe height dynamiclly based on inner content height n width. Im using jquery inside the content.

Its cross domain js widget so most of the below answers throwing permission denied error

Thanxs, Nithish

Nithish
  • 253
  • 2
  • 4
  • 16
  • possible duplicate of [How to auto-size an iFrame?](http://stackoverflow.com/questions/247128/how-to-auto-size-an-iframe) Also, check [this one](http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content). – Nikita Rybak Oct 12 '10 at 09:26
  • One cross-domain solution is described in my second link. But imho, it's better to get rid of iframe and switch to script tag. – Nikita Rybak Oct 12 '10 at 11:19

5 Answers5

2
var newHeight = $("iframe[id='iframeAutenticador']").contents().find("html").height();
$("iframe[id='iframeAutenticador']").height(newHeight);

use this.

Sergey Glotov
  • 20,200
  • 11
  • 84
  • 98
Marcelo
  • 21
  • 2
2

Nithish,

if you are using jquery, then you can easily find (and set) the height of any div (in your domain - not on external content) as such:

// get the height - in case we want to factor it into the equation below!!
var myDivHeight = $('iframe').css('height');

// set the height
var docHeight = $(document).css('height');
$('iframe').css('height', docHeight);

hope this helps ...

jim tollan
  • 22,305
  • 4
  • 49
  • 63
  • Hi its javascript widget inside that im loading an iframe we can place tht widget anywhere – Nithish Oct 12 '10 at 09:56
  • well, as long as you have the id of the main containing div of the 'widget', the logic still remains with a minor change. i.e. use $('#idWidgetcontainer').css('height', docHeight); instead. – jim tollan Oct 12 '10 at 09:59
  • ok, is this widget definately from inside your own domain?? (see my little bit above [(in your domain - not on external content)]. it's not possible to get metrics on externally generated content. – jim tollan Oct 12 '10 at 10:15
1

You should create a function to measure the height of the content, and set the IFrame height and then call the resize function when the content is loaded.

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id]
                    .document.body.scrollHeight;
}
</SCRIPT>
Pedro Gil
  • 532
  • 2
  • 7
  • 18
  • 1
    Do NOT use the `language` attribute anymore. It's deprecated. Btw., you should rather use lowercase markup style. – Sk8erPeter May 11 '12 at 20:15
  • 1
    Actually you should use this, provided you're targeting lower versions of IE. This was the only thing that gave me the correct scroll height in IE 8> –  Aug 14 '13 at 21:57
0

If domains are the same for both pages:

parent.document.getElementById("iframe").style.height = $(document).height()+"px";

You can use jQuery in parent page too (if its available there).

Anpher
  • 4,567
  • 24
  • 24
0

I found this here: stackoverflow.com/questions/1145850/

and expanded upon it to re-size width also...you just add this in your head:

    <script type="text/javascript">
        function getDocHeight(doc) {
            doc = doc || document;
            // stackoverflow.com/questions/1145850/
            var body = doc.body, html = doc.documentElement;
            var height = Math.max( body.scrollHeight, body.offsetHeight, 
                html.clientHeight, html.scrollHeight, html.offsetHeight );
            return height;
        }
        function getDocWidth(doc) {
            doc = doc || document;
            // stackoverflow.com/questions/1145850/
            var body = doc.body, html = doc.documentElement;
            var width = Math.max( body.scrollWidth, body.offsetWidth,
                html.clientWidth, html.scrollWidth, html.offsetWidth );
            return width;
        }
        function setIframeSize(id) {
            var ifrm = document.getElementById(id);
            var doc = ifrm.contentDocument? ifrm.contentDocument: 
                ifrm.contentWindow.document;
            ifrm.style.visibility = 'hidden';
            ifrm.style.height = "10px"; // reset to minimal height ...
            ifrm.style.width = "10px"; // reset to minimal width ...
            // IE opt. for bing/msn needs a bit added or scrollbar appears
            ifrm.style.height = getDocHeight( doc ) + 4 + "px";
            ifrm.style.width = getDocWidth( doc ) + 4 + "px";
            ifrm.style.visibility = 'visible';
        }
    </script>

Then make sure you have a unique id in your iframe and call the SetIframeSize:

<iframe src="source.html" id="uniqueid" onload="setIframeSize(this.id)"></iframe>
Blake Russell
  • 61
  • 8