647

For example:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

I want it to be able to adjust its height according to the contents inside it, without using scroll.

3
  • 2
    This can be done via CSS there is a concept in css called media queries where content is resized according to the screen size Apr 2, 2016 at 7:20
  • 1
    Angular iFrame Auto-Height: gitlab.com/reduardo7/angular-iframe-auto-height Oct 3, 2016 at 14:51
  • 5
    "Angular…" i.e., Javascript required? In other words, one cannot do this on cross-site iframes (due to cross-site scripting restrictions), is that right? As @clankill3r is suggesting, this demonstrates the need for a pure CSS solution to this problem! Jan 5, 2017 at 20:38

16 Answers 16

806

Add this to your <head> section:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

And change your iframe to this:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

As found on sitepoint discussion.

31
  • 376
    This will not work if the iframe contains content from another domain because of the Same Origin Policy, there is another Question on SO with some cross domain solutions stackoverflow.com/questions/5589756/…
    – Jako
    Mar 27, 2013 at 12:13
  • 25
    The solutions seems not to work if the content of the iframe has a change of height by js (e.g a slider) Oct 20, 2013 at 4:59
  • 26
    should be onload="resizeIframe(this);" :) Dec 20, 2013 at 12:40
  • 27
    Their are a few other issues you need to consider, content changing in the iframe, the browser being resized, the iframe not being full loaded when you first check it and cross domain. I put together a little library, because I couldn't find a solution that covered every issue. github.com/davidjbradshaw/iframe-resizer Mar 23, 2014 at 13:17
  • 4
    Might be worth changing scrolling to auto in case the iframe's contents increase in height after being loaded.
    – rybo111
    Nov 29, 2015 at 17:03
126

You can use this library, which both initially sizes your iframe correctly and also keeps it at the right size by detecting whenever the size of the iframe's content changes (either via regular checking in a setInterval or via MutationObserver) and resizing it.

https://github.com/davidjbradshaw/iframe-resizer

Their is also a React version.

https://github.com/davidjbradshaw/iframe-resizer-react

This works with both cross and same domain iframes.

10
  • 7
    This is by far the most robust solution.
    – brockis
    Mar 15, 2018 at 0:41
  • 19
    note: when using for cross domain, requires you to be able to inject a js file into the iframe... Doesn't seem like a viable option when you don't control the iframe source.
    – Kyle Baker
    Mar 28, 2018 at 6:00
  • A major bug in this library is that it can't handle vh. Jul 15, 2019 at 7:59
  • 2
    @RickardElimää would be happy to take a PR to fix vh. Dec 1, 2019 at 18:49
  • 1
    @MattWeiler in that case you can still just monkey patch the JS file into the other apps, you don't need to change any of their code and including that file won't have any negative effect on your old apps May 7, 2021 at 9:28
90

Here is a compact version:

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>
8
  • 3
    I haven't tried this with other browsers, but I needed to add 10px with Chrome or else a vertical scrollbar showed up. I did this.style.height=(this.contentDocument.body.scrollHeight + 15) + 'px'; just to make sure it looks ok.
    – Mike
    Oct 9, 2015 at 4:43
  • 1
    it should be onload="this.style.height = this.contentWindow.document.body.scrollHeight + 'px';"
    – YugoAmaryl
    Dec 25, 2018 at 9:17
  • 14
    not working.. getting Blocked a frame with origin "{url}" from accessing a cross-origin frame. Oct 7, 2019 at 8:53
  • 1
    works fine for me. Jun 5, 2020 at 2:28
  • 2
    not working here too on firefox
    – Digao
    Aug 25, 2021 at 23:12
51

The suggestion by hjpotter92 does not work in safari! I have made a small adjustment to the script so it now works in Safari as well.

Only change made is resetting height to 0 on every load in order to enable some browsers to decrease height.

Add this to <head> tag:

