Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

iframe の高さを自動調整する方法

最近、WordPress サイトカスタマイズが続いたのでその備忘録の続きです。

後、数回続く予定です。

でも、今回は特に WordPress というわけではありません。

WordPress 上のあるページで、iframe を使ってページを表示することになりました。 普通に iframe を使うと Internet Explorer 系では「フレームの高さ」を自動で拾ってくれませんでした。 Chrome も Safari も Firefox も 「height="100%"」でいけるのに・・・・

当たり前と言えば当たり前でしょうが、普段コード書かない人なのでちょっとがんばって調べてみました。

結果から言えばやり方を見つけて、実現できました。 jQuery を使って次のように行います。

iframe の高さ(height)を自動で設定する簡単な方法

まず次のサイトにアクセスして必要なファイルを用意して下さい。

jQuery : Auto iFrame Height | Lost-In-Code
「jQuery.js」と「jquery.autoheight.js」をダウンロードします。 もちろん、ウェブサーバにアップロードしてパスを指定します。

後は上記で紹介したサイトで紹介されている用に 「class="autoHeight"」 を指定すれば height の値が自動で設定されます(id は特に関係ありません)。 ラクチンですよ。