How to auto-size an iFrame

Question

Possible Duplicate    Resizing an iframe based on content       I m loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame s content   To simply things  all pages belong to the same domain  so I shouldn t run into cross-site scripting issues

User · Answer

Here is a dead simple solution that works on every browser and with cross domains:

First, this works on the concept that if the html page containing the iframe is set to a height of 100% and the iframe is styled using css to have a height of 100%, then css will automatically size everything to fit.

Here is the code:

<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>

User · Answer

My solution   using jquery     lt iframe id  Iframe1  class  tabFrame  width  100   height  100   scrolling  no  src  http   samedomain  frameborder  0   gt   lt  iframe gt     lt script type  text javascript  gt        function                   tabFrame   load function                  var iframeContentWindow   this contentWindow              var height   iframeContentWindow   document  height                this style height   height    px                        lt  script gt

User · Answer

I found the solution by  ShripadK most helpful  but it does not work  if there is more than one iframe  My fix is   function autoResizeIFrame          iframe   height      function           return   this  contents   find  body   height     20                  iframe   contents   find  body   css      min-height    100    overflow     hidden      setTimeout autoResizeIFrame  2000   setTimeout autoResizeIFrame  10000         iframe   height    iframe   contents   find  body   height     20  would set the height of every frame to the same value  namely the height of the content of the first frame  So I am using jquery s height   with a function instead of a value  That way the individual heights are calculated   20 is a hack to work around iframe scrollbar problems  The number must be bigger than the size of a scrollbar  The hack can probably  be avoided but disabling the scrollbars for the iframe  I use setTimeout instead of setInterval      1  to reduce CPU load in my case

User · Answer

This is the easiest method i have found using prototype   Main html    lt html gt   lt head gt     lt script src  prototype js  gt  lt  script gt    lt script gt      function init             var iframe     document getElementById  iframe             var iframe content     iframe contentWindow document getElementById  iframe content             var cy   iframe content getDimensions   height          iframe style height   cy    px          lt  script gt    lt  head gt    lt body onload  init    gt     lt iframe src    content html  id  iframe  frameBorder  0  scroll  no  gt  lt  iframe gt    lt br gt  this is the next line   lt  body gt   lt  html gt    content html    lt html gt   lt head gt   lt script src  prototype js  gt  lt  script gt     lt style gt  body       margin  0px      padding  0px     lt  style gt     lt  head gt    lt body gt     lt div id  iframe content  style  max-height 200px   gt  Sub content lt br gt  Sub content lt br gt               lt  div gt     lt  body gt   lt  html gt    This seems to work  so far  in all the major browsers

User · Answer

I just happened to come by your question and i have a solution  But its in jquery  Its too simple      iframe   contents   find  body   css   min-height    100    overflow     hidden     setInterval      iframe   height    iframe   contents   find  body   height     20    1      There you go   Cheers      Edit  If you have a Rich Text Editor based on the iframe method and not the div method and want it to expand every new line then this code will do the needful

User · Answer

In IE 5 5   you can use the contentWindow property   iframe height   iframe contentWindow document scrollHeight    In Netscape 6  assuming firefox as well   contentDocument property   iframe height   iframe contentDocument scrollHeight

User · Answer

On any other element  I would use the scrollHeight of the DOM object and set the height accordingly  I don t know if this would work on an iframe  because they re a bit kooky about everything  but it s certainly worth a try   Edit  Having had a look around  the popular consensus is setting the height from within the iframe using the offsetHeight   function setHeight         parent document getElementById  the-iframe-id   style height   document  body   offsetHeight    px       And attach that to run with the iframe-body s onLoad event

User · Answer

