iframeのコンテンツに合わせてJavaScriptで自動的に高さを調整する方法

目次

• 実装方法の説明
• ソースコードの説明とデモ
• コンテンツの高さの取得についてのメモ
• ブラウザサポート
• セキュリティについての注意点
• まとめ

ソースコードの説明とデモ

まずは簡単なデモをご覧ください。
デモでは以下を実装しています。

1. 子フレームでコンテンツの高さを取得
2. 子フレームからpostMessage()でコンテンツの高さを親フレームに送信
3. 親フレームでaddEventListner()を使ってメッセージを受け取る
4. iframeの高さを調整

デモはこちら

子フレームのソースコード

CSS

body {
  overflow: hidden;
}

• iframe内でコンテンツがスクロールしないようにbodyにoverflow: hidden;を指定

JavaScript

sendHeight();

function sendHeight(){
  var h = document.documentElement.scrollHeight;
  parent.postMessage(h, "*");
}

• ページの高さを取得（コンテンツの高さについてのメモ）
• parent.postMessage()メソッドを使って高さを親フレームに送信
• このスクリプトをコンテンツが全て読み込まれた後の</body>タグの直前に設置しています
• parent.postMessage(h, "*")の「*」の所に親フレームのURI（例: https://parashuto.com）を指定するとなお安心

親フレームのソースコード

HTML

<iframe src="http://rwd-book.info/playground/iframe-height/iframe-content.html" height="1000" id="content-frame" frameborder="0"></iframe>

• iframeでコンテンツを読み込みます
• postMessage()をサポートしないブラウザ用にコンテンツの高さの最高値をheight属性に入れておきます

JavaScript

window.addEventListener('message', function(e) {
  if(e.origin=="http://rwd-book.info"){
    document.getElementById('content-frame').height = e.data;
  }
}, false);

• addEventListener()で子フレームからのメッセージを受け取ります
• if(e.origin=="http://rwd-book.info")でメッセージの送信元を確認
• デモでは拙著サイトのhttp://rwd-book.info にファイルを設置したので、メッセージがこのドメインから来ていることをチェックしています
• document.getElementById('content-frame').heightで、メッセージで送られてきた高さ（e.data）を設定

以上です！

ブラウザサポート

この方法はpostMessage()メソッドに依存しているので、このメソッドをサポートする以下のブラウザで動きます。意外にもサポートが充実していて、インテグレーション系のプロジェクトではかなり使えそうです。

• Chrome 4以降
• Firefox 3以降
• Safari 10.1以降
• iOS Safari 3.2以降
• IE8以降（部分的サポート）

IE8、9ではframse/iframesのみサポート。IE10、11ではある条件下 でサポートされないとのこと。

• Can I use…のブラウザサポート情報

IE7以下の対応について

IE7以下でも最低限の対応くらいはしておきたいです。

一番簡単な方法は、デフォルトで設定する高さを最大値にしてしまうことです。けっしてエレガントではないですがコンテンツにアクセス出来ないよりは全然ましな対応だと思います。IEのConditional Comments を使ってIE7以下のみにCSSで高さを指定するというのもありですね。

ポリフィルもある ようなので、それらを活用するのもありですね。すみません、ここは検証してません…。