web-dev-qa-db-ja.com

内部のコンテンツに基づいてiframeの高さを動的にする - JQUERY / Javascript

私はiframeでaspxのWebページを読み込んでいます。 Iframe内のコンテンツは、iframeの高さよりも大きい場合があります。 iframeはスクロールバーを持ってはいけません。

私はiframeの中にラッパーのdivタグを持っています。サイズ変更を可能にするためにjQueryを書きました。

$("#TB_window", window.parent.document).height($("body").height() + 50);

TB_windowはIframeが含まれるdivです。

body - iframe内のaspxの本体タグ。

このスクリプトはiframeコンテンツに添付されています。親ページからTB_window要素を取得しています。これはChromeでは問題なく動作しますが、TB_windowはFirefoxでは縮小します。なぜそれが起こるのか、私は本当に混乱しています。

javascriptjqueryasp.netiframe
178
karry

以下を使用して、IFRAMEのコンテンツの高さを取得できます。contentWindow.document.body.scrollHeight

IFRAMEがロードされたら、次のようにして高さを変更できます。

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>

次に、IFRAMEタグで、次のようにハンドラーを接続します。

<iframe id="idIframe" onload="iframeLoaded()" ...

私はしばらく前に、フォームの送信が行われた後にiframeLoaded自体からIFRAMEを呼び出す必要がある状況を経験しました。これを実現するには、IFRAMEのコンテンツスクリプト内で次のようにします。

parent.iframeLoaded();
195
Aristos

アリストスへの少し改善された答え...

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

次に、iframeで次のように宣言します。

<iframe onload="resizeIframe(this)" ...

2つの小さな改良点があります。

  1. Onloadコールバックに既に含まれているので、document.getElementByIdを介して要素を取得する必要はありません。
  2. 次のステートメントでiframe.height = ""を再割り当てするのであれば、これを設定する必要はありません。 DOM要素を扱っているので、そうすることは実際にオーバーヘッドを招きます。
95
BlueFish

X-FRAME-OPTIONS：Allow-From はサファリやクロム ではサポートされていないので、私は受け入れられた答えでは十分ではないことがわかりました。その代わりに、DisqusのBen Vinegarによる プレゼンテーション で見られた、別のアプローチで行った。これは、親ウィンドウにイベントリスナーを追加してから、iframe内でwindow.postMessageを使用してイベントを親に送信し、イベントの実行を指示することです（iframeのサイズ変更）。

そのため、親ドキュメントにイベントリスナーを追加します。

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

そしてiframeの中に、メッセージを投稿する関数を書きます。

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

最後に、iframe内で、bodyタグにonLoadを追加して、サイズ変更関数を起動します。

<body onLoad="resize();">
51
Marty Mulligan

これをiframeに追加してください、これは私のために働きました：

onload="this.height=this.contentWindow.document.body.scrollHeight;"

そして、あなたがjQueryを使うならば、このコードを試してください：

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
10
Mohit Aneja

IFrameのコンテンツの高さを取得するために確認できる4つの異なるプロパティがあります。

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

残念なことに、彼ら全員が異なる答えを出すことができ、これらはブラウザ間で矛盾しています。ボディマージンを0に設定した場合、document.body.offsetHeightが最良の答えを与えます。正しい値を得るためにこの関数を試してください。これは、iframe-resizerライブラリから取得されます。内容が変わるか、ブラウザのサイズが変更されます。

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}
6
David Bradshaw

念のため、これは誰にでも役立ちます。これを機能させるために髪の毛を引き抜いていたところ、iframeの高さが100％のクラスエントリがあることがわかりました。これを削除すると、すべて正常に機能しました。そのため、CSSの競合がないか確認してください。

2
user8640976

ここで関連質問を参照することができます - iframeの幅と高さを親のdivと同じにするには？

動的な高さを設定するには -

  1. クロスドメインのiFrameと親と通信する必要があります。
  2. それでは、iframeのスクロールの高さ/コンテンツの高さを親ウィンドウに送ることができます

コード - https://Gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

1
Mohan Dere

私が見つけた最も簡単な方法はjavscript/jqueryを使用するよりもむしろ：

<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>

ここでは1vh =ブラウザウィンドウの高さの1％です。だから設定される高さの理論値は100vhですが、実際には98vhが魔法をしました。

1
PHP-Binod

他の答えは私のために働いていなかったので私はいくつかの変更をしました。これが役立つことを願っています

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
1
Ravi

特に私が使っていたスクロールがない場合は、一番下の部分で途切れているように見えるウィンドウの塊を追加します。

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }
0
Matt Stacey

BlueFishへの少し改善された答え...

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

これは、レスポンシブデザインに適したウィンドウスクリーン（ブラウザ、電話）の高さ、および高さが大きいiframeを考慮しています。パディングは、画面全体に表示される場合に、iframeの上下に必要なパディングを表します。

0
Tadej Vengust

簡単な解決策は、コンテンツ領域の幅と高さを測定し、それらの測定値を使用して下部パディングの割合を計算することです。

この場合、測定値は1680 x 720 pxなので、下部のパディングは720/1680 = 0.43 * 100となり、43％になります。

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}
0
loek

Troyからの回答がうまくいかなかったことがわかりました。これはajax用に書き直されたコードと同じです。

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});
0
Martin Lester

また、ブラウザがレイアウトをペイントする前に常に呼び出されるように、繰り返しのrequestAnimationFrameをresizeIframeに追加することもできます（たとえば、@ BlueFishの回答から）。また、iframeの高さが変更されたときにiframeの高さを更新できます。例えば入力フォーム、遅延ロードされたコンテンツなど.

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

あなたのコールバックはあなたの全体的なパフォーマンスに大きな影響を与えないように十分速くなければなりません

0
user2520818
jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
0
Keyur Savsani

あなたがjqueryのない解決策を必要とするとき、これは役に立ちます。その場合は、コンテナを追加してパディングをパーセンテージで設定してください。

HTMLのサンプルコード：

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

CSSのサンプルコード：

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}
0
Juan M

PHP htmlspecialchars（）を使用したサンプル+高さが存在し、> 0であるかどうかを確認します。

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
0
jteks