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

Question

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

私はaspxのWebページをiframeにロードしています。 Iframeのコンテンツの高さがiframeの高さよりも高くなる可能性があります。 iframeにはスクロールバーがありません。

基本的にすべてのコンテンツであるiframe内にラッパー div タグがあります。私はサイズ変更を行うためにいくつかのjQueryを書きました：

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

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

body - the body tag of the aspx in the iframe.

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

156

追加された 06 2月 2012 〜で 03:55 著者 karry 編集された 10 8月 2015 〜で 10:49

ビュー: 3

源

ro ru fr es pt de hi bn ar kk uz be tr uk

その.aspx iframeページは同じドメイン名からですか？

追加された 06 2月 2012 〜で 03:59, 著者 AlexC, 源

あなたは$（ "body"）をチェックできますか？height（）にはfirefoxの値がありますか？

追加された 06 2月 2012 〜で 04:01, 著者 Michael L Watson, 源

角度のあるiFrameの自動高さの例： gitlab.com/reduardo7/angular-iframe-auto-height

追加された 03 10月 2016 〜で 02:52, 著者 Eduardo Cuomo, 源

@MichaelLWatson Firebugウォッチウィンドウのボディーの高さが0の値を持っているようです... Chromeには値はありますが

追加された 06 2月 2012 〜で 04:04, 著者 karry, 源

はい。iframeはコンテナページと同じドメインにあります

追加された 06 2月 2012 〜で 04:02, 著者 karry, 源

15 答え

You can retrieve the height of the IFRAME's content by using: 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()" ...

Form-submissionが発生した後に、 iframeLoaded を IFRAME から呼び出す必要がある状況がありました。 IFRAME のコンテンツスクリプト内で以下を実行することでそれを達成できます：

parent.iframeLoaded();

173

追加された 06 2月 2012 〜で 04:05 著者 Aristos

源

@deebs iFrameID.height = ""; を iFrameID.height = "20px"; に変更することもできます。デフォルトのブラウザのiframeの高さは150pxで、 "" はそれを元に戻します。

追加された 04 10月 2016 〜で 03:49, 著者 philfreo, 源

私はケントンと同意します！私はこれのような何かをしたいと思っている！素晴らしいです、ありがとう！！！

追加された 28 3月 2014 〜で 05:32, 著者 Rocco The Taco, 源

Uncaught ReferenceError：iframeLoadedが定義されていません...

追加された 02 4月 2014 〜で 02:11, 著者 iamchriswick, 源

@Aristosメインウィンドウでは、iframe id = "idIframe" onload = "iframeLoaded（）"のようにiFrameにあります。

追加された 02 4月 2014 〜で 03:33, 著者 iamchriswick, 源

@ djack109明らかに動作することはできませんが、そのアイデアを使って成長させることができます...

追加された 12 10月 2016 〜で 07:33, 著者 Aristos, 源

@AndrewWCBrown iframeが何らかの難しいページを更新した場合、タイムアウトを使うことができます。ページが単純なら、これはまだ動作しています。

追加された 07 10月 2015 〜で 06:26, 著者 Aristos, 源

それが親にあるように@kryry。トリックはここのscrollHeightです

追加された 06 2月 2012 〜で 05:05, 著者 Aristos, 源

@ qdev googleサイトには、多くのアンチコピー/アンチフレームメカニズムがあります。 Googleと連携する唯一の方法は、Google APIを使用して、Googleが提供するパスから移動することです。

追加された 24 3月 2015 〜で 06:57, 著者 Aristos, 源

@Soumyaクロスドメインはこのコードとは関係ありません。コマンドでバイパスするセキュリティ上の問題があります。

追加された 24 2月 2013 〜で 07:44, 著者 Aristos, 源

@DavidBradshawこのリンクへの参照としてあなたのコメントを残してください、リンク/参照いただきありがとうございます。

追加された 10 4月 2014 〜で 11:39, 著者 Aristos, 源

@Soumya X-FRAME-OPTIONS のように

 Response.AddHeader（ "X-FRAME-OPTIONS"、 "SAMEORIGIN"）;  > response.addHeader（ "X-FRAME-OPTIONS"、 "Allow-From https://some.othersite.com"）;



