How can I dynamically change the height of an iFrame?

How to change height of iframe based on dynamic conent within the iframe?

  • I have an iframe that has dynamic content. If the answers specific questions, additional information displays (hidden div becomes visible). I'd like the height of the iframe to expand. I know this question has been asked on here multiple times, but it seems like it is typically when a different page within the iframe is loaded, not when content is changed dynamically within the iframe. Here is an example I tried to put together using jsFiddle: iframe: http://jsfiddle.net/B4AKc/2/ page: http://jsfiddle.net/PmBrd/ Any ideas?

  • Answer:

    Does this work for you? http://jsfiddle.net/PmBrd/1/ Code: var iframe = document.getElementById("ifr").contentWindow; iframe.$(".toggle_div").bind("change", function () { $("#ifr").css({ height: iframe.$("body").outerHeight() }); }); Since you mentioned they are in the same domain, it's just a matter of doing something similar with your real app.

Michael at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

Take a look at the jQuery http://benalman.com/projects/jquery-postmessage-plugin/ plugin. It allows you to pass information from the child frame to the parent. You could change the code inside the child frame to post the content height to the parent on content change, which the parent could then use to resize the iframe accordingly. The two pages must be on the same domain to work. I hope this helps!

dSquared

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.