2

ファンシーボックスでiframeを表示します。iframe の HTML 内で、次のようにします。

<body style="width: 650px; height: 430px;">

次に、JSで次のことを行います。

$(".popup").fancybox({
    padding : 0,
    closeBtn : false,
    autoSize  : true,
    fitToView : false,    
    beforeShow: function()
    {
        this.width = ($("iframe").contents().find("body").width());
        this.height = ($("iframe").contents().find("body").height());
    }
});

「.popup」は次のとおりです。

<a href="url.php" class="popup" data-fancybox-type="iframe">

その iframe 内に異なるサイズ (400x150 としましょう) の別の HTML をロードすると、fancybox は高さを調整しますが、幅は調整しません。

どんな助けでも大歓迎です！

編集1：

ファンシーボックスを初めて実行すると、「.fancybox-inner」divが次のようにスタイル設定されます

width: 650px; height: 430px;

次に、iframe 内を移動すると、「.fancybox-inner」div が次のようにスタイル設定されます

width: 650px; height: 150px;

しかし、2番目のHTML bodyタグはこのようなものです

<body style="width: 400px; height: 150px;">

編集2：

この回答にリンクされているこのソリューションのコメントは、これが高さでのみ機能することを示しています

4

1 に答える 1

4

わかりました、fancybox バージョン 2.1.4 を使用してこれを行うことになりました (Thu, 10 Jan 2013)

1231行目で見つけることができます

origHeight = body.height();

その後、これを追加します

origWidth = body.width();

高さと高さの両方を自動調整する

于 2013-01-30T18:44:17.657 に答える