追加された 24 2月 2013 〜で 07:56, 
著者 Aristos, 

源

@Prodacこのコードをiframe内ではなくメインウィンドウに配置します（iframeLoaded ）。

追加された 02 4月 2014 〜で 03:10, 著者 Aristos, 源

@Prodacをそこに追加し、bodyのどこかにある <script> </script> の中に完全なiframeloaded関数を追加します

追加された 02 4月 2014 〜で 04:32, 著者 Aristos, 源

これは、データシートや浮動小数点のdivのように "ロールアップ"する項目では機能しません。高さは、通常の展開されていない高さになり、最終的な高さではありません。

追加された 12 10月 2016 〜で 04:01, 著者 djack109, 源

@DavidBradshaw - そこにある素敵なスクリプトですが、それはクロスドメインでも機能するかもしれませんが、CORSで最もよく使用されるシナリオは、リモートロードされたページにアクセスできないときです。私はそのトリックをしないウェブサイト（埋め込み）にGoogleドキュメントのフォームを読み込むためのスクリプトを試していた;（

追加された 24 3月 2015 〜で 09:18, 著者 qdev, 源

このコードは素晴らしいです。私はこのコードを探すのに約1時間を費やしました。これはjsfiddleまたはcodepenに属します。素晴らしいソリューション！

追加された 14 9月 2015 〜で 04:14, 著者 www139, 源

これは、クロスドメインiframeサイズの問題を解決します。 github.com/davidjbradshaw/iframe-resizer

追加された 10 4月 2014 〜で 08:07, 著者 David Bradshaw, 源

たぶんそれは私のものかもしれませんが、高さが150px未満であれば、それは最小の高さとして設定されているようです。それには理由がありますか？私は1つのライナーのためにこれをしようとしている（最小）

追加された 19 8月 2016 〜で 08:39, 著者 deebs, 源

私は.scrollHeightの代わりに.offsetHeightを使用しなければなりませんでした。私はiframeに1〜2行しか持っていなかったので、scrollHeightはまだ150pxを計算していました。

追加された 22 8月 2016 〜で 02:01, 著者 deebs, 源

@DavidBradshawは答えとしてあなたのコメントを見たいと思う。

追加された 02 6月 2015 〜で 07:58, 著者 AllInOne, 源

setTimeoutを使用する必要があるかもしれませんが、それは間違った高さを計算していました。

追加された 06 10月 2015 〜で 07:51, 著者 Andrew WC Brown, 源

上記のスクリプトを親ウィンドウまたはIframeに添付する必要がありますか？

追加された 06 2月 2012 〜で 04:44, 著者 karry, 源

クロスドメインではサポートされていません。

追加された 24 2月 2013 〜で 06:19, 著者 Soumya, 源

@Aristos。クロスドメインの問題が発生した場合、このコードは適切ではないと私は言ったのです。今私は問題に直面していて、問題を解決するために文字通り私の髪を裂いています。権限がアクセスプロパティで拒否されているすべての時間.....（ドキュメント、documentElementなどを含むすべて）

追加された 24 2月 2013 〜で 07:49, 著者 Soumya, 源

著者 BlueFish · Answer 1 · 2013-01-31T03:42Z

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

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

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

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

マイナーな改善が2つあります。

document.getElementByIdを介して要素を取得する必要はありません - 既にonloadコールバックにその要素があります。
次のステートメントで再割り当てする場合は、 iframe.height = "" を設定する必要はありません。そうすることで、DOM要素を扱う際に実際にオーバーヘッドが発生します。

89

追加された 31 1月 2013 〜で 03:42 著者 BlueFish

源

フレーム内のコンテンツが常に変化している場合、あなたはどうしますか？

追加された 13 5月 2013 〜で 02:26, 著者 Kevin, 源

iframeを現在のサイズよりも小さくするために resizeIframe が必要な場合は、 iFrameID.height = ""; （または代わりに '20px'に設定する）が必要です。たとえば、親ウィンドウのサイズ変更時にこれをトリガーすると、ウィンドウとiframeの幅が広がり、結果としてiframeの高さを低くしたい場合、その行が必要です。 iframeが現在必要なコンテンツの高さよりも小さいのサイズである場合にのみ、 iframe.contentWindow.document.body.scrollHeight が正確であるためです。

