備忘録

備忘録

iframeの高さを自動調整する方法

HTML JavaScript

Ⅰ. はじめに

タイトルの通り「iframeの高さを自動調整する方法」です。

Ⅱ. やり方

サンプルプログラム

<!doctype html>
<html>
  <body>
    <div>
      <iframe id="myiframe"></iframe>
    </div>
    
    <script>
      let myiframe = document.getElementById('myiframe')
      // 100行ダミーテキストを入れる
      let str = '';
      for (let i = 0; i < 100; i++) {
        str += i + '<br>';
      }
      myiframe.contentDocument.write(str)

      // 高さを調節する
      let height = document.getElementById('myiframe').contentWindow.document.body.scrollHeight
      myiframe.style.height = height + 'px'
    </script>
  </body>
</htmL>

実行結果

f:id:kagasu:20180507135610p:plain