インラインフレームclientHeightは、コンソールで異なっている、本物のIFRAME本体の高さ（angular2）

Question

Plunkrを取得する必要があります：私は戻ると

：私はElementRef trhough移動するとhttp://embed.plnkr.co/w2FVfKlWP72pzXIsfsCU/

は、私は以下の高さを取得しますブラウザのコンソールの値、私は間違った値に

目標を取得：アイフレームのコンテンツの実際の高さにはiframeをリサイズする

問題：iframe本体の実際の高さが私のものと異なっています。私は間違って何をしていますか？

ありがとうございました！

Answer 1

iFrameの正確な高さを確認することは、確認できる6つの異なるプロパティを選択でき、常に正しい答えを返すことができないため、簡単ではありません。私が思いついたもっとも簡単な解決策は、bodyタグをオーバーフローさせるためにCSSを使わない限り、この関数が機能することです。

function getIFrameHeight(){ 
    function getComputedBodyStyle(prop) { 
     return parseInt(
      document.defaultView.getComputedStyle(document.body, null), 
      10 
     ); 
    } 

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

ずっと長いIE8のバージョンは、このanswerを見るためにこれは、IE9のバージョンです。

ボディをオーバーフローさせてコードを修正できない場合は、offsetHeightまたはscrollHeightプロパティのいずれかをdocument.documentElementとして使用する方がよいでしょう。両方とも長所と短所があり、両方をテストしてどちらがあなたに適しているかを確認するのが最善です。

最も信頼性の高い方法は、ページの一番下の要素の下の位置を試してみることです。これは現代のブラウザではうまくいくが、古いものでは遅い。

function getMaxElement(elements) { 
    var 
     elementsLength = elements.length, 
     elVal   = 0, 
     maxVal   = 0; 

    for (var i = 0; i < elementsLength; i++) { 
     elVal = elements[i].getBoundingClientRect()[side] + getComputedStyle('marginBottom',elements[i]); 
     if (elVal > maxVal) { 
      maxVal = elVal; 
     } 
    } 

    return maxVal; 
} 

これらのコードスニペットは、iFrameの内容を保持するために書いたライブラリのものです。これに加えて、iFrameと親ページの両方のイベントを監視し、iFrameが適切なサイズを維持していることを確認し、一般的なiFrameの問題を解決するための他の機能も提供します。あなたにとって興味深いかもしれません。

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