【jQuery】iframeの高さを取得し自動調整するスクリプト（Microsoft Edgeにも対応）

●HTMLで準備すること

高さを自動調整したいiframeのclassに「autoHeight」を付けてください。

例：

<iframe src="http://www.example.com/" class="autoHeight"></iframe>

●iframeの高さを自動的に調整してくれるスクリプト

jQueryを読み込んだ状態で以下のスクリプトを実行します。

(function(window, $){
	$(window).on("load",function(){
		$('iframe.autoHeight').each(function(){
			var D = $(this).get(0).contentWindow.document;
/*
			console.log(
				D.body.scrollHeight, D.documentElement.scrollHeight,
				D.body.offsetHeight, D.documentElement.offsetHeight,
				D.body.clientHeight, D.documentElement.clientHeight
			);
*/
			var innerHeight = Math.max(
				D.body.scrollHeight, D.documentElement.scrollHeight,
				D.body.offsetHeight, D.documentElement.offsetHeight,
				D.body.clientHeight, D.documentElement.clientHeight
				);
			$(this).removeAttr("height").css('height', innerHeight + 'px');
		});
	});
})(window, jQuery);

ページに配置された画像などの読み込みが完了した時点でiframeの高さを調整します。

同じページ内に複数のiframeがあっても、正常に高さを設定できます。

●スクリプトの説明や補足

★同じドメインのiframeの高さだけが調整できます

このスクリプトは別のドメインの情報を読み込むiframeは自動的に高さを調整できません。

一般的なブラウザーのiframeの仕様はそうしたルールになっているためです。

フレームの内容にアクセスしようとするスクリプトは同一オリジンポリシーに従います。別のドメインから読み込まれたスクリプトは他の window オブジェクトのほとんどのプロパティにアクセスできません。

iframe 要素 - HTML（MDN）

★IEでも動作します

このスクリプトは、Internet Explorer 8/9/10/11でもキチンと動作します。

★なぜ「$(document).ready」を使わないの？

スクリプトがよくある「$(document).ready」ではないのは、要素の配置が終わっていても、iframeの中身を読み込み終わっているわけではないので、スクリプトの実行されたタイミングによってはiframeの高さが取れない場合があるためです。

「$(window).load」で要素の読み込みが完了した時点でiframeの高さを取得することで、意図した高さを設定できます。

★「elm.contentWindow.document.documentElement.scrollHeight」だけで良いのでは？

よく紹介されているiframeの高さを調整するスクリプトでは「elm.contentWindow.document.documentElement.scrollHeight」で高さを取得するように書かれています。

今回のスクリプトでは、それ以外の値も取得しています。なぜでしょうか？

基本的にiframeの高さは「$(this).get(0).contentWindow.document.documentElement.scrollHeight」だけで十分なのですが、Microsoft Edgeの場合は、iframeの高さが小数点を持った場合（例：250.55px）に、「$(this).get(0).contentWindow.document.documentElement.scrollHeight」では、iframeの高さの小数点が切り捨てられた値が出力されるので、1px足りなくなり、スクロールバーが出てしまいます。

「$(this).get(0).contentWindow.document.body.scrollHeight」は小数点を切り上げた値が出力されるので、こちらを使います。

（line-heightが1.5だったり、font-sizeが13pxでmargin-bottom:0.5emなどとすれば、簡単に整数値ではない高さになるので注意が必要です）

では、いつでも「$(this).get(0).contentWindow.document.body.scrollHeight」使えば良いのでは？というと、上記のソースのコメントアウト部分を解除して数値を見てみると、ブラウザーによって、「$(this).get(0).contentWindow.document.body.scrollHeight」の方が小さい値を出力する場合があります。

このため、JavaScriptの関数「Math.max」で取得できる値の中で最大の値をiframeの高さとすることで、スクロールバーが出ることを防いでいます。

以上です。それでは。

●追記（2016/08/24）jQuery 3.0で動かないので修正

コメント欄でrrislandさんに教えていただいたのですが、jQuery 3.0では「.load」が廃止されていたので、jQuery 3.0環境では動かないスクリプトになっていました。大変失礼しました。

公式ドキュメントにもjQuery 1.8から非推奨で、3.0で削除としっかり書いてありますね。

version deprecated: 1.8, removed: 3.0

.load()（jQuery API Documentation）

このためスクリプトを「$(window).load(function(){」→「$(window).on("load", function){」と書き直しました。

●追記（2016/08/25）高さの指定方法を修正

iframeに「height="140"」などと指定されているものの高さをスクリプトで調整しようとした場合にうまく調整できないことがあるようです。

このためスクリプトを「$(this).attr('height', innerHeight + 'px');」→「$(this).removeAttr("height").css('height', innerHeight + 'px');」と書き直しました。

●参考にしたページ

• iframeで埋め込んだページの幅・高さを取得する（リズムのじかん）
• Get document height (cross-browser)（James Padolsey）
• コンテンツ全体の高さを取得するJavascript（CSS-EBLOG）
• Math.max() - JavaScript（MDN）