Resize iframe height according to content height in it

Question

I am opening my blog page in my website  The problem is I can give a width to an iframe but the height should be dynamic so that there is no scrollbar in the iframe  and it looks like a single page     I have tried various JavaScript code to calculate the height of the content but all of them give an access denied permission error and is of no use    lt iframe src  http   bagtheplanet blogspot com   name  ifrm  id  ifrm  width  1024px   gt  lt  iframe gt    Can we use Ajax to calculate height or maybe using PHP

User · Answer

Try using scrolling no attribute on the iframe tag  Mozilla also has an overflow-x and overflow-y CSS property you may look into   In terms of the height  you could also try height 100  on the iframe tag

User · Answer

The trick is to acquire all the necessary iframe events from an external script  For instance  you have a script which creates the iFrame using document createElement  in this same script you temporarily have access to the contents of the iFrame   var dFrame   document createElement  iframe    dFrame src    http   www example com      Acquire onload and resize the iframe dFrame onload   function            Setting the content window s resize function tells us when we ve changed the height of the internal document        It also only needs to do what onload does  so just have it call onload     dFrame contentWindow onresize   function     dFrame onload          dFrame style height   dFrame contentWindow document body scrollHeight    px     window onresize   function         dFrame onload        This works because dFrame stays in scope in those functions  giving you access to the external iFrame element from within the scope of the frame  allowing you to see the actual document height and expand it as necessary  This example will work in firefox but nowhere else  I could give you the workarounds  but you can figure out the rest

User · Answer

SchizoDuckie s answer is very elegant and lightweight  but due to Webkit s lack of implementation for scrollHeight  see here   does not work on Webkit-based browsers  Safari  Chrome  various and sundry mobile platforms    For this basic idea to work on Webkit along with Gecko and Trident browsers  one need only replace   lt body onload  parent resizeIframe document body scrollHeight   gt    with    lt body onload  parent resizeIframe document body offsetHeight   gt    So long as everything is on the same domain  this works quite well

User · Answer

You can do this with JavaScript   document getElementById  foo   height   document getElementById  foo   contentWindow document body scrollHeight    px

User · Answer

I just spent the better part of 3 days wrestling with this  I m working on an application that loads other applications into itself while maintaining a fixed header and a fixed footer  Here s what I ve come up with   I also used EasyXDM  with success  but pulled it out later to use this solution    Make sure to run this code AFTER the  lt iframe gt  exists in the DOM  Put it into the page that pulls in the iframe  the parent       get the iframe var theFrame       myIframe       set its height to the height of the window minus the combined height of fixed header and footer theFrame height Number   window  height    - 80    function resizeIframe         theFrame height Number   window  height    - 80         setup a resize method to fire off resizeIframe     use timeout to filter out unnecessary firing  var TO   false    window  resize function         if  TO     false  clearTimeout TO       TO   setTimeout resizeIframe  500     500 is time in miliseconds

User · Answer

Try this  you can change for even when you want  this example use jQuery       iframe   live  mousemove   function  event           var theFrame     this  parent document body       this height   document body  height   - 350

User · Answer

Here s my solution to the problem using MooTools which works in Firefox 3 6  Safari 4 0 4 and Internet Explorer 7    var iframe container      iframe container id    var iframe style         height  300      width   100      if   Browser Engine trident           IE has hasLayout issues if iframe display is none  so don t use the loading class     iframe container addClass  loading        iframe style display    none     this iframe   new IFrame       frameBorder  0      src   http   www youriframeurl com        styles  iframe style      events             load   function                 var innerDoc    this contentDocument    this contentDocument   this contentWindow document              var h   this measure function                    return innerDoc body scrollHeight                                          this setStyles                   height  h toInt                    display   block                              if   Browser Engine trident                    iframe container removeClass  loading                                     inject iframe container     Style the  loading  class to show an Ajax loading graphic in the middle of the iframe container  Then for browsers other than Internet Explorer  it will display the full height IFRAME once the loading of its content is complete and remove the loading graphic

User · Answer

