LoginSignup
19
23

More than 1 year has passed since last update.

iframeの高さを自動調節する

Last updated at Posted at 2020-01-29

親サイトにifremeを入れたときにうまく高さが指定できなかったので
参考になるサイトを探しまくりました。

要件

iframe。よくあるyoutube、googlemapではなく、別のサイトのiframe(クロスドメインと言う)。

iframe側の高さが動的に変わる場合(例:記事のタイトルとか、日によって文字数がかわるやつ)高さを固定すると変にスクロールがついてしまい、見た目が悪い。

iframe使ってるってなるべく気づかれたくないときに活用できる

サンプルコード

index.html(親)
<script>
  window.addEventListener('message', function(e) {
  var iframe = $("#parentframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
      case 'setHeight':
          iframe.height(data);
          break;
      }
  }, false);
</script>
・・・
・・・
<body>
    <iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no"></iframe>
</body>
test-foo.html(子)
<script type="text/javascript">
  window.onload = function() {
      var height = document.getElementsByTagName("html")[0].scrollHeight;
      window.parent.postMessage(["setHeight", height], "*");
  }
</script>

tips

#parentframiframeにidを指定します。jsの箇所にもお忘れなく。

frameborder="no"はフレームの枠線の表示を非表示に指定してます
scrolling="no"はスクロールさせないと言う指定です
ですがどちらもHTML5では廃止されてますのでcssで指定してもいいかと思います。
↑の廃止された指定でも効くっちゃ効きます。

期待する結果

親のiframeにstyle="height: 150px;"とか、高さが自動で修得されてたら完成です。

index.html(親)
<iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no" style="height: 150px;"></iframe>

tips

ちなみにheight: 150pxはiframeのデフォルトの高さです
おそらく最小の高さと思われます。

参考サイト

iframeに異なるドメイン(クロスドメイン)のコンテンツを読み込んで高さを自動調節する方法
HTML5タグリファレンス HTML4.01からHTML5へのバージョンアップによる変更点

これらの参考サイトのおかげで本当に助かりました。ありがとうございます:ok_hand:

今回は使用してませんがクロスドメインでなければこちらも参考になるかもしれません
iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法

19
23
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
23