Make iframe automatically adjust height according to the contents without using scrollbar

Question

For example    lt iframe name  Stack  src  http   stackoverflow com   width  740          frameborder  0  scrolling  no  id  iframe  gt       lt  iframe gt    I want it to be able to adjust its height according to the contents inside it  without using scroll

User · Answer

Here is a compact version    lt iframe src  hello html  sandbox  allow-same-origin          onload  this style height  this contentWindow document body scrollHeight 20   px    gt   lt  iframe gt

User · Answer

The hjpotter92 answer works well enough in certain cases  but I found the iframe content often got bottom-clipped in Firefox  amp  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  lt iframe gt  HTML and before the closing  lt  body gt  tag    lt script type  text javascript  gt  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      lt  script gt    Your iframe HTML    lt iframe id  ifrm  src  some-iframe-content html  gt  lt  iframe gt    Note if you prefer to include the Javascript in the  lt head gt  of the document then you can revert to using an inline onload attribute in the iframe HTML  as in the dyn-web web page

User · Answer

This works for me  mostly    Put this at the bottom of your page    lt script type  application javascript  src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt   lt  script gt    lt script type  application javascript  src   script jquery browser js  gt   lt  script gt    lt script type  application javascript  src   script jquery-iframe-auto-height js  gt   lt  script gt    lt script type  application javascript  gt     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           lt  script gt     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

User · Answer

jq2   stocks iframe   load function    var iframe width   jq2   stocks iframe   contents   outerHeight      jq2   stocks iframe   css  height  iframe width         lt iframe id  stocks iframe  style  width 100  height 0px   frameborder  0  gt

User · Answer

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

User · Answer

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    lt iframe id  CreditReportFrame  src  about blank  frameborder  0  scrolling  no  ng-load  resizeIframe  event   seamless gt  lt  iframe gt    Controller resizeIframe function    scope resizeIframe   function  event        console log  iframe loaded         var iframe   event target      iframe style height   iframe contentWindow document body scrollHeight    px

User · Answer

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

User · Answer

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

User · Answer

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  lt head gt  tag    lt script type  text javascript  gt    function resizeIframe obj        obj style height   0       obj style height   obj contentWindow document body scrollHeight    px        lt  script gt    And add the following onload attribute to your iframe  like so   lt iframe onload  resizeIframe this   gt  lt  iframe gt

User · Answer

lt script type  text javascript  gt    function resizeIframe obj        obj style height   0      obj style height   obj contentWindow document body scrollHeight    px        lt  script gt    this is not working for chrome  But working for firefox

User · Answer

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  amp  amp  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

User · Answer

Add this to your  lt head gt  section    lt script gt    function resizeIframe obj        obj style height   obj contentWindow document documentElement scrollHeight    px        lt  script gt    And change your iframe to this    lt iframe src       frameborder  0  scrolling  no  onload  resizeIframe this     gt    As found on sitepoint discussion

User · Answer

This option will work 100    lt iframe id  iframe2  src  url com  frameborder  0  style  overflow  hidden  height  100   width  100   position  absolute   height  100   width  100   gt  lt  iframe gt

User · Answer

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

User · Answer

This works for me  also with multiple iframes on one page       iframe   load function     this  height   this  contents   outerHeight

User · Answer

Try this for IE11   lt iframe name  Stack  src  http   stackoverflow com   style  height  100   width  100    frameborder  0  scrolling  no  id  iframe  gt     lt  iframe gt

User · Answer

Avoid inline JavaScript  you can use a class    lt iframe src       frameborder  0  scrolling  auto  class  iframe-full-height  gt  lt  iframe gt    And reference it with jQuery       iframe-full-height   on  load   function        this style height this contentDocument body scrollHeight   px

[javascript] Make iframe automatically adjust height according to the contents without using scrollbar?

Examples related to javascript

Examples related to html

Examples related to iframe

Examples related to height

Examples related to scrollbar