概要 jQueryでiframeの高さを自動的に設定してくれるスクリプトを紹介。Microsoft Edge対策も。

20160726-jQueryでiframeの高さを自動調整-01

Webページの制作でiframeで他のページの情報を埋め込んだり、ウィジェットを埋め込んだりすることってありますよね。

このiframeは高さが決まった高さなら、CSSで高さ(height)を事前に決めてあげればよいのですが、昨今のレスポンシブWebデザインでは、iframeの高さがPCとスマホ・タブレットで結構変わってしまうことも多くて、事前に高さを決め打ちで指定できないことも多くあります。


そこで、JavaScript(jQuery)を使って、iframeの高さを自動的に設定してくれるスクリプトを紹介します。





●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」で高さを取得するように書かれています。

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


20160726-jQueryでiframeの高さを自動調整-02

基本的に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');」と書き直しました。



●参考にしたページ



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索