【JavaScript】iframe内コンテンツ高さを取得する方法

村上 著者:村上

【JavaScript】iframe内コンテンツ高さを取得する方法

今回は、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 自体の高さを変更する方法でした。
参考にしていただければ幸いです。

  • この記事いいね! (1)

著者について

村上

村上 administrator