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



iframeで別ページを表示しようとする場合、表示元ページ側で
高さがわからないとスクロールが出たりしてたまに困ります。


そんな場合にJavaScriptを使ってiframe先ページの高さを取得し、
表示元ページのiframeタグに高さを指定してみます。

1.CSSの記述例

以下は任意です。

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

2.読込むJsファイルとJavaScriptの記述例

<script src="http://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>

3.HTMLの記述例

<div class="clWrap">

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

</div><!--/clWrap-->

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

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

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