具有固定宽度和动态高度的iframe

Question

Is it possible to use an iframe with a fixed width (.ex. 75%) and a dynamic height ? Want I want to achieve is that when the page that is loaded into the iframe, it will not be wider than I have specified, but the lenght needs to be according to the page its content. Is it a page with 5 lines text, the frame will be just big enough to display these 5 lines. Are we loading a large document with 1000 lines, the Iframe height will be automatically adjusted.

Prerequisites:

• The url in the frame is on a different domain from the parent.
• The code should work on mobile phone browsers too.
• Let's try to avoid jQuery if possible. (to make the above faster)

Answer 1

I know you'd like to avoid it, but it really shouldn't slow you down so much that it'd be a burden on your site. I've done far crazier things with jquery and it's handled it like a champ. When talking "dynamic" it's usually a safe bet that you will need to touch some javascript at some point :P

$(selector)[0].scrollHeight

As for making it dynamic? You could setup an interval to adjust the height.

Something like this:

function setHeight(selector){ 
    var contentHeight = $(selector)[0].scrollHeight;
    $('#iframe-id').attr('height', contentHeight);
}

Then you either load it on page load or you wrap it in a setInterval.

If it's just the jquery thing and you don't mind javascript, then this site could help you http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

Answer 2

IFrame height can be manipulated using the page rendering code, or JavaScript...but there is no way for the iframe to dynamically resize based on content.

The link in mplungjan's comment takes you to a really good post about this subject.