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

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

この <iframe> の高さをコンテンツの量に合わせて自動変更し、スクロールバーが出ないようにする方法を紹介します。「scrolling="no"」でスクロールバーが出ないようにしてるため内容表示の方が欠けてしまう場合の調整にも使えます。

<iframe> 高さ調整のオンラインデモ

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

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

1. <iframe> の設定

組込み先のページ（トップページの index.html など）の表示したい位置に、下記例を参考に <iframe> タグを追加して下さい。

<iframe> の高さ調整のために必要な設定は以下の4点です。これ以外の設定値はWebサイトのデザインに合わせて指定して下さい。

  • id 属性（赤字）
  • onLoad 属性（赤字）
  • CSS height 指定（青字）：
    標準的な高さより少し少な目に設定して下さい。例えば、テスト中は高さ 120px でちょうど良かった場合、100px を指定して下さい。
  • 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="0"
    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> を読み込んでいて表示がおかしくなる場合もブラウザのキャッシュをクリアしてから再読み込みして下さい。

制限事項

この方法は、インラインフレームに読み込まれる子ページと、インラインフレームタグを記載している親ページが同じ Webサイトに無いと動きません。

2つのファイルが同じサーバにあるのにうまくいかない場合、原因は、インラインフレームの src に指定されているURLと、親ページへのアクセスに使っているURLが異なる事が考えられます。これは例えば、親ページに

http://www.example.com/

でアクセスしているのに、インラインフレームの src には
src="http://example.com/sugu/webdir/index_short.html"

等と、「www.」の無いURLが使われている場合です。逆に、親ページに「http://example.com/」とアクセスしているのに、インラインフレームのsrcには「http://www.example.com/」の方が指定されている場合も同様です。

問題解消方法

親ページのアクセスに使われるURLに依らずインラインフレームの高さ調整が効くようにするには、インラインフレームの src 指定は「http://...」から始まるURLを使わずに、スラッシュから始まるサーバルートからのURLを使って下さい。

インラインフレームの src 指定の例 

× src="http://example.com/sugu/webdir/index_short.html"
○ src="/sugu/webdir/index_short.html"

Internet Explorer でうまくいかない場合

「短い一覧」側の1行目が以下のような記載だと Internet Explorer での表示がうまく行きません。「すぐ使えるCMS」（旧「すぐ使える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

再構築

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

確認

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