How to resize iframe height dynamically based on element height?

1
votes

I am loading an aspx web page in an iframe within the same domain/protocol as the parent/container page. The content in the Iframe is sometimes of more height than the iframe itself. I do not want to display scroll bars on my Iframe.

I need to resize the height of the Iframe based on the wrapper 'div' tag inside the aspx page that the iframe will contain. Below is the jquery i had written to achieve this: 

$("#TB_window", window.parent.document).height($("body").height() + 50);

'TB_window' - the div in which the Iframe is contained.

'body' - the body element of the aspx in the iframe.

This script is attached to the iframe content. i am getting the TB_window element from the parent page. while this works fine on Chrome, but the TB_window collapses in firefox. I am really confused/lost on why that happens.

Can anyone offer any advice on how i can handle the situation better?? Your help will be highly appreciated Thanks

2
javascriptjqueryasp.netiframe
stackoverflow.com/questions/754519/… – Neha
thanks for the reply...looks like the question was addressing how to display the iframe in full parent window height. in my case i am rendering it similar to a "modal" window, which can be draggable around the parent window. – karry

2 Answers

2
votes

You have to use manage some event on your iframe

 <iframe id="iframe" src="xyz" onload="FrameLoad(this);"
  onresize="FrameLoad(this);" scrolling="no" frameborder="0">
  </iframe>


   function FrameLoad(ctrl) {
   var the_height = ctrl.contentWindow.document.body.scrollHeight;
   $(ctrl).height(the_height)
 }

also use for cross browser

document.domain = document.location.hostname;

in both parent page and child page

0
votes

If the difference is not that big you can add

overflow:hidden

to the css class

this doesn't resize the window but could be what you're searching for.