[JavaScript] iframe内のコンテンツの高さを取得する

こんにちは、@yoheiMuneです。
最近のお仕事で、iframe内のコンテンツの高さを取得する機会があったので、実装方法をブログに書きたいと思います。

何をしたいのか

iframe内のコンテンツの高さを取得して、その高さをiframeタグ自体に設定したい、ということで実装しました。今回の案件では、iframe内のコンテンツの高さがブラウザの横幅によって変わるため、iframeタグの高さをCSSなど固定値で指定することができず、JavaScriptでページ表示時に動的に設定することにしました。

なお今回の実装は、iframe内のコンテンツが、サイトと同一ドメインであることを想定しています。別サイトの場合にはセキュリティ制約により、JavaScriptからiframe内にアクセスできません。

iframe内のコンテンツの高さを取得する

実際の実装は以下の通りです。iframe内の高さを取得し、その高さをiframeタグに設定しています。

// iframe要素を取得.
var iframe = document.getElementById('iframe');

// iframe内のwindow要素にアクセスし、
// コンテンツが読み終わった際に呼び出されるイベントをリッスンする.
iframe.contentWindow.addEventListener('DOMContentLoaded', function () {

  // iframe内のbodyの高さを取得する.
  var height = iframe.contentDocument.body.clientHeight;
  console.log('iframe.body.height =', height)

  // その高さを、iframeタグ自体に設定する.
  iframe.style.height = height + 'px';
});

ここでは、iframe内のwindowオブジェクトに対して、DOMContentLoadedイベントを監視し、ページの読み込みが終わった後に処理しています。

もし、iframe内の表示要素で画像などがあり、画像読み込みで高さが変わる場合には、DOMContentLoadedではなくloadイベントを監視するなど、対策が必要があります。

DOMContentLoadedとloadの違いは、「onloadイベントより早いタイミングで実行されるDOMContentLoadedイベント」をご参照ください。

最後に

PCやスマホでコンテンツの高さが変わる中、iframe内の要素をスクロールすることなく表示したいという要望を実現するために、今回の実装を行いました。

最後になりますが本ブログでは、フロントエンド、Python、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！