locked
IE8 frame構成内のdocument.getElementByIdが取得できない RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    frameで分割した1つに(サンプルではframe03.html)window.onresizeイベントが発生したら、そのサイズに合わせて一部の(<div class="resizeArea" id="resize" >リサイズ</div>)の高さを変更したいのですが、
    ウインドウの右下で斜め矢印でサイズ変更は正常に動作します。
    ウインドウの下で上下矢印でサイズ変更は正常に動作しません。
    ウインドウの下で上下矢印でサイズ変更後に、ウインドウの右で左右矢印でサイズ変更は正常に動作します。
    ウインドウ上部のリサイズは正常に動作します。
    また、frame03.htmlを単独で起動した場合は、どの操作も正常に動作します。
    以下にサンプルを添えます。
    解決策をよろしくお願いします。



    サンプルソース
    frame00.html  フレーム分割するだけです
    <HEAD>
    <title> サンプル　フレーム三分割 </title>
    </HEAD>
    <frameset title="上下左右３右分割" rows ="50px,*">
      <frame title="上側" src="frame1.html" name ="frame1" scrolling="auto" noresize>
      <frameset title="下側を左右分割 " cols ="50px,*">
        <frame title="上左側 "src="frame2.html" name ="frame3" scrolling="auto" noresize>
        <frame title="下右側 "src="frame3.html" name ="frame2" scrolling="auto" noresize>
      </frameset>
    </frameset>
    </html>

    frame01.html  上部のフレーム用
    <html>
    <head></head>
    <body bgcolor=#e3e3e3>
    frame1.html
    </body>
    </html>

    frame02.html 下の左フレーム用
    <html>
    <head></head>
    <body bgcolor=#e3e3e3>
    frame2.html
    </body>
    </html>

    frame03.html 下の右フレーム用
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    <html>
    <head>
    <script type="text/javascript">
    <!--
    window.onresize = function(){
       //alert("window.onresize");
       if(! document.getElementById)           return true;
       if(! document.getElementById("resize")) return true;
       //alert(document.documentElement.clientHeight);
       if(document.documentElement.clientHeight > 100 && document.documentElement.clientHeight < 1000){
          document.getElementById("resize").style.height = (document.documentElement.clientHeight - 80) + "px";
       }
       return true;
    }
    // -->
    </script>

    <style type="text/css">
    .resizeArea{height:200px;background:#00FF00;}
    .height30{  height:030px;background:#FF0000;}
    .height50{  height:050px;background:#0000FF;}
    .AllArea{   height:768px;}
    </style>

    </head>
    <body bgcolor=#e3e3e3>
    frame3.html
    <div class="AllArea">
    <div class="height30"   id="top"    >TOP</div>
    <div class="resizeArea" id="resize" >リサイズ</div>
    <div class="height50"   id="under"  >under</div>
    </div>
    </body>
    </html>

    サンプルは以上です

    2009年9月29日 10:31

回答

すべての返信