JQUERY/Javascriptでiframeの高さを内部のコンテンツに応じて動的にする

Question

さらに

ソース非AMP版編集

JQUERY/Javascriptでiframeの高さを内部のコンテンツに応じて動的にする

iframeでaspxウェブページを読み込んでいます。iframe 内のコンテンツは、iframe の高さを超えることができます。iframeにはスクロールバーがあってはなりません。

iframe内にはラッパーdivタグがあり、基本的にこれがすべてのコンテンツです。リサイズを実現するためにjQueryを書いた：

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

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

body` - iframe 内の aspx の body タグ。

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

L84

編集された質問 10日 8月 2015 в 10:49

プログラミング

asp.net iframe javascript jquery

6日 2月 2012 в 3:55

49 ビュー

質問へのコメント (5)

Aristos · Answer 1 · 2012-02-06T16:05:14+00:00

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タグ上で次のようにハンドラをフックする：

BlueFish · Answer 2 · 2013-01-31T03:42:45+00:00

BlueFish

ソース非AMP版編集

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

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

そして、iframeの中で次のように宣言します：

eddyparkinson

編集した答え 29日 8月 2019 в 8:29

100

0

解説 (11)

Marty Mulligan · Answer 3 · 2014-04-11T18:26:46+00:00

X-FRAME-OPTIONS:Allow-From [safariまたはchromeではサポートされていません](https://developer.mozilla.org/en-US/docs/HTTP / X-Frame-Options)。代わりに別のアプローチに行きました。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内で、onLoadをボディタグに追加して、サイズ変更機能を実行します。

Mohit Aneja · Answer 4 · 2015-04-22T14:51:47+00:00

これをiframeに追加します。これは私にとってはうまくいきました。

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

jQueryを使用する場合は、次のコードを試してください。

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

David Bradshaw · Answer 5 · 2014-03-22T00:09:35+00:00

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

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

悲しいことに、それらはすべて異なる答えを出すことができ、これらはブラウザ間で一貫していません。ボディマージンを0に設定すると、「document.body.offsetHeight」が最良の答えを示します。正しい値を取得するには、この関数を試してください。これは、 iframe-resizerライブラリから取得されます。ライブラリは、コンテンツが変更されたときにiFrameを正しいサイズに保つか、ブラウザーがサイズ変更されます。

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');
}

Ravi · Answer 6 · 2019-06-01T08:05:07+00:00

Ravi

ソース非AMP版編集

他の回答はうまくいかなかったので、いくつかの変更を加えました。これが役立つことを願っています。

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

2

0

解説 (0)

user8640976 · Answer 7 · 2017-09-20T11:43:18+00:00

念のため、これは誰にでも役立ちます。これを機能させるために髪を抜いていたのですが、iframeに高さ100%のクラスエントリがあることに気付きました。これを削除すると、すべてが期待どおりに機能しました。したがって、cssの競合を確認してください。

user2520818 · Answer 8 · 2018-11-13T17:13:05+00:00

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


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

Mohan Dere · Answer 9 · 2016-08-12T12:37:16+00:00

関連する質問はこちらから参照できます-https://stackoverflow.com/questions/18765762/how-to-make-width-and-height-of-iframe-same-as-its-parent-div/38917939# 38917939。

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

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

そしてコード-https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8。

PHP-Binod · Answer 10 · 2017-07-20T15:42:46+00:00

PHP-Binod

ソース非AMP版編集

javscript / jqueryを使用するのではなく、私が見つけた最も簡単な方法は次のとおりです。

。

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

1

0

解説 (2)

jteks · Answer 11 · 2019-08-12T12:27:32+00:00

jteks

ソース非AMP版編集

PHP htmlspecialchars()を使用したサンプル+高さが存在し、>かどうかを確認します。 0:

。

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '...'
$iframe = '';

。

0

解説 (0)

Martin Lester · Answer 12 · 2013-07-04T10:04:20+00:00

トロイからの答えはうまくいかなかった。これは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' );
    }
});

Matt Stacey · Answer 13 · 2014-02-20T03:06:00+00:00

下部が切り取られているように見えるウィンドウのチャンクに追加するには、特にスクロールしていない場合は、次のように使用しました。

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

Juan M · Answer 14 · 2016-11-15T17:15:57+00:00

これは、jqueryのないソリューションが必要な場合に役立ちます。その場合は、コンテナを追加して、パディングをパーセンテージで設定してください。

HTMLサンプルコード:

<div class="iframecontainer">

</div>

CSS例コード:

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

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

loek · Answer 15 · 2016-11-15T20:43:10+00:00

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

この場合、測定値は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%;   
}

Tadej Vengust · Answer 16 · 2017-01-27T08:06:54+00:00

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の上下に必要なパディングを表します。

Keyur Savsani · Answer 17 · 2017-06-30T09:05:00+00:00

jQuery('.home_vidio_img1 img').click(function(){
    video = '';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = ;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

Michael L Watson · Answer 18 · 2012-02-06T16:09:00+00:00

Michael L Watson

ソース非AMP版編集

$(document).height() // - $('body').offset().top

および/または

$(window).height()

スタックオーバーフローの質問 https://stackoverflow.com/questions/806402 を参照してください。

jQueryでボディの高さを求めるには、これを試してみてください：

if $("body").height()

Firebug]1の場合は値がありません。おそらくこれが問題なのでしょう。

Community

編集した答え 23日 5月 2017 в 12:34

-1

0

解説 (2)