locked
IE8 で frame を使用していると window.onresize イベントが発生しない? (IE6では発生する) RRS feed

  • 質問

  • IE8 frame構成内のdocument.getElementByIdが取得できない
    でも質問をしました。
    現象を絞り込んだら、

    IE8でframe分割しているがめんで、ウインドウサイズを変更しても windows.onresize イベントが発生しない場合があるようです。

    ウインドウの右下で斜め矢印でサイズ変更は正常に動作します。

    ウインドウの下で上下矢印でサイズ変更は正常に動作しません。

    ウインドウの下で上下矢印でサイズ変更後に、ウインドウの右で左右矢印でサイズ変更は正常に動作します。

    ウインドウ上部のリサイズは正常に動作します。

    また、frame03.htmlを単独で起動した場合は、どの操作も正常に動作します。


    ウインドウサイズに合わせて、レイアウトを自動調整したのですが、windows.onresize イベントが発生しないので困っています。
    どなたかご存知でしたら、ご教授願います。

    少し長いのですが、サンプルソースは以下のとおりです。
    [フレーム分割する][frame0.html]
    <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
    <HTML><HEAD>
    <meta http-equiv='Content-Type' content='text/html; charset=x-Shift_JIS'>
    </head>
    <FRAMESET cols='100px,*'>
      <FRAME SRC='dummy.html'>
      <FRAME SRC='frame3.html'>
    </FRAMESET>
    </HEAD>
    </HTML>

    [windows.onrisizeイベントを取得したいソース][frame03.html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=x-sjis;' />
    <script type="text/javascript">
    <!--
    var saveOldheight = -100;              //初期表示自動調整のため -100 を設定
    window.onresize = function(){          //フレーム内の場合 縦のみ変更した場合は IE8ではwindow.onresizeイベントが発生しない IE6は発生する
         //alert("window.onresize");       //単独の場合       IE6,IE8ともにイベントが発生する
         winResize();                      //現在のウインドウ高さに合わせる
         return true;
    }

    function winResize(){
           if(Math.abs(saveOldheight - document.documentElement.clientHeight) >= 10){  //10px以上の変化があった場合に高さ調整する
              var wkheight  = document.documentElement.clientHeight;                   //現在の高さを取得
                  wkheight -= document.getElementById("Header").style.height;          //ヘッダーの高さを引く
                  wkheight -= document.getElementById("footer").style.height;          //フッターの高さを引く
                  wkheight -= 100;                                                     //ブラウザのメニュー・ステータスの高さを適当に引きました
              if(wkheight<100) wkheight=100;                                           //最小高さ 100px
              document.getElementById("resize").style.height = wkheight + "px";        //高さを変更
              saveOldheight = document.documentElement.clientHeight;                   //現在の高さを退避
           }
    }

    // -->
    </script>

    <style tyle="text/css">
    <!--
    body{width:100%; height:100%;}
    .header{width:895px;height:030px;background-color:#a9a9a9;}
    .resize{width:895px;height:200px;background-color:#f0f8ff;}
    .footer{width:895px;height:030px;background-color:#a9a9a9;}
    -->
    </style>

    </head>
    <body bgcolor=#e3e3e3 onload=winResize()>
    <div class='header' id='Header'>Header</div>
    <div class='resize' id='resize'>高さ自動調整</div>
    <div class='footer' id='footer'>footer</div>
    </body>
    </html>

    [フレーム分割の左側に表示するダミー][dummy.html]
    <html><head></head><body>dummy</body></html>

    以上よろしくお願いします

    2009年9月30日 4:42

回答

すべての返信