web-dev-qa-db-ja.com

jqueryは、ロード時にiframeコンテンツの高さを取得します

Main.phpのiframe内にロードしているhelp.phpというヘルプページがあります。iframeにロードした後、このページの高さを取得するにはどうすればよいですか。

Iframeの高さを100％または自動にスタイル設定できないため、これを求めています。だから、javascriptを使用する必要があると思います。jQueryを使用しています

CSS：

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS：

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML：

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>
jqueryiframeheightonload
75
FFish

oK、ようやく良い解決策が見つかりました。

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

一部のブラウザ（古いSafariおよびOpera）は、CSSがレンダリングされる前にonloadが完了したと報告するため、マイクロタイムアウトを設定し、iframeのsrcを空白にして再割り当てする必要があります。

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}
99
FFish

それほど複雑ではない答えは、.contents()を使用してiframeに到達することです。興味深いことに、身体のパディングのために、元の回答のコードを使用して得られる値とは異なる値を返します。

$('iframe').contents().height() + 'is the height'

これがクロスドメイン通信のために私がそれをやった方法なので、多分不必要に複雑になるのではないかと心配しています。まず、jQueryをiFrameのドキュメント内に配置します。これはより多くのメモリを消費しますが、スクリプトを一度ロードするだけでよいので、ロード時間を増やすべきではありません。

IFrameのjQueryを使用して、できるだけ早くiframeの本体の高さを測定し（onDOMReady）、URLハッシュをその高さに設定します。また、親ドキュメントで、iFrameの場所を調べて必要な値を抽出するonloadイベントをiFrameタグに追加します。 onDOMReadyは常にドキュメントの読み込みイベントの前に発生するため、競合状態が複雑になることなく、値が正しく通信されることを確信できます。

言い換えると：

... Help.phpで：

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

...そして親文書内：

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );
46
Andrew

Chrome、Firefox、IE11で動作する次のものが見つかりました。

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

Iframesコンテンツの読み込みが完了すると、イベントが発生し、IFramesの高さをコンテンツの高さに設定します。これは、IFrameと同じドメイン内のページでのみ機能します。

20
Jack Zach Tibbles

これを行うためにiframe内でjqueryは必要ありませんが、コードを非常に単純にするために使用します...

これをiframe内のドキュメントに入れます。

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

小さなウィンドウのスクロールバーを削除するために上記の5つを追加しましたが、サイズが完全ではありません。

そしてこれはあなたの親文書の中にあります。

function set_size(ht)
{
$("#iframeId").css('height',ht);
}
6
RkaneKnight

JQueryを使用せずにこれを行うコードは、今日では簡単です。

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

イベントのフックを解除するには：

frame.removeEventListener('load', syncHeight)
5
cchamberlain

これは私のために働いた正しい答えです

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });
4
Javier Gordo

シンプルなワンライナーは、デフォルトの最小高さから始まり、コンテンツサイズまで増加します。

<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
2
Pixelomo

受け入れられた回答の$('iframe').loadはa.indexOf is not a functionエラーを生成します。以下に更新できます。

$('iframe').on('load', function() {
  // ...
});

JQuery 1.8以降廃止された.loadに類似した他のいくつか： 「新しい基盤プロジェクトを開くときの「Uncaught TypeError：a.indexOfは関数ではありません」エラー

2
Ryan J. Stout