0

コンテンツが自動更新されるたびに（数分ごとに）、またはユーザーがコンテンツを操作するときに、コンテンツに合わせてサイズを変更したいiframeがあります。コンテンツは同じドメインにありますが、コンテンツを変更するのは難しいでしょう。理想的には、iframeはそのコンテンツのサイズに合わせて自己調整します。

一度だけサイズ変更する現在のコード：

<iframe id="ganglia-frame" src="ganglia.url" width="100%" height="500%">
    blah not supported blah
</iframe>

<script language="Javascript">
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow ||
                    iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height =
                        iframeWin.document.documentElement.scrollHeight ||
                        iframeWin.document.body.scrollHeight;
            }
        }
    }

    $(window).load(function () {
        setIframeHeight(document.getElementById('ganglia-frame'));
    });
</script>

関連する質問：コンテンツに合わせてiframeの幅の高さを調整します

4

2 に答える 2

0

タイマーを設定し、しばらくしてからiFrameのサイズを確認する必要があります。すべてのブラウザがすぐに正しいサイズを返すわけではないため、数回チェックする必要がある場合があります。

このメソッドは、同じドメインのiFrameでのみ機能します。

関数をiFrameonloadイベントにバインドし、実行時にiFrameの高さを確認します。高さが見つからない場合は、しばらくしてから別のチェックをスケジュールしてください。

var iFrameSizeCount = 0;
var onloadFunction = function(event){
    var contentHeight = document.getElementById('iFrameId').contentWindow.document.body.offsetHeight;

    if(contentHeight == 0){
         // Schedule a recheck in a few moments
         iFrameSizeCount++; // we keep a count of how many times we loop just in case
         if(iFrameSizeCount  < 10){ // after a while we have to stop checking and call it a fail
             setTimeout(function(){ onloadFunction(event); }, 200);
             return false;
         }
         else {
              contentHeight  = 100; // eventually if the check fails, default to a fixed height. You could possibly turn scrolling to auto/yes here to give the iFrame scrollbars.
         }
     }
    contentHeight += 30; // add some extra padding (some browsers give a height that's slightly too short)

    document.getElementById('iFrameId').style.height = contentHeight + 'px';
}

次に、イベントをiFrameのonloadイベントにバインドします（ただし、必要に応じて）。

「scrolling=auto」は、サイズ設定が失敗した場合に備えて、少なくともスクロールバーがある場合に便利です。onloadイベントは、iFrameがリロードされた場合に発生するため、iFrame内のリンクをクリックした場合に役立ちます。

于 2012-08-22T23:59:08.377 に答える
0

私はこのjQueryプラグインで幸運に恵まれました-https ://github.com/davidjbradshaw/iframe-resizer

于 2015-08-19T19:32:39.977 に答える