iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法

更新日: 公開日:2016/03/25
iframe の高さに応じてサイズを動的に変更

iframe で読み込んだ子ページの高さが動的に変わる場合、読み込み元の html に固定サイズで height 属性を設定するのは望ましくありません。

サイズ設定が大きすぎると余白ができるし、小さすぎると縦スクロールバーが表示されます。ページ内の一部に縦スクロールバーが表示されるのはユーザビリティが悪くなります。

よって iframe 内のコンテンツサイズが動的に変わるのであれば、親画面で設定する iframe の高さも動的に変更すれば良いのです。

iframe の子画面要素に合わせて動的に高さを指定する方法

呼び出し元の親画面の設定

まず親画面での iframe 呼び出し方法です。ここで高さを設定しないのがポイントです。

iframe 呼び出し- 親画面【HTML】
<iframe id="parentframe" frameborder="0" src="(読み込むソースのURL)"></iframe>

横幅はスタイルシートで設定しましょう。ここでは 100% を設定しておきます。(実際は組み込む画面に合わせて、任意のサイズを指定してください。)

iframe 呼び出し- 親画面【css】
iframe#parentframe { 
  width: 100%;
}

そして肝心の JavaScript です。

iframe 呼び出し- 親画面【JavaScript】
// 子画面の要素を取得
var elm = document.getElementById("parentframe");

// 子画面のコンテンツサイズに合わせてサイズを変更する関数
function changeParentHeight(){
  elm.style.height = elm.contentWindow.document.body.scrollHeight + "px";
}

// 親画面 iframe の高さを変更するイベント
// 1. 子画面の読み込み完了時点で処理を行う
elm.contentWindow.onload = function(){ changeParentHeight(); };

// 2. 子画面のウィンドウサイズ変更が完了した時点で処理を行う
var timer = 0;
elm.contentWindow.onresize = function () {
  if (timer > 0) {
    clearTimeout(timer);
  }
  timer = setTimeout(function () {
    changeParentHeight();
  }, 100);
};

子画面の変化を親画面でキャッチして iframe の高さを設定しています。設定するタイミングは、子画面の読み込み終了時子画面のウィンドウサイズ変更時(レスポンシブデザインに対応させるため)です。

なお、高さを取得する document.body.scrollHeight は数値が返却されるので、スタイルシートの形式で設定するために6行目の末尾に px の文字列を付け加えています。

またウィンドウサイズ変更時のイベントで実装している処理は、サイズ変更終了時に限り動く仕組みを取り入れています。このように実装をしないと、サイズ変更中も絶え間なく処理が動いてしまいます。特に能力の低いパソコンでは、動きが重くなってしまう懸念があるため、余計な処理が動かない作りに仕上げました。

呼び出される子画面の設定

何も設定する必要はありません。全て親画面で制御しているため、子画面の html がどのような内容であっても問題なく動きます。

それでは iframe を読み込んだサンプルをご覧ください。

iframe の高さを動的に変更するサンプル

↓↓↓ ここから iframe ↓↓↓
↑↑↑ ここまで iframe ↑↑↑

iframe の読み込みが完了したタイミングで高さが設定されます。このままでは変化が分からないので、ウィンドウサイズを小さくして変化を確認してください。

【注意】ドメインが異なるとブロックされる

iframe の呼び出し元と読み込むページのドメインが異なると、ブラウザのセキュリティーポリシーにより iframe 内の情報を JavaScrpit で取得できない場合があります。

こればかりは対処する方法がないので、クロスドメイン時は iframe の高さを動的に変えるのは諦めてください。

まとめ

今回紹介した内容は iframe で読み込む子画面に依存しないので、汎用的に使いまわせる処理です。特にパソコンとスマホ用で同じソースを使っている、レスポンシブデザインを採用しているサイトでは特に効果を発揮してくれます。

利便性の面から iframe スクロールバーを表示させるのは好ましくないので、ぜひ iframe を利用している全てのページへの導入を検討してみてください。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。