iframe の高さを内容に応じて自動で調節する JS 他

概要

iframe の高さを、iframe の内容に応じて自動で調節するための JavaScript です。

サーバーとシステムの都合でどうしても iframe を使わざるを得ないケースなどの使用に向いています。

動作確認用の demo

この JavaScript を利用すれば、iframe で参照したページが、親ページの一部であるかのように、シームレスな表示にすることができます。

ページ読み込み時に自動で高さを調節します。その後は 0.75 秒毎に高さを自動調節するので、文字サイズを変更するなどしても、それに合わせて再度iframeの高さを調節します。

使い方

まずは、iframe 要素を使用するページ(親ページ)の設定を行います。

iframe 要素に任意の id 属性を設定します。

e.g.

<iframe src="demo-frame.html" id="sample1"></iframe>

次に、iframe により参照されるページの設定を行います。

以下の JavaScript をiframe により参照されるページで使用します。


var iframeHeight = function(){
	if(!window.parent.document) return false;

	try { // !IE
		document.styleSheets[0].insertRule( 'html' + '{overflow:hidden;}', document.styleSheets[0].cssRules.length );
	} catch (e) { // IE
		document.styleSheets[0].addRule( 'html', '{overflow:hidden;}');
	}

	height = document.getElementsByTagName('div')[0].offsetHeight;
	window.parent.document.getElementById('sample1').style.height = height + 'px';

	setTimeout('iframeHeight()',750)
}

try {
	window.addEventListener('load', iframeHeight, false);
} catch (e) {
	window.attachEvent('onload', iframeHeight);
}

この JavaScript の 1 箇所を編集します。

window.parent.document.getElementById('sample1').style.height の箇所の ('sample1') となっている箇所を、iframe 要素の id 属性値と同じにし、ページのhead内にscript要素を使って読み込んだり、直書きしてください。

iframe により参照されるページの html 要素に border:none; を、body 要素に margin:0; を指定します。

e.g.

html{border:none;}
body{margin:0;}

iframe により参照されるページには必ず div 要素を内包してください。この div 要素の高さを取得します。

e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe により参照されるページ</title>
<style type="text/css">
html{border:none;}
body{margin:0;}
</style>
</head>
<body>
<div>
<!-- ここにコンテンツ -->
</div>
</body>
</html>

以上です。不明な点は動作確認用の demo でご確認ください。

トラックバックURI

http://www.yomotsu.net/lab/javascripts/iframe-height/trackback

クロノさんからのコメント

2009年2月27日 22:08

はじめまして。クロノです。
色々ネットでアイフレームの高さの自動化について調べているのですが、どのサイトでも条件が同じドメインとなっております。
このサイトで説明されている方法もやっぱり同一ドメインに限定されますでしょうか？
もしここで説明されている方法が同一ドメイン限定でしたらドメインは違うけど親も子も自分のサイトの場合、なにかしらの方法はないでしょうか？
お手数ですがよかったらサポートお願い致します。

adminさんからのコメント

2009年3月2日 14:25

@クロノさま

frame についてなのですが、frame は別ドメインのドキュメントを参照する場合、操作ができません。そのため、frame の高さを取得できず、自動で調整のようなこともできません。

ドメイン間をまたぐ場合は frame 内外の操作ができないので、同一ドメインに frame の参照先がある必要があります。対象のページの同一ドメイン内に配置した php など HTML ソースをで取得し、その内容を frame で読み込むなどの方法で frame の操作ができるようになるので、こういった対処が必要かと思います。

匿名さんからのコメント

2009年3月18日 15:55

GOOD JOB!!

teleさんからのコメント

2009年4月17日 14:35

お世話になります。
firefoxとsafariでテストすると、iframeが表示できません。
解決策を教えてください。

匿名さんからのコメント

2009年7月21日 3:51

teleさん
横から失礼しますが，
「よろしければ教えてください」か
「解決策はあるでしょうか？」と
尋ねるべきでしょう。
管理人さんがあなたに答える「義務」なんて無いのですから。

まるさんからのコメント

2009年8月12日 11:13

参考にさせていただきました。本当に困ってまして、助かります。ありがとうございました。

Yさんからのコメント

2009年9月26日 15:34

iframeの動的表示で困っていたところ、管理人さんが書かれている内容のおかげで悩み事がひとまず解決いたしました。
どうもありがとうございました。

ただ、GoogleのChromeのみうまく表示されません。
私のやっていることが、ここに書かれている内容と違っているかもしれませんが、何回見ても同じように思えます。
もし、何かお気づきのことがあれば教えていただけると助かります。

宜しくお願いします。

adminさんからのコメント

2009年10月1日 19:33

@tele さん

コメントいただきありがとうございます。無保証で公開しているだけなので不具合以外のサポートはかなーり暇な時以外は期待できないと思っていただければ…です。すみません。

@まるさん

参考にしていただきありがとうございました。

@Y さん

ご指摘いただきありがとうございます。Chrome 3.0.195.24 で動作確認用の demo を検証してみましたが不具合と思しき再現できませんでした。よろしければ環境などをお知らせいただければ助かります。

TAKEさんからのコメント

2010年1月14日 4:55

こちらも非常に困っているときに、このコードに助けられました。
ありがとうございました。

kurodaさんからのコメント

2010年1月16日 0:56

非常に困っていたところ、こちらを見つけ参考にさせていただきました。
問題も無事解決し大助かりです。ありがとうございました。
同じコメントで失礼しますが、同“綺麗なソースで画像をロールオーバー”
も参考にさせていただきました。本当にきれいですばらしいです。
ありがとうございました。

コメントフォーム

実験室に戻る

このページの目次