iframeの高さを判別して自動的に調整する(JavaScript)

iframeを使っているページなどで、iframeの高さを判別して自動的に調整したい。そんなときのJavaScriptです。

jQueryを使用する方法と、jQueryを使用しない方法の2通りの設定方法を解説します。

cssなどでもできますが、手っ取り早く実装したい場合は以下のソースをコピペでOKです。

ソース
jQueryを使わない場合
1. 親ウィンドウ
2. 子ウィンドウ
まとめ

ソース

下記のソースを</body>タグの直前あたりにコピペしてください。

ページ内の全てのiframeに適用する場合

以下をコピペするだけでOKです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("iframe").on("load", function(){
    try {
        $(this).height(0);
        $(this).height(this.contentWindow.document.documentElement.scrollHeight);
    } catch (e) {
    }
});
$("iframe").trigger("load");
</script>

特定のiframeを一つだけ指定する場合（ID指定）

もし、ページ内に複数のiframeが存在して特定の一つのiframeだけに適用したい場合はIDを指定します。（例としてIDを”iframeID”としました。）

・iframeにID名をセット

<iframe src="/contents/testtest.html" width="800" id="iframeID">

・JavaScriptにてIDを指定

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#iframeID").on("load", function(){
    try {
        $(this).height(0);
        $(this).height(this.contentWindow.document.documentElement.scrollHeight);
    } catch (e) {
    }
});
$("#iframeID").trigger("load");
</script>

特定のiframeを複数指定する場合（class指定）

ページ内に複数のiframeが存在して特定のグループのiframeだけに適用したい場合はclassを指定します。（例としてclassを”iframeClass”としました。）

・iframeにclass名をセット

<iframe src="/contents/testtest.html" width="800" class="iframeClass">
<iframe src="/contents/testtest2.html" width="600" class="iframeClass">

・JavaScriptにてclassを指定

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(".iframeClass").on("load", function(){
    try {
        $(this).height(0);
        $(this).height(this.contentWindow.document.documentElement.scrollHeight);
    } catch (e) {
    }
});
$(".iframeClass").trigger("load");
</script>

以上でOKです。

jQueryを使わない場合

jQueryを使えない環境などでは、簡単なネイティブJavaScriptで、iframe内の要素の高さ判別してiframeの高さの自動調整する機能を実装できます。

仕組みとしては、子ウィンドウのJavaScriptが自分の高さを取得し、そのデータを親ウィンドウのJavaScriptに送信してiframeの高さを自動調整するという処理を行っています。

※以下のコードではブラウザの幅が変わった際にレイアウトや高さが変わるレスポンシブデザインのWebサイトにも対応しています。

親ウィンドウ

例として親ウィンドウのiframeのID名を「iframeParentID」としました。

■HTML

<iframe id="iframeParentID" src="https://www.example.com/child-page.html" height="300" width="100%" scrolling="no"></iframe>

■JavaScript

<script>
window.addEventListener('message', function(e) {
  if (e.origin == "https://www.example.com"){  //ドメインを記入
    document.getElementById('iframeParentID').height = e.data; //IDを記入
  }
}, false);
</script>

■備考

JavaScriptの3行目：このコードを埋め込むWebサイトのドメイン名を「https://」から入力してください。（※末尾のスラッシュは不要です）
JavaScriptの4行目：親ウィンドウのiframeに設定したIDを記入してください。

子ウィンドウ

例として子ウィンドウの高さを取得する要素のID名を「iframeChildID」としました。

■HTML

<div id="iframeChildID">
ここに画像やテキストのHTML
</div>

■JavaScript

<script>
setTimeout('sendHeight();', 100); //初期動作までのタイムラグ（ミリ秒）
window.onresize = function () {
  setTimeout('sendHeight();', 500); //ブラウザ幅変更の際の処理のタイムラグ（ミリ秒）
};
function sendHeight(){
  var h = document.getElementById('iframeChildID').clientHeight; //IDを記入
  h = h + 0; //高さを微調整する場合（ピクセル）
  parent.postMessage(h, "https://www.example.com"); //ドメインを記入
}
</script>

■備考

JavaScriptの2行目：「初期動作までのタイムラグ」はページの遅延読み込み対策ですので、任意で変更してください。
JavaScriptの4行目：「ブラウザ幅変更の際の処理のタイムラグ」はレスポンシブデザインのWebサイトに対応するための処理です。ブラウザ幅の変更を感知した後に高さ調整を再度実行するまでの時間です。こちらも任意で変更してください。
JavaScriptの7行目：高さを判別する子ウィンドウの要素に設定したIDを記入してください。
JavaScriptの7行目：高さ判別の後に高さの値（ピクセル）を微調整したい場合は数字を0から変更してください。
JavaScriptの9行目：このコードを埋め込むWebサイトのドメイン名を「https://」から入力してください。（※末尾のスラッシュは不要です）