2

Firefox で iFrame を動的にサイズ変更する方法などのスレッドを見つけました。リモート コンテンツに基づいた iframe のサイズ設定について説明しています。ただし、(Firefox で) ウィンドウ サイズに基づいて iframe の高さを設定する方法が見つかりませんでした。

他のブラウザは使用できます.body.scrollHeightが、Firefox は使用できないようです。参照してください... http://jsfiddle.net/gjrowe/X63KR/

自動サイズ設定で動作中の iframe を確認するには、このページを表示してください... http://jsfiddle.net/gjrowe/y2WCP/

Chrome などのブラウザでは動作しますが、Firefox では動作しません

4

2 に答える 2

3

クロスブラウザの修正を行うために私がしたことは次のとおりです...

このJavaScript関数を追加しました...

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

それから私は変わった...

var content_height=document.body.scrollHeight-100;

に...

var content_height=getDocHeight()-100;

http://jsfiddle.net/y2WCP/9/で実際に動作しているのを見ることができます

于 2013-04-10T20:02:07.860 に答える
2

jQueryを使用するかどうかはわかりませんが、jQueryを使用すると問題が解決したと思います..

// Header is 50px and footer is 50px; therefore, 100px is of screen height is used
// Define content_height and consider the 100px which has already been used
var content_height=document.body.scrollHeight-100;
//alert(content_height);
content_height = $(window).height() -110;
//alert(content_height);
// Set iframe height
document.getElementById('pdf_frame').style.height=content_height+"px";

// Reset iframe height after window resize
$(function(){
    $(window).resize(function(){
        content_height = $(window).height()-110;
        //var content_height=document.body.scrollHeight-100;

        document.getElementById('pdf_frame').style.height=content_height+"px";
    });
});

jsFiddle リンク

于 2013-04-10T19:15:42.137 に答える