新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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の高さ可変 (メモ帳)

 - プログラミング, ユーザビリティ

アドセンス広告メイン

Comment

  1. hashian より:

    ちほちゅう様
    はじめまして。
    javascript初心者です。
    このページを参考にさせていただき、iframeの高さを変えるのは出来たのですが、どうしてもFirefoxだけiframe内でアンカーにジャンプしません。IE,Opera, Safariはジャンプしました。(いずれも最新バージョン)
    他のスクリプトも色々試したのですが、やはりFirefoxだけダメでした。
    何か原因があるでしょうか?Firefoxの仕様なのでしょうか?
    参照URL
    http://tryinventor.main.jp/a.html
    こういう投稿は初めてで、教えて!gooなどで質問するべきなのかどうか迷いましたが、他のスクリプトと比べて一番シンプルでいいと思ったのでこの場で質問させていただきました。お忙しいとは思いますがよろしくお願いします。

  2. のりさ より:

    > hashianさん
    このあたり、参考になりませんでしょうか?
    http://q.hatena.ne.jp/1301966177

  3. hashian より:

    のりさ様
    Firefox 3.6では問題なく動作しました。
    Firefox 6.0ではダメだということですね。
    ありがとうございました。勉強になりました。

のりさ にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。

  関連記事

チャットするならSkype(スカイプ)のグループ機能がオススメ

1年以上前の記事です。内容が古い可能性があります。「つぶくま」で毎週金曜に「ツイ …

Facebook(フェイスブック)ノート経由のブログ連携が終了に

http://trackback.blogsys.jp/livedoor/norisa1/52437398
http://trackback.blogsys.jp/livedoor/norisa1/52438624

リニューアル後のGoogleマップ(Google Maps)が凄い。全画面マップに個別マップ等

1年以上前の記事です。内容が古い可能性があります。なんか、Googleマップがリ …

ツイッター(Twitter)についにツイート編集機能が付く(かも)

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)で …

Flickrの画像にまとめてリンクを入れる方法

1年以上前の記事です。内容が古い可能性があります。ブログの被リンク対策の一貫とし …

WordPress(ワードプレス)でトップページ以外にブログトップを設置する方法【完全版】 #wp

1年以上前の記事です。内容が古い可能性があります。つぶくまブログの「←古い投稿」 …

「HTML5」「CSS3」「ActionScript3.0」

1年以上前の記事です。内容が古い可能性があります。近頃はディレクション業にかまけ …

フォローされているかされていないかを確認する簡単な方法【ツイッター】

1年以上前の記事です。内容が古い可能性があります。埼玉県熊谷市のツイッター(Tw …

ワードプレス(WordPress)とツイッターを連携「Twitter Tools」 #wp

1年以上前の記事です。内容が古い可能性があります。さて、つぶくまにワードプレスを …

WordPress(ワードプレス)のリンク切れチェックに「Broken Link Checker」 #wp

1年以上前の記事です。内容が古い可能性があります。表立っての活躍は見せなくても、 …

血液型オヤジ