Auto-resize IFrame

I really need someone's help on this> I have a little image inside an IFrame that upon being clicked on, will display another image and slide down a little. How can I make the IFrame automatically get bigger or smaller, according to its contents?

Thank you so much!

*edit After researchin开发者_Go百科g this more, I have found quite a few examples that claim (i have not tested them) to do what I need, but ONLY after a page-refresh. Which is something I cannot do.

You can change the size of your iFrame using a JavaScript method. Then you associate that method to your iFrame's OnLoad event.

There was no point re-authoring the code as it is short and to the point in the above link. One person said it doesn't work in Opera but try it and see if it suits your needs.

I think you can auto resize your iframe without an iframes on load event or any of that. But i only tested in ie7 + and it works in 3.6+ firefox and chrome.

Here is what i came up with.

var $app = $(window[options.name]),
            $appContainer = $("#app-runner");

        window.setInterval(function() {
            var frameEl = $app[0].frameElement,
                frameDoc = 0,
                height = 0;

            if (frameEl.contentDocument !== undefined) {
                frameDoc = frameEl.contentDocument,
                height = frameDoc.height || frameDoc.body.offsetHeight;
            } else if (frameEl.document !== undefined && frameEl.document.documentElement !== undefined) {
                frameDoc = frameEl.document.documentElement,
                height = frameDoc.offsetHeight;
            }
            $appContainer.css("height", height);
        }, 500);

Obviously there are better choices for better performance. But this is what i came up with. The html is simple. Just ahve an iframe wrapped in a div with id === "app-runner". The iframe should have height = 100%. This way, no scroll bars are needed, app just auto resizes on every 500ms (better and quicker results = more processor time required)