小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

iframe のスクロールバーを出さない方法(高さを自動変更)

最終更新日: 2015-01-15

インラインフレームの高さの自動変更の概要

新着情報(「短い一覧」)を <iframe>(インラインフレーム、アイフレーム)でトップページに組み込んだ場合、<iframe> の高さが足りずにスクロールバーが表示されてしまう場合があります。

インラインフレームの高さ自動調整

この <iframe> の高さをコンテンツの量に合わせて自動変更し、スクロールバーが出ないようにする方法を紹介します。

「scrolling="no"」でスクロールバーが出ないようにしてるため内容表示の方が欠けてしまう場合の調整にも使えます。

<iframe> の高さの自動変更方法

設定は <iframe> を組み込む側、つまりホームページ(トップページ)などに対して行います。

1. <iframe> の設定

組込み先のページ(トップページの index.html など)の表示したい位置に、下記例を参考に <iframe> タグを追加して下さい。
<iframe> の高さ調整のために必要な設定は以下の4点です。
これ以外の設定値はWebサイトのデザインに合わせて指定して下さい。

  1. id 属性(赤字)
  2. onLoad 属性(赤字)
  3. CSS height指定(青字):
    標準的な高さより少し少な目に設定して下さい。例えば、テスト中は高さ 120px でちょうど良かった場合、100px を指定して下さい。
  4. src 属性(青字):読み込む「短い一覧」のパスを指定して下さい。

<iframe> の設定例

<iframe
    id="newsframe"
    onLoad="adjust_frame_css(this.id)"
    style="border: 0; width: 420px; height: 100px; margin:0; padding: 0;"
    scrolling="no"
    frameborder="no"
    src="webdir/index_short.html"
>(IFRAME 機能を有効にして下さい)</iframe>

2. JavaScript の追加

引き続き同じファイルを編集し、</body> 直前に下記の JavaScript を追加して下さい。

その際、青字の数字は上で指定した <iframe> の高さと一致させて下さい。ただし、"px" の指定は不要です。数字だけ設定して下さい。

<iframe> の高さ調整用に追加する JavaScript

<script type="text/javascript">
function adjust_frame_css(F){
  if(document.getElementById(F)) {
	var myF = document.getElementById(F);
	var myC = myF.contentWindow.document.documentElement;
	var myH = 100;
    if(document.all) {
      myH  = myC.scrollHeight;
    } else {
      myH = myC.offsetHeight;
    }
    myF.style.height = myH+"px";
  }
}
</script>

3. アップロード

編集したファイルをサーバの同じ位置に上書きアップロードして下さい。

4. 確認

設定したページを再読み込みして下さい。

表示が変わらない場合、ブラウザのキャッシュをクリアしてからもう一度再読み込みして下さい。
また、複数の <iframe> を読み込んでいて表示がおかしくなる場合もブラウザのキャッシュをクリアしてから再読み込みして下さい。

うまくいかない場合

「短い一覧」側の1行目が以下のような記載だと Internet Explorer での表示がうまく行きません。「すぐ使えるCGI」をデフォルトのまま使用するとこの表示になっている場合がありますので、templates/article/short_list.html の1行目を確認して、必要な場合修正して下さい。

うまく行かない表示 (templates/article/short_list.html の1行目)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

修正後 (templates/article/short_list.html の1行目)

赤字部分を追加して下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

アップロード

編集した下記のファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/article/short_list.html

再構築

管理画面の一覧から「再構築(テンプレート変更反映)」ボタンを押して下さい。

確認

ブラウザのキャッシュをクリアしてからもう一度トップページを再読み込みして表示を確認して下さい。

関連リンク

さらに詳しく