64

重複の可能性:
コンテンツに基づいて iframe のサイズを変更する

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

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

4

12 に答える 12

37

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

編集：周りを見回した後、一般的なコンセンサスは、次を使用してiframe内から高さを設定することoffsetHeightです：

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

そしてそれを添付して、iframe-body のonLoadイベントで実行します。

于 2008-10-29T15:06:31.523 に答える
14

試す：

于 2011-09-13T12:47:34.787 に答える
10

たまたまあなたの質問にたどり着いたのですが、解決策があります。しかし、それはjqueryにあります。シンプルすぎる。

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

ほら！

乾杯！:)

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

于 2010-06-03T15:28:28.547 に答える
9

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

まず、これは、iframeを含むhtmlページが100％の高さに設定され、iframeがcssを使用して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>
于 2010-08-11T01:39:12.937 に答える
1

@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)すべてのフレームの高さを同じ値、つまり最初のフレームのコンテンツの高さに設定します。height()そのため、値の代わりに関数でjquery を使用しています。このようにして、個々の高さが計算されます
  • + 20iframe スクロールバーの問題を回避するためのハックです。この数値は、スクロールバーのサイズよりも大きくする必要があります。ハッキングはおそらく回避できますが、iframe のスクロールバーを無効にします。
  • setTimeout私の場合、代わりに使用setInterval(..., 1)してCPU負荷を減らします
于 2011-09-10T14:31:01.367 に答える
1

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

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

Netscape 6 (Firefox も想定) では、contentDocument プロパティ:

iframe.height = iframe.contentDocument.scrollHeight
于 2008-10-29T15:24:57.523 に答える
1

私の解決策（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>
于 2011-10-25T12:42:54.357 に答える
0

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

iframeでとに設定allow-transparencyします。truescrollingno

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

于 2010-11-06T04:33:57.630 に答える
0

Oli には、私にとって有効な解決策があります。記録のために、iFrame 内のページは JavaScript によってレンダリングされるため、offsetHeight を報告する前にごくわずかな遅延が必要になります。これらの行に沿ったもののように見えます：


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

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }
于 2008-10-29T15:21:51.867 に答える
0

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

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>

これは (今のところ) すべての主要なブラウザーで動作するようです。

于 2011-06-17T09:05:50.280 に答える
-1

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

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


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
于 2008-10-29T18:12:21.663 に答える