ウィンドウ状態の調整

　ウィンドウサイズの取得は、window オブジェクトの outerWidth, outerHeight の両プロパティで取得できます。ただし、IE は未対応です。
　また、使用頻度の高い表示領域(body)のみのサイズは、innerHeight, innerWidth の両プロパティで取得できます。こちらも IE は未対応ですが、代わりに clientWidth, clientHeight を使用して取得できます。この二つは、IE6 では、表示モードによって取得の仕方が異なります。なお、単位はすべてピクセル(px)です。

property	note
window.innerWidth	: 表示領域の幅（IE以外）
window.innerHeight	: 表示領域の高さ（IE以外）
document.body.clientWidth	: 表示領域の幅（IE5までとIE6互換モード）
document.body.clientHeight	: 表示領域の高さ（IE5までとIE6互換モード）
document.documentElement.clientWidth	: 表示領域の幅（IE6標準モード）
document.documentElement.clientHeight	: 表示領域の高さ（IE6標準モード）

　表示モードは、document オブジェクトの compatMode プロパティで取得できます。取得できる値は、互換モードを表す文字列 "BackCompat" か 標準モードを表す文字列 "CSS1Compat" となります。

// JavaScript ソース
function ShowSize() 
{
     var ua = navigator.userAgent;       // ユーザーエージェント
     var nWidth, nHeight;                   // サイズ
     var nHit = ua.indexOf("MSIE");     // 合致した部分の先頭文字の添え字
     var bIE = (nHit >=  0);                 // IE かどうか
     var bVer6 = (bIE && ua.substr(nHit+5, 1) == "6");  // バージョンが 6 かどうか
     var bStd = (document.compatMode && document.compatMode=="CSS1Compat");
                                                                           // 標準モードかどうか
     if (bIE) {
          if (bVer6 && bStd) {
               nWidth = document.documentElement.clientWidth;
               nHeight = document.documentElement.clientHeight;
          } else {
               nWidth = document.body.clientWidth;
               nHeight = document.body.clientHeight;
          }
     } else {
          nWidth = window.innerWidth;
          nHeight = window.innerHeight;
     }

     alert("サイズ　：　幅 " + nWidth + " / 高さ " + nHeight);
}

<!-- HTML ソース -->
<form>
     <input type='button' value='サイズの表示' onclick='ShowSize()' />
</form>	

　ウィンドウサイズを設定する時は、window オブジェクトの outerWidth, outerHeight の両プロパティを使用します。ただし、これらは IE では未対応です。同じ window オブジェクトの resizeTo メソッドを使用してもサイズを設定することができます。こちらは比較的新しいブラウザであれば共通して使用できますが、NN4 では正しい値に設定されません。NN4 に対応させるのであれば、処理を分岐させる必要があります。なお、window オブジェクトには、相対的にサイズを変更させる resizeBy メソッドも用意されています。

property or method	note
window.outerWidth	: ウィンドウの幅（IE以外）
window.outerHeight	: ウィンドウの高さ（IE以外）
window.resizeTo(width, height)	: width:ウィンドウの幅, height:ウィンドウの高さ(NN4以外)
window.resizeBy(width, height)	: width:広げる幅, height:広げる高さ

// JavaScript ソース
function Resize(width, height) 
{
     if (window.outerWidth) {
          window.outerWidth = width;
          window.outerHeight = height;
     } else {
          window.resizeTo(width, height);
     }
}

<!-- HTML ソース -->
<form>
     NewSize : 
     <input type="button" value="640x480" onclick="Resize(640,480)"/>
     <input type="button" value="480x320" onclick="Resize(480,320)"/>
     <input type="button" value="320x240" onclick="Resize(320,240)"/>
</form>	

　ウィンドウの位置の設定は、window オブジェクトの moveTo メソッドを使用します。また、相対的に座標を移動させるには、moveBy メソッドを使用します。

method	note
window.moveTo(x, y)	： x...X座標 / y...Y座標
window.moveBy(x, y)	： x...X方向の変化量 / y...Y方向の変化量

// JavaScript ソース
function Relocate(x, y) 
{
     window.moveTo(x, y);
}

<!-- HTML ソース -->
<form>
     NewLocation : 
     <input type="button" value="(0, 0)" onclick="Relocate(0,0)"/>
     <input type="button" value="(100,100)" onclick="Relocate(100,100)"/>
     <input type="button" value="(200,200)" onclick="Relocate(200,200)"/>
</form>	

　ウィンドウのスクロールには、window オブジェクトの scrollTo メソッドを使用します。scroll メソッドも同じ機能を持ちますが、こちらは古い仕様のメソッドとなります。また、相対的に座標を移動させるには、scrollBy メソッドを使用します。

method	note
window.scroll(x, y)	： x...X座標 / y...Y座標
window.scrollTo(x, y)	： x...X座標 / y...Y座標
window.scrollBy(x, y)	： x...X方向の変化量 / y...Y方向の変化量

// JavaScript ソース
var currX = 0;     // 現在の位置（x座標）
var currY = 0;     // 現在の位置（y座標）
var stepX = 0;     // 一度に進める値（x方向）
var stepY = 3;     // 一度に進める値（y方向）
var maxX = 0;      // スクロールを止める位置（x座標）
var maxY = 2500; // スクロールを止める位置（y座標）
var nSpan = 10;  // 進める間隔（ミリ秒）
var idTimer;       // タイマーのID

function AutoScroll() {
     if (currX<=maxX && currY<=maxY) {
          currX += stepX;
          currY += stepY;
          window.scrollTo(currX, currY);
          idTimer = setTimeout("AutoScroll()", nSpan);
     } else {
          if (idTimer) clearTimeout(idTimer);
     }
}

<!-- HTML ソース -->
<body onload="AutoScroll()">
     ...
</body>