javascript - Make iframe expandcollapse - Stack Overflow

admin管理员组

文章数量:1388812

I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).

I want to add a button somewhere that can expand and collapse the iframes to full size of the page.

The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.

Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.

I can't use HTML5 since we need to support IE7.

I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).

I want to add a button somewhere that can expand and collapse the iframes to full size of the page.

The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.

Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.

I can't use HTML5 since we need to support IE7.

• javascript
• html
• iframe

Share Improve this question Follow asked Oct 24, 2012 at 16:51 Roman GoyenkoRoman Goyenko 7,08266 gold badges5454 silver badges8585 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

An example.

Basically, just give your expanded iframe these CSS attributes,

position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;

and it will fill its (relative) parent.

Source: "Full screen" <iframe>

You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.

If I were you, I might code it as (using jQuery):

$('iframe#myid').click(function() {
    $('iframe#' + current).removeClass('current');
    $('iframe#myid').addClass('current');
    var current = '#myid';
});

with the CSS code as:

body, iframe {
    margin: 0px; //to normalize the default stylesheet applied by the browser
}

iframe.current {
    position: absolute;

    top: 0; 
    left: 0;

    height: 100%;
    width: 100%;

    z-index: 999;
}

本文标签： javascriptMake iframe expandcollapseStack Overflow