0

アプリを統合するページの iframe 内にいくつかのアプリがあります (アプリ コンテナーとして機能します)。

iframeをページのフルサイズに展開および折りたたむことができるボタンをどこかに追加したいと思います。

アプリには、メニュー、ヘッダー、フッターなどと、iframe 内のアプリケーションが含まれるようになりました。ユーザーが「+」ボタンをクリックすると、iframe をページ全体に拡張し、他のすべてを非表示にします。彼らがもう一度クリックすると、元のサイズに戻りたいです。

たぶん、これを実現できる何かがすでに書かれているかもしれません.iframeでいくつかのjsを実行しようとしましたが、ブラウザに依存しないコードを書くのは難しいようです.

IE7 をサポートする必要があるため、HTML5 は使用できません。

4

2 に答える 2

2

例。

基本的に、拡張されたiframeこれらの CSS 属性を指定するだけで、

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

そしてそれはその（相対的な）親を埋めます。

于 2012-10-24T17:07:45.377 に答える
1

出典： 「フルスクリーン」 <iframe>

これを実現するには、従来の JS または jQuery を使用できます。jQuery は、クロスブラウザーの DOM 処理を適切に行うことを目的とした JS ライブラリです。

もし私があなただったら、（jQueryを使って）次のようにコーディングするかもしれません：

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

CSSコードは次のとおりです。

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;
}
于 2012-10-24T17:04:20.153 に答える