web-dev-qa-db-ja.com

スクロールバーを使わずにiframeが自動的にコンテンツに合わせて高さを調整するようにしますか？

例えば：

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

スクロールを使わずに、中身に合わせて高さを調整できるようにしたいです。

htmliframeheightscrollbar
452
akashbc

これを<head>セクションに追加してください。

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

そして、iframeをこれに変更してください。

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

サイトポイントディスカッション に見られるように。

587
hjpotter92

このライブラリを使用すると、iframeのコンテンツのサイズが変わるたびにそれを検出し（setIntervalの定期的なチェックまたはMutationObserverを介して）、サイズを変更して、iframeのサイズを正しく設定し、正しいサイズに保ちます。

https://github.com/davidjbradshaw/iframe-resizer

これは、クロスドメインと同じドメインの両方のiframeで機能します。

83
user2684310

これはコンパクト版です：

<iframe src="hello.html"
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
39
Chong Lip Phang

hjpotter92 による提案はサファリでは動作しません！スクリプトを少し調整して、Safariでも機能するようになりました。

ブラウザによっては高さを下げることができるようにするために、毎回のロードごとに高さを0にリセットすることだけが行われています。

これを<head>タグに追加します。

<script type="text/javascript">
  function resizeIframe(obj){
     obj.style.height = 0;
     obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

そして、以下のonload属性をiframeに追加してください。

<iframe onload='resizeIframe(this)'></iframe>
36
Allan P

インラインJavaScriptを避けます。あなたはクラスを使うことができます：

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>

そしてそれをjQueryで参照してください。

$('.iframe-full-height').on('load', function(){
    this.style.height=this.contentDocument.body.scrollHeight +'px';
});
13
rybo111

hjpotter92 という回答は、特定のケースでは十分に機能しますが、Chromeでは問題ありませんが、FirefoxとIEではiframeのコンテンツが切り捨てられることがよくありました。

以下は私にとってはうまくいき、クリッピングの問題を修正します。コードは http://www.dyn-web.com/tutorials/iframes/height/ にありました。 HTMLからonload属性を削除するように少し修正しました。次のコードを<iframe> HTMLの後、および終了する</body>タグの前に配置します。

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>

あなたのiframe HTML：

<iframe id="ifrm" src="some-iframe-content.html"></iframe>

文書の<head>にJavascriptを含める場合は、 dyn-web Webページのように、onload HTMLのインラインiframe属性を使用することに戻すことができます。

13
Jimadine

jQueryの .contents（） methodメソッドを使用すると、DOMツリー内の要素の直接の子を検索できます。

jQuery：

$('iframe').height( $('iframe').contents().outerHeight() );

Iframeの内側にあるページの本体は、その高さが必要です。

CSS：

body {
  height: auto;
  overflow: auto
}
5
Nathalia Xavier

これは私にとってはうまくいきます（1ページに複数のiframeがある場合も同様）。

$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
3
user2992220

これは私のために働きます（ほとんど）。

これをあなたのページの一番下に置いてください。

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="application/javascript" src="/script/jquery.browser.js">
</script>

<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>

<script type="application/javascript"> 
  jQuery('iframe').iframeAutoHeight();
  $(window).load(
      function() {
          jQuery('iframe').iframeAutoHeight();  
      }
  );

  // for when content is not html e.g. a PDF
  function setIframeHeight() {
      $('.iframe_fullHeight').each(
          function (i, item) {
              item.height = $(document).height();
          }
      );
  };

  $(document).ready( function () {
      setIframeHeight();
  });
  $(window).resize( function () {
      setIframeHeight();
  });
</script>

前半は???からのもので、iframeにhtmlがあるときに動作します。後半では、iframeクラスがiframe_fullHeightの場合、iframeをページの高さ（コンテンツの高さではない）に設定します。コンテンツがPDFなどの場合はこれを使用できますが、クラスを設定する必要があります。フルハイトであることが適切な場合にのみ使用することもできます。

注：何らかの理由で、ウィンドウのサイズ変更後に再計算すると、高さが正しくなくなります。

2
ctrl-alt-delor

IE11のためにこれを試してください

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
1
Lucky
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
1
Айдън Бейтулов
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}

これをあなたのiframeに追加してください：onload = "autoResize（ 'youriframeid'）"

1
Simon

AngularJSを使ってやりました。 Angularにはng-loadはありませんが、サードパーティ製のモジュールが作られました。以下でシャワーでインストールするか、ここでそれを見つけます： https://github.com/andrefarzat/ng-load

NgLoadディレクティブを取得します：bower install ng-load --save

Iframeを設定します。

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>

コントローラresizeIframe関数：

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
0
Charles Naccio

私は過去に動的に作成されたiframeに対してiframe.onloadを呼び出すのに問題があったので、私はiframeサイズを設定するためにこのアプローチで行きました：

iFrameビュー

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);

メインビュー

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}

（これは、両方のビューが同じドメインにある場合にのみ機能します）

0
Owen