iframe先ページの高さにあわせてコンテンツを表示する方法

iframeで別ページを表示すると、別ページの高さがわからずスクロールバー表示されます。
JavaScriptを使ってiframeで表示する別ページの高さを取得し、取得した高さをiframeタグに設定しスクロールバーが表示されないようにする方法をご紹介します。

iframe先ページの高さにあわせてコンテンツを表示するCSS記述

※iframeのCSS記述です。必要に応じて変更して下さ。

<style type="text/css" media="all">
<!--
.clWrap{
	width:80%;
	margin:0 auto;
	overflow:hidden;
	border:solid 1px #999999;
}
iframe {
	padding:0;
	width:100%;
	overflow:hidden;
	border:none;
}
-->
</style>

iframe先ページの高さにあわせてコンテンツを表示するJavaScript記述例

※jquery.min.js（1.8系）ファイルを読み込みます。iframeをload後、.heightを使って高さを取得してます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
	$('iframe').load(function(){
		if (typeof $(this).attr('height') == 'undefined') {
			//iframe先ページの高さを設定
			$(this).height(this.contentWindow.document.documentElement.scrollHeight+10);
		}
	});

	//iframe先ページロード中にも対応
	$('iframe').triggerHandler('load');
});
</script>

iframe先ページの高さにあわせてコンテンツを表示するHTML記述例

<div class="clWrap">

	<iframe src="/about/" scrolling="no" frameborder="0"></iframe>
</div>

<!--/clWrap-->

contentWindow、scrollHeightを使ってiframe先ページの高さにあわせて表示するデモページ

contentWindow、scrollHeightを使ってiframe先ページの高さにあわせて表示するデモ

今回の方法って、SNS関連のウィジェットやブログパーツ的なものを提供したサービスでは使えそうですね。

上記以外の普通のWEBサイトページ等にiframeを使うとあまり良い印象がないです。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。