<script type="text/javascript">
  function resizeIframe(obj){
     obj.style.height = 0;
     obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

And add the following onload attribute to your iframe, like so

<iframe onload='resizeIframe(this)'></iframe>
7
  • This also does not work if the iframe contents come from srcdoc attribute. The height will be set wrong.
    – Myforwik
    Jul 14, 2014 at 1:04
  • Setting height to zero first is not only for IE. Sep 6, 2014 at 16:46
  • 2
    Thanks, this probably should have been a comment/suggestion to hjpotter's post mind... Feb 25, 2015 at 15:38
  • 4
    You don't need those encapsulating {}'s Mar 9, 2015 at 21:30
  • 6
    obj.style.height = 0; is very important row, that cause scrollHeight recalculating (otherwise, your contentWindow height will only increase). May 17, 2016 at 16:16
15

Avoid inline JavaScript; you can use a class:

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>

And reference it with jQuery:

$('.iframe-full-height').on('load', function(){
    this.style.height=this.contentDocument.body.scrollHeight +'px';
});
0
14

The hjpotter92 answer works well enough in certain cases, but I found the iframe content often got bottom-clipped in Firefox & IE, while fine in Chrome.

The following works well for me and fixes the clipping problem. The code was found at http://www.dyn-web.com/tutorials/iframes/height/. I have made a slight modification to take the onload attribute out of the HTML. Place the following code after the <iframe> HTML and before the closing </body> tag:

<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 setIframeHeight(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 ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>

Your iframe HTML:

<iframe id="ifrm" src="some-iframe-content.html"></iframe>

Note if you prefer to include the Javascript in the <head> of the document then you can revert to using an inline onload attribute in the iframe HTML, as in the dyn-web web page.

2
  • This is the only one that worked for me. Thank you so much! Nov 7, 2018 at 19:48
  • Not working now in 2021.
    – WilliamK
    Jun 10, 2022 at 21:25
7

jQuery's .contents() method method allows us to search through the immediate children of the element in the DOM tree.

jQuery:

$('iframe').height( $('iframe').contents().outerHeight() );

Remember that the body of the page inner the iframe must have its height

CSS:

body {
  height: auto;
  overflow: auto
}
4
  • 1
    Add a demo to your answer to give it more value.
    – Stephan
    Mar 22, 2015 at 15:01
  • This worked for me but only when removing 'body' to make it contents() Aug 23, 2016 at 6:19
  • 5
    same problem as before, doesn't work cross origin
    – nuander
    Jan 25, 2017 at 22:56
  • 2
    jQuery('iframe').height(jQuery('iframe').contents().find('body').height()); worked for me when the iframe had loaded Jun 9, 2017 at 16:27
7

Try this:

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
4
  • 5
    Why are you writing for one browser? Many people, with many operating systems, and many browsers will view your site. Jan 3, 2016 at 15:57
  • 4
    Works! (on Chrome, Firefox, Safari, IE)
    – strix25
    Jul 11, 2019 at 12:16
  • 2
    height: 100vh works better than % on my side
    – Marvel Moe
    Aug 11, 2022 at 23:34
  • 1
    I can confirm that this works nicely. I hope @Lucky doesn't mind that I edited the contentious "...for IE11" away :-) Jul 7 at 12:50
3

This works for me (also with multiple iframes on one page):

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

This works for me (mostly).

Put this at the bottom of your page.

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="application/javascript" src="/script/jquery.browser.js">
</script>

<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>

<script type="application/javascript"> 
  jQuery('iframe').iframeAutoHeight();
  $(window).load(
      function() {
          jQuery('iframe').iframeAutoHeight();  
      }
  );

  // for when content is not html e.g. a PDF
  function setIframeHeight() {
      $('.iframe_fullHeight').each(
          function (i, item) {
              item.height = $(document).height();
          }
      );
  };

  $(document).ready( function () {
      setIframeHeight();
  });
  $(window).resize( function () {
      setIframeHeight();
  });
</script> 

The first half is from ???, and works when there is html in the iframe. The second half sets the iframe to page height (not content height), when iframes class is iframe_fullHeight. You can use this if the content is a PDF or other such like, but you have to set the class. Also can only be used when being full height is appropriate.

Note: for some reason, when it recalculates after window resize, it gets height wrong.

1
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"; 
}

add this to your iframe: onload="autoResize('youriframeid')"

1
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
0

I did it with AngularJS. Angular doesn't have an ng-load, but a 3rd party module was made; install with bower below, or find it here: https://github.com/andrefarzat/ng-load

Get the ngLoad directive: bower install ng-load --save

Setup your iframe:

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>

Controller resizeIframe function:

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
0

I wanted to make an iframe behave like a normal page (I needed to make a fullscreen banner inside an iframe element), so here is my script:

    (function (window, undefined) {

    var frame,
        lastKnownFrameHeight = 0,
        maxFrameLoadedTries = 5,
        maxResizeCheckTries = 20;

    //Resize iframe on window resize
    addEvent(window, 'resize', resizeFrame);

    var iframeCheckInterval = window.setInterval(function () {
        maxFrameLoadedTries--;
        var frames = document.getElementsByTagName('iframe');
        if (maxFrameLoadedTries == 0 || frames.length) {
            clearInterval(iframeCheckInterval);
            frame = frames[0];
            addEvent(frame, 'load', resizeFrame);
            var resizeCheckInterval = setInterval(function () {
                resizeFrame();
                maxResizeCheckTries--;
                if (maxResizeCheckTries == 0) {
                    clearInterval(resizeCheckInterval);
                }
            }, 1000);
            resizeFrame();
        }
    }, 500);

    function resizeFrame() {
        if (frame) {
            var frameHeight = frame.contentWindow.document.body.scrollHeight;
            if (frameHeight !== lastKnownFrameHeight) {
                lastKnownFrameHeight = frameHeight;

                var viewportWidth = document.documentElement.clientWidth;
                if (document.compatMode && document.compatMode === 'BackCompat') {
                    viewportWidth = document.body.clientWidth;
                }

                frame.setAttribute('width', viewportWidth);
                frame.setAttribute('height', lastKnownFrameHeight);

                frame.style.width = viewportWidth + 'px';
                frame.style.height = frameHeight + 'px';
            }
        }
    }

    //--------------------------------------------------------------
    //  Cross-browser helpers
    //--------------------------------------------------------------

    function addEvent(elem, event, fn) {
        if (elem.addEventListener) {
            elem.addEventListener(event, fn, false);
        } else {
            elem.attachEvent("on" + event, function () {
                return (fn.call(elem, window.event));
            });
        }
    }

})(window);

The functions are self-explanatory and have comments to further explain their purpose.

3
  • 1
    May be some need an explanation, at least how to use it. And what it does. (-1) Jan 3, 2016 at 16:02
  • This works for me on FF, but I agree with @richard that some explanation will go some way towards getting this accepted as an answer.
    – crafter
    Apr 18, 2017 at 15:08
  • there is like.... 1 comment, on the obvious thing. The actual stuff i don't understand has no comments. No mention if this is affected by SOP. Worst, it uses setTimeout - imagine if i was on a really slow connection...
    – RozzA
    Oct 6, 2017 at 4:01
-1

I've had problems in the past calling iframe.onload for dynamically created iframes, so I went with this approach for setting the iframe size:

iFrame View

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);

Main View

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}

(this is only going to work if both views are in the same domain)

0
-4
<script type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = 0;
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

this is not working for chrome. But working for firefox.

Not the answer you're looking for? Browse other questions tagged or ask your own question.