iframeの高さを指定せずにiframeの内容を全て表示させるjQuery

更新日：2021年9月9日

iframe（インラインフレーム）タグでは通常高さを指定しますが、レスポンシブWebデザインで作成している場合等、高さを指定したくないという場合があるかと思います。
しかしiframeは高さを指定してあげないと中身が見切れてしまい上手く表示されません。iframeはレスポンシブ対応は無理なのか…と諦めかけた方必見、ソースコードのコピペだけでレスポンシブ対応可能です。
ではその方法をご紹介します。

前置きは簡潔にして早速実装方法のご紹介です。
jQueryで下記のように記述します。

function iframe_display() {
	$("iframe").on("load", function() {
		try {
			$(this).height(0);
			$(this).height(this.contentWindow.document.documentElement.scrollHeight);
		} catch (e) {
		}
	});
	$("iframe").trigger("load");
}
$(window).load(function() {
	iframe_display();
});
$(window).resize(function() {
	iframe_display();
});

iframeの高さを取得して、その高さ分だけ表示するiframe_displayという関数をあらかじめ作っておき、ブラウザが読み込まれたタイミング、もしくはブラウザがリサイズされたタイミングでその関数が発動するように記述しています。

たったこれだけで解決です！
是非ご活用下さい！