iframe の高さを動的に設定し親画面でスクロールバーを表示させなくする方法

,

iframe で読み込んだ子ページが動的に高さの変わるページであった場合、読込み元の html で高さを設定してあげることは難しいです。最大サイズに合わせると余白が余ってしまうし、それより小さくすると縦のスクロールバーが表示されてしまう可能性を秘めています。

ページ内の一部にスクロールバーが表示される仕組みは、ユーザビリティとして悪い作りであるため、出来ることならば排除したいです。基本的に iframe の高さの定義は呼び出し元である親画面で設定しますが、子画面から設定することで動的に高さを指定することができるようになります。

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

呼び出し元の親画面

まずは親画面の html です。こちらは通常通り iframe を読み込みます。width は親画面で指定してあげてください。また、子画面から操作出来るように ID を指定してください。どの iframe に対して処理するのか識別できれば良いので、ID ではなく class の設定でも構いません。

呼び出される子画面

こちらは JavaScript の部分について説明します。まずはソースを見てください。

子画面から親画面に設定した iframe に対してスタイルシートを設定してあげます。コンテンツ自体が動的に処理されるのであれば、読み込み後に処理する必要があるため、onload のメソッドとして処理します。

また document.body.scrollHeight では数値しか取得できないので、スタイルシートの形式にするために6行目で単位となる px を後ろに付け加えているのがポイントです。

jQuery を利用する方法もありますが、わざわざそのために jQuery のスクリプトファイルを読み込むのも勿体ないので、JavaScript での処理サンプルとしました。

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

iframe 読み込みサンプル

↓↓↓ —– ここから —– ↓↓↓

↑↑↑ —– ここまで —– ↑↑↑

この画面から iframe の高さは設定していません。前述の方法で、呼出し先の子画面から高さを設定しています。もし高さを設定しなかった場合は、縦のスクロールバーが表示されます。

この方法は iframe の高さを固定で設定しないため、PC やスマホからのアクセスに応じて自動的に最適な高さが指定されます。つまりパソコンからアクセスした場合は適切なサイズだったけれど、スマホからアクセスした途端に縦のスクロールバーが表示されてしまうようなことも無くなります。

他にも OS やフォントにより若干表示サイズが変わってしまうため、高さ固定にすると微妙な余白を妥協しなくてはいけなくなるケースもあるので、動的に指定することができればデザイン的な問題も解決するのではないでしょうか。

関連記事

記事はありませんでした

PAGE TOP ↑