今回は、JavaScript で iframe 内のコンテンツ高さを取得する方法についてです。
開発中のサービス内で、サイトのページを表示しているのですが、iframe をスクロールさせずに、さも一つのページのように見せたかったため、こちらの方法を調査しました。
そもそも、ページ内でさらにスクロールが発生すると、不便ですしね。
参考にさせていただいた記事はこちらから。
iframe内のコンテンツサイズに応じて、frameの高さを動的に変更する方法 – Qiita
https://qiita.com/Tanaaaaan/items/62df7d8ab061213aef58
2014年の記事ですが、特に問題なく動作しました。
ただし、こちらの方法は同一ドメインにあるページでしか使えないので、その点のみご注意ください。
さて、実装方法ですが…やっていることは、「iframe 内コンテンツの高さ取得 → iframe の高さ変更」のみです。
具体的には下記のとおり。
まず、iframe はこんな感じで指定します。
<iframe src='[ページURL]' width='100%' height='300px' frameBorder='0' scrolling='no' id='iframe' onLoad='iframeResize'></iframe>
iframe のリサイズ処理を書いた関数を onLoad に指定しています。
これにより、iframe の読み込みが完了したタイミングで、リサイズの関数が呼ばれます。
リサイズ関数はこちら。
function iframeResize() {
const frame = document.getElementById('iframe');
const height = frame.contentWindow.document.body.scrollHeight;
frame.style.height = height + 'px';
}
上記を実行したところ、問題なく iframe の高さが変更されました。
枠線なし・スクロールなしなので、一枚のページのように見えます。
ただ、読み込んでいるページが原因なのか、iframe が読み込み完了になるまで結構時間がかかるので、ローディングのクルクル画像を追加するなど、読み込み中であることを表現したほうが良さそうです。
以上、iframe 内のコンテンツ高さを取得し、iframe 自体の高さを変更する方法でした。
参考にしていただければ幸いです。