This is the easiest method i have found using prototype   Main html    lt html gt   lt head gt     lt script src  prototype js  gt  lt  script gt    lt script gt      function init             var iframe     document getElementById  iframe             var iframe content     iframe contentWindow document getElementById  iframe content             var cy   iframe content getDimensions   height          iframe style height   cy    px          lt  script gt    lt  head gt    lt body onload  init    gt     lt iframe src    content html  id  iframe  frameBorder  0  scroll  no  gt  lt  iframe gt    lt br gt  this is the next line   lt  body gt   lt  html gt    content html    lt html gt   lt head gt   lt script src  prototype js  gt  lt  script gt     lt style gt  body       margin  0px      padding  0px     lt  style gt     lt  head gt    lt body gt     lt div id  iframe content  style  max-height 200px   gt  Sub content lt br gt  Sub content lt br gt               lt  div gt     lt  body gt   lt  html gt    This seems to work  so far  in all the major browsers

User · Answer

On any other element  I would use the scrollHeight of the DOM object and set the height accordingly  I don t know if this would work on an iframe  because they re a bit kooky about everything  but it s certainly worth a try   Edit  Having had a look around  the popular consensus is setting the height from within the iframe using the offsetHeight   function setHeight         parent document getElementById  the-iframe-id   style height   document  body   offsetHeight    px       And attach that to run with the iframe-body s onLoad event

User · Answer

On any other element  I would use the scrollHeight of the DOM object and set the height accordingly  I don t know if this would work on an iframe  because they re a bit kooky about everything  but it s certainly worth a try   Edit  Having had a look around  the popular consensus is setting the height from within the iframe using the offsetHeight   function setHeight         parent document getElementById  the-iframe-id   style height   document  body   offsetHeight    px       And attach that to run with the iframe-body s onLoad event

User · Answer

Actually - Patrick s code sort of worked for me as well  The correct way to do it would be along the lines of this   Note  there s a bit of jquery ahead    if    browser msie    false        var h    document getElementById  iframeID   contentDocument body offsetHeight     else       var h    document getElementById  iframeID   Document body scrollHeight

User · Answer

My workaround is to set the iframe the height width well over any anticipated source page size in CSS  amp  the background property to transparent    In the iframe set allow-transparency to true and scrolling to no   The only thing visible will be whatever source file you use  It works in IE8  Firefox 3   amp  Safari

User · Answer

Actually - Patrick s code sort of worked for me as well  The correct way to do it would be along the lines of this   Note  there s a bit of jquery ahead    if    browser msie    false        var h    document getElementById  iframeID   contentDocument body offsetHeight     else       var h    document getElementById  iframeID   Document body scrollHeight

User · Answer

In IE 5 5   you can use the contentWindow property   iframe height   iframe contentWindow document scrollHeight    In Netscape 6  assuming firefox as well   contentDocument property   iframe height   iframe contentDocument scrollHeight

User · Answer

Oli has a solution that will work for me  For the record  the page inside my iFrame is rendered by javascript  so I ll need an infinitesimal delay before reporting back the offsetHeight  It looks like something along these lines          document  ready function            setTimeout setHeight                function setHeight             alert document  body   offsetHeight

User · Answer

In IE 5 5   you can use the contentWindow property   iframe height   iframe contentWindow document scrollHeight    In Netscape 6  assuming firefox as well   contentDocument property   iframe height   iframe contentDocument scrollHeight

User · Answer

Oli has a solution that will work for me  For the record  the page inside my iFrame is rendered by javascript  so I ll need an infinitesimal delay before reporting back the offsetHeight  It looks like something along these lines          document  ready function            setTimeout setHeight                function setHeight             alert document  body   offsetHeight

User · Answer

My solution   using jquery     lt iframe id  Iframe1  class  tabFrame  width  100   height  100   scrolling  no  src  http   samedomain  frameborder  0   gt   lt  iframe gt     lt script type  text javascript  gt        function                   tabFrame   load function                  var iframeContentWindow   this contentWindow              var height   iframeContentWindow   document  height                this style height   height    px                        lt  script gt

User · Answer

