Resizing iframe when document changes size

I have a web page with an application running in an iframe (same domain). The iframe's h开发者_开发知识库eight is set on load based on the iframed document's height. The problem is when the iframed document's size is changed (by expanding an accordion, menu etc). Are there any events fired when this occurs, that I can use to resize the iframe element accordingly?

I have tried to bind to the resize event on the window object in the iframe, but as the window isn't resized when the document content changes, the event doesn't fire. What I need is some kind of resize-event on the document object, but as far as I know, there is no such thing. Is there another way to detect changes in the document's height?

I'd appreciate a general solution, as I don't know the content of the iframe exactly, but I can include generic scripts in it.

---

There are resize events fired for the iframe window. You can listen to them (in the iframe itself) and than trigger some function in the parent window to propagate new size and update the iframe size in the parent window.

---

Have you tried using the scroll event and attaching it to the contentWindow of the iFrame?

Otherwise I would rather suggest you hook directly into the accordion rather than relying on catching scroll events that may or may not happen. Because scroll will only fire once the user actually scrolled the slider, not when the accordion expands..

But you could simply call a method on the parent when the user expands the accordion passing it the new size of the accordion.

---

I found a possible, but not ideal solution, and it doesn't work in all browsers:

By binding to the body element's DOMSubtreeModified in the iframe, I can find the iframe element in parent or top and change it's height.

$('body').bind('DOMSubtreeModified', function(){
    top.document.getElementById('appFrame').height = $(document).height();
});

Here's an overview of the browser support for this event: http://www.quirksmode.org/dom/events/

---

If you are using jQuery ui then you can use event change and call function

setHeight

http://jqueryui.com/demos/accordion/

function setHeight() {
    parent.document.getElementById('the-iframe-id').height = document['body'].offsetHeight;
}