make iframe height dynamic based on content inside-

Question

User-1634604574 posted

i want to show content inside that iframe full height

                            $('#div_footer').append("<object style='display:none;height:100%' class='ob_footer'><iframe class='iframe_3 ' height='100%' width='100%' style='overflow:hidden;height:100%;width:100%;border:none;white-space:nowrap'  allowfullscreen scrolling='no'  src='" + domain_footer + "' type='text/html' ></iframe></object>");

Answer 1

User-474980206 posted

you need to use javascript. if the content is static, you can use the iframe on load event, to get the size of its inner document, then update its size.  the content must be the same site or security will block. if its not static you will need to poll the inner doc height, or move the javascript to the iframe document and have it catch resize events.

Answer 2

User-1634604574 posted

the content is dynamic can you explain by code?

Answer 3

User1535942433 posted

Hi [e-mail],

Accroding to your description,I suggest you could do this:

Replace:

 $('#div_footer').append("<object style='display:none;height:100%' class='ob_footer'><iframe class='iframe_3 '  height='100%' width='100%' style='overflow:hidden;height:100%;width:100%;border:none;white-space:nowrap'  allowfullscreen scrolling='no'  src='" + domain_footer + "' type='text/html' ></iframe></object>");

To:

$("#div_footer").append("<object style='height:100%' class='ob_footer'><iframe class='iframe_3 ' height='100%' frameborder='0'; width='100%' style='overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;;top:0px;left:0px;right:0px;bottom:0px'; allowfullscreen scrolling='no'  src='2160665.aspx' type='text/html' ></iframe></object>");

Best regards,

Yijing Sun

Answer 4

User-474980206 posted

Follow this thread

https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it