Set iframe content height to auto resize dynamically

Question

I was myself searching for a simple solution to change the height of an iframe with the content in it   It seems like the rules are that you can t get the height of the iframe from the page holding it  This is because of security apparently  How can we do this

User · Answer

Simple solution     lt iframe  onload  this style height this contentWindow document body scrollHeight    px        gt  lt  iframe gt   This works when the iframe and parent window are in the same domain   It does not work when the two are in different domains

User · Answer

In the iframe  So that means you have to add some code in the iframe page  Simply add this script to your  code IN THE IFRAME    lt body onload  parent alertsize document body scrollHeight    gt    In the holding page  In the page holding the iframe  in my case with ID  myiframe   add a small javascript    lt script gt  function alertsize pixels       pixels  32      document getElementById  myiframe   style height pixels  px      lt  script gt    What happens now is that when the iframe is loaded it triggers a javascript in the parent window  which in this case is the page holding the iframe   To that JavaScript function it sends how many pixels its  iframe  height is   The parent window takes the number  adds 32 to it to avoid scrollbars  and sets the iframe height to the new number   That s it  nothing else is needed     But if you like to know some more small tricks keep on reading     DYNAMIC HEIGHT IN THE IFRAME  If you like me like to toggle content the iframe height will change  without the page reloading and triggering the onload   I usually add a very simple toggle script I found online    lt script gt  function toggle obj        var el   document getElementById obj       if   el style display     block    el style display    block       else el style display    none      lt  script gt    to that script just add    lt script gt  function toggle obj        var el   document getElementById obj       if   el style display     block    el style display    block       else el style display    none       parent alertsize document body scrollHeight      ADD THIS LINE     lt  script gt    How you use the above script is easy    lt a href  javascript toggle  moreheight    gt toggle height  lt  a gt  lt br   gt   lt div style  display none   id  moreheight  gt  more height  lt br   gt  more height  lt br   gt  more height  lt br   gt   lt  div gt      For those that like to just cut and paste and go from there here is the two pages  In my case I had them in the same folder  but it should work cross domain too  I think      Complete holding page code    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  content-type  content  text html  charset iso-8859-1  gt   lt title gt THE IFRAME HOLDER lt  title gt   lt script gt  function alertsize pixels       pixels  32      document getElementById  myiframe   style height pixels  px      lt  script gt   lt  head gt    lt body style  background silver   gt   lt iframe src  theiframe htm  style  width 458px background white   frameborder  0  id  myiframe  scrolling  auto  gt  lt  iframe gt   lt  body gt   lt  html gt    Complete iframe code   this iframe named  theiframe htm     lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  content-type  content  text html  charset iso-8859-1  gt   lt title gt IFRAME CONTENT lt  title gt   lt script gt  function toggle obj        var el   document getElementById obj       if   el style display     block    el style display    block       else el style display    none       parent alertsize document body scrollHeight      lt  script gt   lt  head gt    lt body onload  parent alertsize document body scrollHeight    gt   lt a href  javascript toggle  moreheight    gt toggle height  lt  a gt  lt br   gt   lt div style  display none   id  moreheight  gt  more height  lt br   gt  more height  lt br   gt  more height  lt br   gt   lt  div gt  text lt br   gt  text lt br   gt  text lt br   gt  text lt br   gt  text lt br   gt  text lt br   gt  text lt br   gt  text lt br   gt  THE END   lt  body gt   lt  html gt    Demo

[iframe] Set iframe content height to auto resize dynamically

Examples related to iframe

Examples related to resize

Examples related to height