[javascript]スクロールバーなどを含めたウィンドウのサイズを知る方法

2012年9月10日

備忘録としてのメモ。


window.open()で指定する幅と高さの解釈はブラウザによって異なり、ウィンドウ内部領域と見なすものもあれば、スクロールバーなどの枠を含めたウィンドウ全体の大きさと見なすモノも有る。

枠の中の実サイズを知りたい場合、innerWidth/Heightが使える場合はそれを使用すると簡単

resizeToはウィンドウ内部のサイズを指定するが、offsetWidth/Heightはスクロールバーなどの枠を含めたウィンドウ全体の大きさを返すので、その差でinnerWitdh/Heightを求める。

window.resizeTo()はChromeだと使用できない。

outerWidth/outerHeightプロパティはReadOnlyなので値のセットは出来ない(resizeTo/resizeByメソッドを使用する)


スクロールバーなどの枠を含めた、ウィンドウのサイズを知る関数

function getWindowSize() {
    var wW, wH;
    if (window.outerWidth) {
    	// outerWidth,outerHeightが使える時は、簡単
        wW = window.outerWidth;
        wH = window.outerHeight;
        return { width: wW, height: wH };
    }
 
 
    var cW = document.body.offsetWidth;
    var cH = document.body.offsetHeight;
 
    // 一旦適当な大きさにしてからoffsetWidthとの差を調べて、枠のサイズを求める
    window.resizeTo(500,500);
    var barsW = 500 - document.body.offsetWidth;
    var barsH = 500 - document.body.offsetHeight;
 
	// 元のサイズに戻す
    wW = barsW + cW;
    wH = barsH + cH;
    window.resizeTo(wW,wH);
 
    return { width: wW, height: wH };
}



コードは,Getting the width/height of the entire browser in IE?を元に一部改変
(http://stackoverflow.com/questions/1045050/getting-the-width-height-of-the-entire-browser-in-ie/4355458#4355458)

関連記事
同じカテゴリの記事はこちらから!! → JavaScript

コメントを残す

メールアドレスが公開されることはありません。