javascript - iframe に垂直方向のスペースをとらせる

Question

iframeコンテンツを表示し、スクロールバーを表示するのに必要なだけの垂直方向のスペースを取りたいと思います。それはまったく可能ですか？

回避策はありますか?

Answer 1

これにより、IFRAME高さがコンテンツの高さに設定されます。

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>

に追加scrolling="no"してIFRAME、スクロールバーをオフにすることができます。

編集：おっと、宣言するのを忘れていましたthe_height。

Answer 2

このスレッドもチェックしてください: DiggBar はドメインにないコンテンツに基づいて iframe の高さを動的にサイズ変更しますか? .

それは同じ質問に対処します。

Answer 3

DOCTYPEソース文書に宣言を追加するIFRAMEと、行から正しい値を計算するのに役立ちます

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight

例については、W3C DOCTYPE を参照してください

. _ iframe_DOCTYPE

FF/IE/Chrome のサポート: .scrollHeight は Chrome では機能しないため、jQuery を使用IFRAMEして iframe コンテンツに基づいてページのすべての高さを設定する JavaScript の例を考え出しました。注: これは、現在のドメイン内の参照ページ用です。

<script type="text/javascript">
    $(document).ready(function(){
        $('iframe').each(function(){
            var context = $(this);
            context.load(function(event){ // attach the onload event to the iframe  
                var body = $(this.contentWindow.document).find('body');
                if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                    context.height($(body.get(0)).height() + 20);
                } else {
                    context.hide(); // hide iframes with no contents
                }
            });
        });
    });
</script>

Answer 4

この CSS スニペットは、垂直スクロールバーを削除する必要があります。

body {
  overflow-x: hidden;
  overflow-y: hidden;
} 

必要なだけの垂直方向のスペースを占有するかどうかはまだわかりませんが、わからないかどうか見ていきます.

Answer 5

<iframe>回避策は、サーバー側でコードを使用して前処理しないことです。