iframeの高さを内容に合わせて変えるスクリプト
1年以上前の記事です。内容が古い可能性があります。
非推奨ながらもなかなかなくならないiframeタグですが、これは「いいね!」ボタン等の埋め込みタグや広告関係に未だに使われています。
実は僕も簡単な掲示板方式のCMSでiframeを使っているのですが、ここで一つ問題があります。
CMSっていうのは内容によってページのサイズが変わってくるわけです。
ページのサイズが変わるとiframeから内容がはみ出してしまいます。
これは、スクロールバーをつければ解決するのですがこれがイマイチスマートじゃない。
そこで、 iframeの高さを表示されるページの内容に合わせて変えるスクリプトを紹介します。
ベースになるJavascriptは以下のとおり。
function GetHeight(ID,NAME) { if (document.height) { document.getElementById(ID).style.height = parent.frames[NAME].document.height +"px" ; } else { document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +"px"; } }
簡単に解説すると if (document.height) の振り分けはブラウザ対策。
document.getElementById(ID).style.height がiframeのheight(高さ)の値になり、
それを parent.frames[NAME].document.height つまり読み込ませるドキュメントの高さに合わせる。
といったことをしています。
こちらを、外部ファイルにして読み込むか直接scriptタグで書き込むかします。
さて、それだけじゃもちろんダメでiframe側も以下のように書く必要があります。
<iframe onload="GetHeight(this.id,this.name)" src="./cgi-bin/news.cgi" id="news" name="news" width="420" height="100" frameborder="0"></iframe>
上記は一例です。
srcのところは任意。おそらくcgiやPHPスクリプトのことが多いと思います。
重要なのは onload=”GetHeight(this.id,this.name)” と
idとnameを同一の文字列にするところ。
以上でOK。
そんなに使う機会ないかもしれませんが念のための覚書でした。
via : IFRAMEの高さ可変 (メモ帳)
アドセンス広告メイン
関連記事
-
-
一度見たFlashを見せない方法 2
1年以上前の記事です。内容が古い可能性があります。□一度見たFlashを見せない …
-
-
AS3でプルダウンメニュー(ActionScript3.0勉強中! #3)
1年以上前の記事です。内容が古い可能性があります。以前、ActionScript …
-
-
ドコモケータイ用twitterクライアント「twittie」by「Colors」
1年以上前の記事です。内容が古い可能性があります。ケータイ用twitterクライ …
-
-
WordPress(ワードプレス)のリンク切れチェックに「Broken Link Checker」 #wp
1年以上前の記事です。内容が古い可能性があります。表立っての活躍は見せなくても、 …
-
-
アイフォーンのインターフェースのすばらしさ
1年以上前の記事です。内容が古い可能性があります。最近、普通に本になっている辞書 …
-
-
iPhone3GSだけじゃ無料の「iPhoneを探す」は使えない
1年以上前の記事です。内容が古い可能性があります。iOSがiOS 4.2(正確に …
-
-
ツイッターが完全オープンじゃなくなる。ささやきモードでツイートごとに公開設定か
1年以上前の記事です。内容が古い可能性があります。このところ伸び悩んでいるツイッ …
-
-
MITライセンスのすばらしいスクリプトたち【Ajax/Javascript】
1年以上前の記事です。内容が古い可能性があります。世の中にはすばらしいフリーウェ …
-
-
背景(バックグラウンド)のイメージをモニター(ウインドウ)のサイズによって変える(レスポンシブルデザイン)Webサイトの作り方【CSS3コーディング】
1年以上前の記事です。内容が古い可能性があります。今、作っている某総合福祉センタ …
-
-
Webサイトでプリント時にヘッダやメニューを消す方法
1年以上前の記事です。内容が古い可能性があります。どうも日本人は印刷にこだわる。 …
Comment
ちほちゅう様
はじめまして。
javascript初心者です。
このページを参考にさせていただき、iframeの高さを変えるのは出来たのですが、どうしてもFirefoxだけiframe内でアンカーにジャンプしません。IE,Opera, Safariはジャンプしました。(いずれも最新バージョン)
他のスクリプトも色々試したのですが、やはりFirefoxだけダメでした。
何か原因があるでしょうか?Firefoxの仕様なのでしょうか?
参照URL
http://tryinventor.main.jp/a.html
こういう投稿は初めてで、教えて!gooなどで質問するべきなのかどうか迷いましたが、他のスクリプトと比べて一番シンプルでいいと思ったのでこの場で質問させていただきました。お忙しいとは思いますがよろしくお願いします。
> hashianさん
このあたり、参考になりませんでしょうか?
http://q.hatena.ne.jp/1301966177
のりさ様
Firefox 3.6では問題なく動作しました。
Firefox 6.0ではダメだということですね。
ありがとうございました。勉強になりました。