web-dev-qa-db-ja.com

iFrameの自動サイズ調整方法

可能性のある複製：
コンテンツに基づいてiframeのサイズを変更

IFrameを読み込んでおり、iFrameのコンテンツの高さに基づいて親が自動的に高さを変更するようにします。

簡単に言うと、すべてのページは同じドメインに属しているため、クロスサイトスクリプティングの問題に遭遇するべきではありません。

javascriptiframeautosize
63
Allan

他の要素では、DOMオブジェクトのscrollHeightを使用し、それに応じて高さを設定します。これがiframeで機能するかどうかはわかりませんが（すべてについて少し気味が悪いので）、試してみる価値はあります。

編集：よく見てみると、一般的なコンセンサスは、offsetHeightを使用してiframe内から高さを設定しています。

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

そして、iframe-bodyのonLoadイベントで実行するようにアタッチします。

39
Oli

試してください：

14
xmedeko

たまたまあなたの質問に答えて、解決策を見つけました。しかし、それはjqueryです。簡単すぎます。

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

行くぞ！

乾杯！ :)

編集： divメソッドではなくiframeメソッドに基づくリッチテキストエディターがあり、すべての新しい行を展開する場合、このコードは必要なことを行います。

10
Shripad Krishna

以下は、すべてのブラウザでクロスドメインで機能する、非常にシンプルなソリューションです。

まず、iframeを含むhtmlページの高さを100％に設定し、cssを使用してiframeの高さを100％に設定すると、cssがすべてを自動的にサイズ調整するという概念で機能します。

コードは次のとおりです。

<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-Origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
7
Sky

これは ソリューション が私にとって最もうまくいきました。 jQueryとiframeの「.load」イベントを使用します。

2
craigmoliver

私の解決策（jqueryを使用）：

<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>  
<script type="text/javascript">
    $(function () {

        $('.tabFrame').load(function () {
            var iframeContentWindow = this.contentWindow;
            var height = iframeContentWindow.$(document).height();
            this.style.height = height + 'px';
        });
    });
</script>
1
iknowitwasyoufredo

@ShripadKによる解決策が最も役立ちましたが、iframeが複数ある場合は機能しません。私の修正は：

_function autoResizeIFrame() {
  $('iframe').height(
    function() {
      return $(this).contents().find('body').height() + 20;
    }
  )
}

$('iframe').contents().find('body').css(
  {"min-height": "100", "overflow" : "hidden"});

setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
_
  • $('iframe').height($('iframe').contents().find('body').height() + 20)は、すべてのフレームの高さを同じ値、つまり最初のフレームのコンテンツの高さに設定します。そのため、値ではなく関数でjqueryのheight()を使用しています。そのようにして、個々の高さが計算されます
  • _+ 20_は、iframeスクロールバーの問題を回避するためのハックです。数値は、スクロールバーのサイズよりも大きくする必要があります。ハッキングはおそらく回避できますが、iframeのスクロールバーを無効にします。
  • setInterval(..., 1)の代わりにsetTimeoutを使用して、私の場合のCPU負荷を減らします。
1
geekQ

IE 5.5+では、contentWindowプロパティを使用できます。

iframe.height = iframe.contentWindow.document.scrollHeight;

Netscape 6では（Firefoxも想定）、contentDocumentプロパティ：

iframe.height = iframe.contentDocument.scrollHeight
1
TimeSpace Traveller

実は-パトリックのコードも私にとってはうまくいきました。それを行う正しい方法は、これに沿ったものです：

注：少し先にjqueryがあります：


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
0
Allan

私の回避策は、iframeにCSSで予想されるソースページサイズをはるかに超える高さ/幅を設定し、backgroundプロパティをtransparentに設定することです。

Iframeセットallow-transparencyからtrueおよびscrollingからnoへ。

表示されるのは、使用するソースファイルだけです。 IE8、Firefox 3、およびSafariで動作します。

0
Gale

Oliには私に役立つソリューションがあります。レコードの場合、iFrame内のページはJavaScriptによってレンダリングされるため、offsetHeightを報告する前に、わずかな遅延が必要になります。これらの線に沿って何かのように見えます：


    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }
0
Allan

これは、プロトタイプを使用して見つけた最も簡単な方法です：

Main.html：

<html>
<head>


<script src="prototype.js"></script>

<script>
    function init() {
        var iframe = $(document.getElementById("iframe"));
        var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
        var cy = iframe_content.getDimensions().height;
        iframe.style.height = cy + "px";
    }
</script>

</head>

<body onload="init()">


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>

<br>
this is the next line

</body>
</html>

content.html：

<html>
<head>
<script src="prototype.js"></script>


<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>


</head>

<body>


<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>


</body>
</html>

これは、これまでのところ、すべての主要なブラウザーで機能するようです。

0
Ian Harrigan