CODEWITHSUNDEEP
javascriptjqueryasp.netiframe
karry
karry

Reputation: 3410

How to resize iframe height dynamically based on element height?

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

Upvotes: 1

Views: 1524

Answers (2)

ni3.net
ni3.net

Reputation: 387

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

Upvotes: 2

Rick Hoving
Rick Hoving

Reputation: 3575

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.

Upvotes: 0

Related Questions