iframe の高さを調節できるか
iframe 要素は原則、親ページで指定した幅・高さに固定されて子ページが表示される。しかし、
document.querySelector('iframe').contentWindowを使えば親ページから子ページのwindowにアクセスでき、window.parentを使えば子ページから親ページのwindowにアクセスできる他、window.postMessage()を使えば親子で相互にメッセージの送受ができる
ので、今回は iframe で表示している子ページの高さを取得し、自動調整できないか色々と検証してみた。
検証コードは以下。
実際に動くデモは以下の GitHub Pages をドウゾ。
TL;DR : iframe 要素の動的なリサイズを精緻にやろうとすると、子ページの CSS 調整が重要で難易度が高い。クロスドメイン時はまたより面倒なので、こんなことガチではやろうとしない方が良い。
以降、文章でうまく伝わるか分からない、検証結果を書き連ねるが、無視してもらっていい。とにかく色んな要素が絡みついて、汎用的な方法があまりなく、面倒臭いことだけが確認できた。
「Auto Fit」ボタンを押すと、子ページの offsetHeight を見て iframe 要素の高さを調整している。
その他にも色々とボタンがあるが、コレは clientHeight・offsetHeight・scrollHeight の値がどのように決まるのか調査するための諸々のボタン。
client: 表示領域内の、スクロールバーを含まないコンテンツの幅や高さoffset: 表示領域内の、スクロールバーを含むコンテンツの幅や高さscroll: 表示領域外 (overflow: scrollしている分) を含むコンテンツの幅や高さ- 参考 :
…ということだそうだ。
また、おさらいだが、
document.documentElement=html要素document.body=body要素
で、body 要素はデフォルトで margin を持つ。html 要素と body 要素にそれぞれ背景色を指定すると分かりやすいが、body 要素はデフォルトでコンテンツ分しか高さがなく、スクロールバーが出ないような少ないコンテンツ量だと、body 要素の下に html 要素が位置していることが確認できる。
このようなデフォルトスタイルになっているので、body 要素および子要素の margin をなくすか padding を付与するかして、ページ上部や下部に html 要素が見えるような margin を作らないようにしておかないと、documentElement の offsetHeight を見ても、若干縦スクロールバーが表示されてしまうような、奇妙な高さになってしまう現象が起こる。
本当は親ページの window.resize イベントの中で iframe 要素の高さを確認し、height 値を更新してやりたかったのだけど、この辺のスタイリングがイマイチなページだと offsetHeight の値がおかしくなって、無限にリサイズ処理が発生してしまってタブが死ぬので止めた。子ページの CSS 指定に制約が出来る時点で、頑張るのを止めた。ｗ
親ページと子ページとのドメインが異なる場合は制約が出たりとか、何か色々面倒臭いみたい。コレ以上頑張るのは止めよう～と思った。ｗ
- iframeの高さを自動調整する | Cloud CIRCUS Dev Blog
- クロスドメインにiframeを使うのは難しかった - エンジニアのはしがき
- クロスドメインでiframeを調整しようとしてどうにもならなかった話 – Creator Note
