ウインドウオブジェクト

表示されているウインドウのサイズを知り、そのウインドウサイズに応じて表示を変更したいときがあると思います。

その際、JavaScriptを使用すれば、表示されているウインドウのサイズを知ったり、サイズを変更したりすることが可能です。

その命令がウインドウオブジェクトです。

ここでは、ウインドウオブジェクトの使い方を紹介します。

ウインドウのサイズを取得する

ウインドウのサイズを取得するには

  1. window.innerWidth;:ウインドウの内側の横幅を返す
  2. window.innerHeight;:ウインドウの内側の高さを返す
  3. window.outerWidth;:ウインドウの外側の横幅を返す
  4. window.innerHeight;:ウインドウの外側の高さを返す

を使用します。HTMLはウインドウの内側に表示されるので、はじめの2つを使用するといいでしょう。

以下プログラム例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<p>
<script>
document.write('内高さ:'+window.innerHeight+'<br>');
document.write('内幅:'+window.innerWidth+'<br>');
document.write('外高さ:'+window.outerHeight+'<br>');
document.write('外幅:'+window.outerWidth+'<br>');
</script>
</p>
</body>
</html>

これにより

サンプル_と_test_html

と表示されます。

ウインドウの移動とサイズ変更

ウインドウを移動させたりサイズを変更させたりすることもできます。

その際に使用する命令は

  1. window.moveBy(x,y);:相対的に移動
  2. window.moveTo(absx,absy);:指定座標に移動
  3. window.resizeBy(x,y);:相対的にサイズ変更
  4. window.resizeTo(absx,absy);:指定サイズに変更

です。項目2,4により、ウインドウの位置とサイズを指定できます。

また、項目1を使うと、現在の場所から相対的にどれくらいの位置へ移動するかを指定ます。

さらに、項目4により、現在のサイズから相対的にどれくらい大きくしたり縮めたりするかを決めれます。

absx,absyは正数であるのに対して、x,yは負の数でも指定できます。

 

ただし、ウインドウのサイズを変更する命令はブラウザによって制限されています。

ですから、動かない場合がたいはんです。

ウインドウのサイズ変更命令はあまり使わないようにしましょう。

著者:安井 真人(やすい まさと)