電気ウナギ的○○

About Home

インラインフレームの高さを動的に変更する方法

shinoda (2009年6月13日 18:07)

今回、SSI の使えないサーバ上で、CGI や PHP で出力する HTML 内に Perl スクリプトの吐く内容を動的にセットしたい案件があって、SSI が使えないので iframe で CGI の出力結果をはめ込むようにしたんだが、新着情報のように表示件数が変化する部分は、
動的に高さを調整したい。

こう言うときは、JavaScript と組み合わせて制御するしかなく、

「IFRAMEの高さ可変」
http://nacky.s206.xrea.com/notebook/archives/2007/06/10-012813.php

というサイトを参考に組み込んでみたのだが、どうも、本来のコンテンツの高さよりも余分に高さ設定がされてるような・・・

画像にコピーして見てみたら、20px くらい高い。
高さ判定してるところで、無条件に -20 するようにしようかと思って JavaScript 見てみたら、

document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ;

みたいに、わざわざ本来の高さに +20 してあった。

ああ・・・なんだ、そうだったのか。ちゃんとソースを見てませんでした。(^^;

どうも、本来の高さキツキツに高さ設定をすると、Netscape 系のブラウザではスクロールバーが出てしまうので、その対策のようだ。
今回、うちの案件ではデザイン上の理由で scrolling="no" 固定にしているのでスクロールバーのことは考えなくて言い。

ということで、+20 の部分を削って、

document.getElementById(ID).style.height = parent.frames[NAME].document.height +"px" ;

としました。これでバッチリ。

↑件のサイトのオーナー様。素敵な JavaScript をありがとうございました。

電気ウナギ的○○

電気ウナギ的○○

About Back

コメント(0)

電気ウナギ的○○

電気ウナギ的○○

About Back

トラックバック(0)

トラックバックURL: https://blog.netandfield.com/mt/mt-tb.cgi/643

電気ウナギ的○○

About This Site

電気ウナギ的○○
岩国在住。広島で働く超零細IT企業社長のいわゆる社長日記。
何か、酒と食い物のことばかり書いているようで・・・お察しのとおり、肥満体です:-)


2011/06/24
iPhone用サイト公開

Create with jQuery, jQTouch.


CLOSE