- PR -

iFrame の高さを自動調整

1
投稿者投稿内容
川上
常連さん
会議室デビュー日: 2006/08/18
投稿数: 20
お住まい・勤務地: 東京
投稿日時: 2008-04-29 02:12
こんばんは、ASP.NET2005 (VB)で開発を行っています。

iframeを使用してページ内の特定の場所に
エンドユーザーの方で作成したコンテンツを表示するページを作成しました。
(コンテンツの幅は固定ですが、高さは内容により固定化が難しい状況です)
(スクロールバーは使用しておらず、また枠線もなしで表示してます)

現在、テンプレート的なHTML(DIVのoverflow:hidden;)をエンドユーザーに渡して高さを意識してもらい、
全体が表示できる高さを目視で調査し、その高さをデータ上で保持して高さの調整をプログラム上で行っています。
(iframeのStyleのHeightを設定してます)

この方法だとコンテンツを作成するエンドユーザー側の負荷(めんどくさい)があり
プログラム上で自動的にコンテンツの高さを自動認識/調整できるのが理想です。

このような処理でなにか良い方法があれば教えていただけますと非常に助かります。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-04-29 11:22
ドメインは同じですか？
川上
常連さん
会議室デビュー日: 2006/08/18
投稿数: 20
お住まい・勤務地: 東京
投稿日時: 2008-04-30 15:07
返信ありがとうございます。

ドメインは一緒です。
pt
会議室デビュー日: 2004/11/05
投稿数: 14
投稿日時: 2008-04-30 17:12
別ファイルにしている理由は、別のURLで直接開かれることがあるということでしょうか？？それとも運用上の問題？？

どちらにせよ、サーバサイドで吸収できなそうなので、javascriptで、

親画面(top.html)
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>HTML</title>
</head>
<body>
<form name="myForm">
<iframe src="next.html" name="ifra"></iframe>
</form>
</body>
</html>

子画面(next.html)
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>HTML</title>
<script type="text/javascript">
function resize()
{
var obj = parent.document.getElementById("ifra");
var value = document.documentElement.scrollHeight;
obj.style.height = value + "px";
}
</script>
<body onload="resize()">
<form name="koForm">
</form>
</body>
</html>

こんな感じでどうですかね？？
ただ試してないです。
うまくうかない場合は、valueに適当な値を直接指定して、サイズが動的に変更できること確認してみて下さい。

川上
常連さん
会議室デビュー日: 2006/08/18
投稿数: 20
お住まい・勤務地: 東京
投稿日時: 2008-04-30 21:29
｢pt｣さま
返信ありがとうございます。

子画面の方で親画面 iframe の高さを調整するJavaScriptですが、
上手く行きそうな感じです。
Valueの取得ではダメでしたが、Valueを固定値にしたら親のiframeの高さが変わりました。

子画面の表示高さを取得する部分が出来れば完成できそうです。
川上
常連さん
会議室デビュー日: 2006/08/18
投稿数: 20
お住まい・勤務地: 東京
投稿日時: 2008-04-30 23:10
自己レスです。

子画面の高さを取得する部分を、
----------------------------------------
document.documentElement.scrollHeight
↓
document.body.scrollHeight
----------------------------------------
に変更したら、実現が出来ました。

参考：
http://d.hatena.ne.jp/onozaty/20060803/p1
(環境はIE7です)

ありがとうございました。

[ メッセージ編集済み 編集者: 川上 編集日時 2008-04-30 23:11 ]
pt
会議室デビュー日: 2004/11/05
投稿数: 14
投稿日時: 2008-05-01 09:24
できてよかったです。
また、実現方法ありがとうございます。

たしかに「body」から見ないとダメですね。
1

スキルアップ／キャリアアップ（JOB@IT）