追加された 04 10月 2016 〜で 03:56, 著者 philfreo, 源

コンテンツが変わるたびに誰かがサイズを変更する方法を見つけ出すことができれば、それは役に立つでしょう：D。ちょうどインターバルをしている間に...

追加された 05 2月 2016 〜で 08:38, 著者 Andrew, 源

このために...解決策は、postMessageとreceiveMessageを使用することです。 github.com/jeffomatic/nojquery-postmessage を使って解決しました。

追加された 13 5月 2013 〜で 11:13, 著者 BlueFish, 源

アイデアは、新しい高さを計算し、メッセージを受信し、それに応じてiframeの高さを調整する必要がある親フレームにメッセージを送信することです。

追加された 13 5月 2013 〜で 11:15, 著者 BlueFish, 源

コンテンツサイズが変更され続ける場合、またはiframeがドメイン以外の他のドメインに配置されるように設計されている場合、iframeがページを取得する場合は、別の処理を行う必要があります。

追加された 13 5月 2013 〜で 11:13, 著者 BlueFish, 源

これは、あなたがそれを適応させる場合にも同様に幅に対して有効です。

追加された 10 1月 2016 〜で 12:45, 著者 Smile4ever, 源

Pixelはいつも私にとっては短かったので、私はこれを思いついた：

 function resizeIframe（iframe）{var size = iframe.contentWindow.document.body.scrollHeight; var size_new = size + 20; iframe.height = size_new + "px"; }

追加された 14 12月 2013 〜で 03:20, 著者 Martin Mühl, 源

iframeのスクロールバーを非表示にしたいだけでなく、読み込み時に高さを取得したい場合に役立ちます：

 iframe.contentWindow.document.body.scrollHeight + "px"; iframe.contentWindow.document.querySelector（ "html"）。style.ov＆zwnj; erflow = "hidden";

追加された 23 2月 2018 〜で 12:23, 著者 John, 源

関数内でこれを最初に追加する必要がありました。iframe.height = '';

追加された 02 10月 2015 〜で 04:12, 著者 Will Peavy, 源

著者 Marty Mulligan · Answer 2 · 2014-04-11T06:26Z

私は、X-FRAME-OPTIONS：Allow-a はサファリまたはChromeでサポートされていません。 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をbodyタグに追加して、サイズ変更関数を起動します。

<body onLoad="resize();">

著者 Mohit Aneja · Answer 3 · 2015-04-22T02:51Z

これをiframeに追加すると、これは私のために働いた：

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

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

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

著者 David Bradshaw · Answer 4 · 2014-03-22T12:09Z

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

著者 PHP-Binod · Answer 5 · 2017-07-20T03:42Z

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

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

</div> </div>

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

著者 Mohan Dere · Answer 6 · 2016-08-12T12:37Z

You can refer related question here - How to make width and height of iframe same as its parent div?

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

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

And codes - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

著者 user8640976 · Answer 7 · 2017-09-20T11:43Z

ちょうどこれが誰のためにも役立ちます。私はこれを動作させるために私の髪を引っ張っていました、そして、iframeに高さ：100％のクラスエントリがあることに気付きました。これを取り除くと、すべてが期待通りに機能しました。ですから、cssの競合がないか確認してください。

著者 Michael L Watson · Answer 8 · 2012-02-06T04:09Z

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

および/または

$(window).height()

Stack Overflowの質問 ボディエレメントの高さを取得する方法を参照してください。

これを試して、jQueryで本文の高さを見つけてください：

if $("body").height()

Firebug の値はありません。多分それが問題です。

著者 Martin Lester · Answer 9 · 2013-07-04T10:04Z

私はトロイからの答えがうまくいかないことに気づいた。これは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 10 · 2014-02-20T03:06Z

特に、スクロールしていないときに、画面の一番下に表示されているように見えるチャンクを追加するには：

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 11 · 2016-11-15T05:15Z

これは、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%;
}

著者 loek · Answer 12 · 2016-11-15T08:43Z

単純な解決策は、内容領域の幅と高さを測定し、それらの測定値を使用して下端のパディング率を計算することです。

この場合、測定値は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 13 · 2017-01-27T08:06Z

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 14 · 2017-06-30T09:05Z

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