In IE 5 5   you can use the contentWindow property   iframe height   iframe contentWindow document scrollHeight    In Netscape 6  assuming firefox as well   contentDocument property   iframe height   iframe contentDocument scrollHeight

User · Answer

Actually - Patrick s code sort of worked for me as well  The correct way to do it would be along the lines of this   Note  there s a bit of jquery ahead    if    browser msie    false        var h    document getElementById  iframeID   contentDocument body offsetHeight     else       var h    document getElementById  iframeID   Document body scrollHeight

User · Answer

Try    jquery-iframe-auto-height iframe-resizer

User · Answer

On any other element  I would use the scrollHeight of the DOM object and set the height accordingly  I don t know if this would work on an iframe  because they re a bit kooky about everything  but it s certainly worth a try   Edit  Having had a look around  the popular consensus is setting the height from within the iframe using the offsetHeight   function setHeight         parent document getElementById  the-iframe-id   style height   document  body   offsetHeight    px       And attach that to run with the iframe-body s onLoad event

User · Answer

Oli has a solution that will work for me  For the record  the page inside my iFrame is rendered by javascript  so I ll need an infinitesimal delay before reporting back the offsetHeight  It looks like something along these lines          document  ready function            setTimeout setHeight                function setHeight             alert document  body   offsetHeight

User · Answer

I found the solution by  ShripadK most helpful  but it does not work  if there is more than one iframe  My fix is   function autoResizeIFrame          iframe   height      function           return   this  contents   find  body   height     20                  iframe   contents   find  body   css      min-height    100    overflow     hidden      setTimeout autoResizeIFrame  2000   setTimeout autoResizeIFrame  10000         iframe   height    iframe   contents   find  body   height     20  would set the height of every frame to the same value  namely the height of the content of the first frame  So I am using jquery s height   with a function instead of a value  That way the individual heights are calculated   20 is a hack to work around iframe scrollbar problems  The number must be bigger than the size of a scrollbar  The hack can probably  be avoided but disabling the scrollbars for the iframe  I use setTimeout instead of setInterval      1  to reduce CPU load in my case

User · Answer

This solution worked best for me   It uses jQuery and the iframe s   load  event

User · Answer

Actually - Patrick s code sort of worked for me as well  The correct way to do it would be along the lines of this   Note  there s a bit of jquery ahead    if    browser msie    false        var h    document getElementById  iframeID   contentDocument body offsetHeight     else       var h    document getElementById  iframeID   Document body scrollHeight

User · Answer

Here is a dead simple solution that works on every browser and with cross domains:

First, this works on the concept that if the html page containing the iframe is set to a height of 100% and the iframe is styled using css to have a height of 100%, then css will automatically size everything to fit.

Here is the code:

<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>

User · Answer

Try    jquery-iframe-auto-height iframe-resizer

User · Answer

Oli has a solution that will work for me  For the record  the page inside my iFrame is rendered by javascript  so I ll need an infinitesimal delay before reporting back the offsetHeight  It looks like something along these lines          document  ready function            setTimeout setHeight                function setHeight             alert document  body   offsetHeight

User · Answer

My workaround is to set the iframe the height width well over any anticipated source page size in CSS  amp  the background property to transparent    In the iframe set allow-transparency to true and scrolling to no   The only thing visible will be whatever source file you use  It works in IE8  Firefox 3   amp  Safari

User · Answer

I just happened to come by your question and i have a solution  But its in jquery  Its too simple      iframe   contents   find  body   css   min-height    100    overflow     hidden     setInterval      iframe   height    iframe   contents   find  body   height     20    1      There you go   Cheers      Edit  If you have a Rich Text Editor based on the iframe method and not the div method and want it to expand every new line then this code will do the needful

User · Answer

This solution worked best for me   It uses jQuery and the iframe s   load  event

[javascript] How to auto-size an iFrame?

Examples related to javascript

Examples related to iframe

Examples related to autosize