JavaScript window

Windowオブジェクトは、画面上に表示されているすべてのオブジェクトの親となるオブジェクトであり、JavaScriptのオブジェクト階層の最上位に位置する。

オブジェクト修飾子の省略

window オブジェクトは JavaScript におけるすべてのオブジェクトのルート（最上位）となる特別なオブジェクトである。スクリプトの記述が煩雑になるのを防ぐため、window オブジェクトのプロパティやメソッドに限り、オブジェクト修飾子（window.）は省略できる。

例えば、window.document.cookie は document.cookie と記述できる。

プロパティ

JavaScript における window オブジェクトのプロパティ一覧を次に示す。

innerHeight

window.innerHeight は、ウィンドウの内側（コンテンツ領域）の高さを示す。読取専用のプロパティで、値を設定することはできない。

<p>window.innerHeight: <span id="ih"></span></p>
<script>
  function update() {
    document.getElementById("ih").innerHTML = window.innerHeight;
  }
  window.onresize = update;
  window.addEventListener("load", update);
</script>

window.innerHeight:

innerWidth

window.innerWidth は、ウィンドウの内側（コンテンツ領域）の幅を示す。読取専用のプロパティで、値を設定することはできない。

<p>window.innerWidth: <span id="iw"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("iw").innerHTML = window.innerWidth;
  });
</script>

window.innerWidth:

jQuery

jQuery ライブラリ

jQuery ライブラリを読み込んだページでのみ有効なプロパティである。

<p>window.jQuery: <span id="jq"></span></p>
<script>
  window.addEventListener("load", function() {
    if (window.jQuery) {
      document.getElementById('jq').innerHTML = 'あり';
    } else {
      document.getElementById('jq').innerHTML = 'なし';
    }
  });
</script>

window.jQuery:

length

ウィンドウのフレーム数

<p>window.length: <span id="l"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("l").innerHTML = window.length;
  });
</script>

window.length:

localStorage

ローカルストレージ用Storageオブジェクト

ローカルストレージに対応したウェブ・ブラウザでのみ有効なプロパティである。

<p>window.localStorage: <span id="ls"></span></p>
<script>
  window.addEventListener("load", function() {
    if (window.localStorage) {
      document.getElementById('ls').innerHTML = 'あり';
    } else {
      document.getElementById('ls').innerHTML = 'なし';
    }
  });
</script>

window.localStorage:

name

ウィンドウの名前

<p>window.name: <span id="n"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("n").innerHTML = window.name;
  });
</script>

window.name:

onresize

ウィンドウのサイズが変更された後に呼び出されるイベントのハンドラ

<p>
  window.innerWidth = <span id="iw"></span>
</p>
<script>
  function displayInnerWidth() {
    e = document.getElementById("iw");
    e.innerHTML = window.innerWidth;
  }
  displayInnerWidth();
  // ウィンドウのサイズが変更されたら再表示
  window.onresize = displayInnerWidth;
</script>

outerHeight

window.outerHeight は、ウィンドウの外側の高さを示す。読取専用のプロパティで、値を設定することはできない。

<p>window.outerHeight: <span id="oh"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("oh").innerHTML = window.outerHeight;
  });
</script>

window.outerHeight:

outerWidth

window.outerWidth は、ウィンドウの外側の幅を示す。読取専用のプロパティで、値を設定することはできない。

<p>window.outerWidth: <span id="ow"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("ow").innerHTML = window.outerWidth;
  });
</script>

window.outerWidth:

screenX

スクリーン対するウィンドウのX座標を示す。screenLeft プロパティと同じ。

<p>window.screenX: <span id="sx"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("sx").innerHTML = window.screenX;
  });
</script>

window.screenX:

screenY

スクリーン対するウィンドウのY座標を示す。screenTop プロパティと同じ。

<p>window.screenY: <span id="sy"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("sy").innerHTML = window.screenY;
  });
</script>

window.screenY:

scrollX

<p>window.scrollX: <span id="sox"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("sox").innerHTML = window.scrollX;
  });
</script>

window.scrollX:

scrollY

<p>window.scrollY: <span id="soy"></span></p>
<script>
  window.addEventListener("load", function() {
    document.getElementById("soy").innerHTML = window.scrollY;
  });
</script>

window.scrollY:

sessionStorage

セッションストレージ用Storageオブジェクト

セッションストレージに対応したウェブ・ブラウザでのみ有効なプロパティである。

<p>window.sessionStorage: <span id="ss"></span></p>
<script>
  window.addEventListener("load", function() {
    if (window.sessionStorage) {
      document.getElementById('ss').innerHTML = 'あり';
    } else {
      document.getElementById('ss').innerHTML = 'なし';
    }
  });
</script>

window.sessionStorage:

XDomainRequest

IE8及びIE9におけるHTTP access control (CORS)の実装

<p>window.XDomainRequest: <span id="xdr"></span></p>
<script>
  window.addEventListener("load", function() {
    if (window.XDomainRequest) {
      document.getElementById('xdr').innerHTML = 'あり';
    } else {
      document.getElementById('xdr').innerHTML = 'なし';
    }
  });
</script>

window.XDomainRequest:

メソッド

JavaScript における window オブジェクトのメソッド一覧を以下に示す。

blur

現在のウィンドウからフォーカスを外す。

window.blur()

blur()

close

現在のウィンドウを閉じる。

window.close()

close()

createPopup

ポップアップウィンドウを作成する。

focus

現在のウィンドウにフォーカスを設定する。

window.focus()

focus()

moveBy

現在の位置からウィンドウを移動する。

window.moveBy(x, y)

moveBy(x, y)

x

ウィンドウを水平方向に移動させるピクセル単位の大きさを指定する。正の数の場合は右方向、負の数の場合は左方向に移動させる。

y

ウィンドウを素直方向に移動させるピクセル単位の大きさを指定する。正の数の場合は下方向、負の数の場合は上方向に移動させる。

moveTo

指定の位置へウィンドウを移動する。

window.moveTo(x, y)

moveTo(x, y)

x

X座標

y

Y座標

var win = window.open(url, "", "menubar=yes,toolbar=no");
win.moveTo(0, 0);

print

現在のウィンドウの内容をプリントする。

resizeBy

ウィンドウをリサイズする。

window.resizeBy(x, y)

resizeBy(x, y)

resizeTo

ウィンドウをリサイズする。

window.resizeTo(width, height)

resizeTo(width, height)

scrollBy

コンテンツをスクロール

window.scrollBy(x, y)

scrollBy(x, y)

scrollTo

コンテンツをスクロール

window.scrollTo(x, y)

scrollTo(x, y)

clearTimeout

setTimeoutメソッドで設定したタイマをクリアする。

window.clearTimeout(id)

clearTimeout(id)

setTimeout

指定した時間が経過した後、関数の呼び出し又は式の評価を行う。

window.setTimeout(func, delay [,param ...])

setTimeout(func, delay [,param ...])

参考文献

Web Hypertext Application Technology Working Group (2023) APIs related to navigation and session history HTML Living Standard