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

2016/03/25

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 で縦スクロールバーを表示させるのは絶対に避けなくてはいけないので、ぜひ iframe を利用している全てのページへの導入をご検討ください。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプで名前を変える方法は?性別は変更できない?

どうぶつの森ポケットキャンプのゴロゴロ鉱山ってどんなところ?ベルはどれくらい手に入る?

どうぶつの森ポケットキャンプのデータ移行方法!スマホを機種変更する場合はどうすれば良い?

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