WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:iframe内のページの高さを取得して、iframe自体の高さを調整する

0:[投稿] KK [2007/01/24 15:39 ] [環境:IE6 win2k 不詳]

当方javascript未経験者な上でこのような質問をするのは誠に恐縮なのですが・・・。

現在請け負っているサイトでDBの仕様上iframeを使わざるを得ないサイトがありまして、iframeの中にコンテンツページを表示させる形になります。

コンテンツページの幅は不変なのですが、高さが可変の為、iframeに縦スクロールが表示されてしまい、ユーザービリティ上よろしくない形になってしまいます。

なので、iframeの高さをコンテンツページに合わせた形で調整するようなjavascriptが無い物かと思い書き込みさせて頂きました。

以前同じような質問が掲示板のログに残っていたのですが、結果まで至っていなかったようなので、改めて質問させて頂きました。

上記のような事を解説しているサイト(ページ)や知識をお持ちの方いらっしゃいましたら、お力添え頂けたらと存じます。

宜しくお願い致します。


1:[回答] ティルド [2007/01/25 23:02 ]

iframeにname属性を指定し、それを使いフレーム内の各要素を収得します。
また、offsetHeightで・・・

めんどいんでサンプルを。(ぁ)

- - - - 親フレーム.html - - - -
<html><head>
<style type="text/css">iframe { visibility: hidden; }</style>
<script type="text/javascript">
onload = function() {
document.getElementsByTagName("iframe")[0].height = hoge.document.getElementsByTagName("span")[0].offsetHeight + 35;
document.getElementsByTagName("iframe")[0].style.visibility = "visible";
}
</script>
</head><body>
<iframe src="フレーム.html" name="hoge"></iframe>
</body></html>

- - - - 子フレーム.html - - - -
<html><head></head><body><span><script type="text/javascript">for(var i = 0; i < 20) document.write("Sample text ");</script></span></body></html>


サンプルでは、景観のため最初はiframeにvisibility: hiddenを指定しています。
そして、高さを変更してからvisibleに変えます。
(エラーが発生すると、何も表示されないので<noscript>などを使って対応してください。)


ただし、同じファイル内(?)しかできないようです。
たとえばYahooを表示させても、要素に接続できないようです。
誰か解決策を知っていたら書いてください。


2:[お知らせ] KK [2007/01/26 13:48 ]

>>ティルド様
サンプルありがとうございます!

こちらの言葉足らずで大変申し訳無いのですが、テストしてみた結果iframeを2っ利用していて、両方とも高さが可変になってしまいます。(高さ不変の方はiframeにheight指定しています。)

以下、親フレームのサンプルです。
----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>テスト</title>
        <link rel="stylesheet" type="text/css" href="./home.css">
    </head>
<body>
<table class="tableMain" width="780" border="0" cellpadding="0" cellspacing="0">
    <tr><td><iframe src="index.php?tpl=indexmenu" name="menu" width="780" height="200" frameborder="0" scroll="no"></iframe></td></tr>
    <tr><td><iframe src="index.php?tpl=indexcontents" name="contents" width="780" frameborder="0" scroll="no"></iframe></td></tr>
    <tr>
    <td class="tdFooter">
    <hr>
    Copyright(C)2005-2007 なんとかかんとか All Rights Resarved.
    </td>
    </tr>
</table>
</body>
</html>
----------------------------------------
御手数おかけ致しますが、引き続きお願いできたらと存じます。
宜しくお願い致します。


3:[回答] ティルド [2007/01/26 16:33 ]

<script type="text/javascript">
onload = function() {
    document.getElementsByTagName("iframe")[1].height = contents.document.getElementsByTagName("span")[0].offsetHeight + 35;
}
</script>

これをhead内に挿入してください。
これで問題ないはずなのですが・・・。
(index.php?tpl=indexcontensには
<body><span>
<!-- - - - (body部分) - - - - -->
</span></body>という感じにしないと、offsetHeightで高さを収得できないので注意してください。)


4:[完了] KK [2007/01/29 11:17 ]

>>ティルド様
お返事遅くなり、申し訳御座いません。(会社からの質問でしたので出勤時の書き込みでした。

テストHTMLですが、正常に動作しました!
今日、実際に本番verに挿入して再テストしてみますが、問題ないでしょう。

詳細なjavascriptまで掲載して頂き誠にありがとうございました。
また機会がありましたら、どうぞ宜しくお願い致します。

これにて完了させて頂きます。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]