[解決済み] iframeのサイズを動的に変更する

質問

状況を教えてください。 私は、典型的なHTML/CSSのコンボを含むレスポンシブデザインに取り組んでいます。divの中にiframeがあるケースを除いて、すべてがうまくいっています。iframeは親divのサイズに自動的に調整される必要があります。純粋なCSSによる解決策はないので、JQueryのアプローチで行っています。小さい幅から大きい幅の画面へのリサイズという1つのシナリオを除いては、うまく動作しています。

HTMLです。

<div class="container">
    <iframe class="iframe-class" src="http://www.cnn.com/"></iframe>
</div>

CSSです。

.container {
    width: 100%;
    height: 250px;
}
.iframe-class {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

Javascriptを使用しています。

$(function () {
    setIFrameSize();
    $(window).resize(function () {
        setIFrameSize();
    });
});

function setIFrameSize() {
    var ogWidth = 700;
    var ogHeight = 600;
    var ogRatio = ogWidth / ogHeight;

    var windowWidth = $(window).width();
    if (windowWidth < 480) {
        var parentDivWidth = $(".iframe-class").parent().width();
        var newHeight = (parentDivWidth / ogRatio);
        $(".iframe-class").addClass("iframe-class-resize");
        $(".iframe-class-resize").css("width", parentDivWidth);
        $(".iframe-class-resize").css("height", newHeight);
    } else {
        // $(".iframe-class-resize").removeAttr("width");
        // $(".iframe-class-resize").removeAttr("height");
        $(".iframe-class").removeClass("iframe-class-resize");
    }
}

http://jsfiddle.net/TBJ83/

問題あり。 ウィンドウが小さくなると、ウィンドウ幅を継続的にチェックし、480pxに達すると、コードは iframe-class-resize で、幅と高さをそのクラスに設定する。ウィンドウのサイズが大きくなると、サイズが480pxになった時点でクラスを削除します。問題は、widthとheightの属性は、クラスそのものではなく、要素に直接追加されることです。したがって、クラスを削除しても、新しいwidthとheightは削除されません。私は、この属性を強制的に削除するために removeAttr() (上記コメントアウト)が、うまくいきませんでした。

どなたか、上のコードのどこが悪かったかわかりますか？または、レスポンシブiframeをより効果的に実現する方法について、何かご提案があれば教えてください。主に必要なことは、iframe が <div></div> で、そのdivには必ずしも幅や高さが定義されていないかもしれません。理想的には、親divに幅と高さが明示的に定義されている必要がありますが、このサイトの現在の設定方法では、常にそれが可能とは限りません。

追加です。 上記で十分に理解できなかった場合は、以下を試して問題を再現してください。

• デスクトップマシンでブラウザを立ち上げる。私はWindowsマシンでChromeを使用しています。ブラウザを最大化しないでください。
• 上のjsfiddleを開いてください( http://jsfiddle.net/TBJ83/ ). iframeのコンテンツがプレビューパネルの幅全体に広がっていることに気がつくと思います。
• ウィンドウ全体が480pxになるまで、手動で幅を縮小してください。この時点で、iframeのコンテンツはかなり小さくなります。
• ウィンドウ全体が >> 480px になるまで、手動で幅を元に戻す。目標は、そのiframeのコンテンツが、プレビューパネルの幅全体を取り戻すことです。代わりに、コンテンツは .css() 関数は、CSSの変更をクラスではなく、要素に直接適用します。

よろしくお願いします。

どのように解決するのですか？

30文字程度でできます。変更してください。

$(".iframe-class").removeClass("iframe-class-resize")

になります。

$(".iframe-class").removeClass("iframe-class-resize").css({ width : '', height : '' })

これは、要素に適用した幅/高さをリセットします。このとき .css() に渡すものは何でも追加されます。 style 属性で指定します。空白の値を渡すと、jQueryはそのプロパティを style 属性を使用します。

以下は、更新されたフィドルです。 http://jsfiddle.net/TBJ83/3/

EDIT

OK、ここにパフォーマンスのために微調整されたものがあります（そして、単に他の方法もあります）。

$(function () {

    //setup these vars only once since they are static
    var $myIFRAME   = $(".iframe-class"),//unless this collection of elements changes over time, you only need to select them once
        ogWidth     = 700,
        ogHeight    = 600,
        ogRatio     = ogWidth / ogHeight,
        windowWidth = 0,//store windowWidth here, this is just a different way to store this data
        resizeTimer = null;

    function setIFrameSize() {
        if (windowWidth < 480) {

            var parentDivWidth = $myIFRAME.parent().width(),//be aware this will still only get the height of the first element in this set of elements, you'll have to loop over them if you want to support more than one iframe on a page
                newHeight      = (parentDivWidth / ogRatio);

            $myIFRAME.addClass("iframe-class-resize").css({ height : newHeight, width : parentDivWidth });
        } else {
            $myIFRAME.removeClass("iframe-class-resize").css({ width : '', height : '' });
        }
    }

    $(window).resize(function () {

        //only run this once per resize event, if a user drags the window to a different size, this will wait until they finish, then run the resize function
        //this way you don't blow up someone's browser with your resize function running hundreds of times a second
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            //make sure to update windowWidth before calling resize function
            windowWidth = $(window).width();

            setIFrameSize();

        }, 75);

    }).trigger("click");//run this once initially, just a different way to initialize
});