Below is my onload event handler   I use an IFRAME within a jQuery UI dialog  Different usages will need some adjustments  This seems to do the trick for me  for now  in Internet Explorer 8 and Firefox 3 5  It might need some extra tweaking  but the general idea should be clear       function onLoadDialog frame        try           var body   frame contentDocument body          var  body     body           var  frame     frame           var contentDiv   frame parentNode          var  contentDiv     contentDiv            var savedShow    contentDiv dialog  option    show            var position    contentDiv dialog  option    position               disable show effect to enable re-positioning  UI bug            contentDiv dialog  option    show   null              show dialog  otherwise sizing won t work          contentDiv dialog  open                Maximize frame width in order to determine minimal scrollHeight          frame css  width    contentDiv dialog  option    maxWidth   -                 contentDiv offsetWidth   frame offsetWidth            var minScrollHeight   body scrollHeight          var maxWidth   body offsetWidth          var minWidth   0             decrease frame width until scrollHeight starts to grow  wrapping          while  Math abs maxWidth - minWidth   gt  10                var width   minWidth   Math ceil  maxWidth - minWidth    2                body css  width   width               if  body scrollHeight  gt  minScrollHeight                    minWidth   width                else                   maxWidth   width                                   frame css  width   maxWidth              use maximum height to avoid vertical scrollbar  if possible          var maxHeight    contentDiv dialog  option    maxHeight            frame css  height   maxHeight            body css  width                   correct for vertical scrollbar  if necessary          while  body clientWidth  lt  maxWidth                 frame css  width   maxWidth    maxWidth - body clientWidth                       var minScrollWidth   body scrollWidth          var minHeight   Math min minScrollHeight  maxHeight              descrease frame height until scrollWidth decreases  wrapping          while  Math abs maxHeight - minHeight   gt  10                var height   minHeight   Math ceil  maxHeight - minHeight    2                body css  height   height               if  body scrollWidth  lt  minScrollWidth                    minHeight   height                else                   maxHeight   height                                   frame css  height   maxHeight            body css  height                    reset widths to  auto  where possible          contentDiv css  width    auto             contentDiv css  height    auto             contentDiv dialog  option    width    auto                re-position the dialog          contentDiv dialog  option    position   position               hide dialog          contentDiv dialog  close               restore show effect          contentDiv dialog  option    show   savedShow              open using show effect          contentDiv dialog  open               remove show effect for consecutive requests          contentDiv dialog  option    show   null            return               An error is raised if the IFrame domain    its container s domain     catch  e            window status    Error      e number          e description          alert  Error      e number          e description

User · Answer

To directly answer your two subquestions  No  you cannot do this with Ajax  nor can you calculate it with PHP   What I have done in the past is use a trigger from the iframe d page in window onload  NOT domready  as it can take a while for images to load  to pass the page s body height to the parent    lt body onload  parent resizeIframe document body scrollHeight   gt    Then the parent resizeIframe looks like this   function resizeIframe newHeight        document getElementById  blogIframe   style height   parseInt newHeight 10    10    px       Et voila  you have a robust resizer that triggers once the page is fully rendered with no nasty contentdocument vs contentWindow fiddling     Sure  now people will see your iframe at default height first  but this can be easily handled by hiding your iframe at first and just showing a  loading  image  Then  when the resizeIframe function kicks in  put two extra lines in there that will hide the loading image  and show the iframe for that faux Ajax look   Of course  this only works from the same domain  so you may want to have a proxy PHP script to embed this stuff  and once you go there  you might as well just embed your blog s RSS feed directly into your site with PHP

User · Answer

Fitting IFRAME contents is kind of an easy thing to find on Google  Here s one solution    lt script type  text javascript  gt      function autoIframe frameId           try             frame   document getElementById frameId             innerDoc    frame contentDocument    frame contentDocument   frame contentWindow document            objToResize    frame style    frame style   frame            objToResize height   innerDoc body scrollHeight   10                  catch err              window status   err message                  lt  script gt    This of course doesn t solve the cross-domain problem you are having    Setting document domain might help if these sites are in the same place  I don t think there is a solution if you are iframe-ing random sites

[php] Resize iframe height according to content height in it

Examples related to php

Examples related to javascript

Examples related to ajax

Examples related to iframe