iframe sizing - cross browser issue

问题

I am displaying pages from an external site (that I own) in an iframe in one of my pages. It's all fine except when viewed in Opera with the browser window size reduced (not widescreen), when the iframe shrinks and squashes the content. It works in widescreen (maximize browser window), and is OK in IE7, Firefox, Chrome and Safari in maximize and reduced window size. I have set the frame dimensions in the HTML and have nested the iframe in a div which is larger than the iframe via the css.

Is this a peculiar bug to Opera or is there something I can do about it?

回答1:

We had a similar issue with iframe sizing on our web app main page, although in IE6. The solution was to trap the window.onresize event and call a JavaScript function to appropriately size the iframe. content is the name of the iframe we want sized. Also note that we are using ASP.Net AJAX's $get which translates to document.getElementById()

window.onresize=resizeContentFrame;
resizeContentFrame();

function resizeContentFrame() {
    setFrameHeight($get('content'));
}

function setFrameHeight(f) {
    if(isDefined(f)) {
        var h=document.documentElement.scrollHeight;
        h-=(HEADER_HEIGHT+CONTENT_PADDING+5);
        f.style.height=h+'px';
    }
}

来源：https://stackoverflow.com/questions/91721/iframe-sizing-cross-browser-issue