Dynamic iframe with dynamic height

Question

My problem is the following: I'm in a group of people at University, coding a webpage, and we would want to organise it as this: We have a header, a menu, another menu on the left and in the right we have to display content.

We are going to get this content from several .html files, so we'd try an iframe. Problem is, we have already solved how to make it load whatever we want, but we want it to be able to load either a tiny page or a bigger one, adjusting itself in height. (The iframe should be able to change source and thus height without refreshing the whole page)

So, my question is, how to make it auto-resizable in the Y axis? (Width is fixed and OK). We don't have much idea of JavaScript (Absolutely not about PHP), so either way I'm looking for a copy-and-paste solution if that's possible, which works with all major browsers.

I'll say that i have tried some examples on the Internet, but none of them seem to work.

(This is all inside the same domain, let's say /index.html which is the whole page, and /content.html which is the wen that goes inside the iframe)

Thanks for your help.

Answer 1

You could call a standard function in the parent like so

parent.func( newHeight);

Then define the function in the parent of the iFrame

function func( newHeight ) {
    // resize iFrame
}

As you are on the same domain then this should work.