JavaScriptのWindowオブジェクト

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

window. の省略

<script>と</script>の間では window. は省略できる。たとえば、window.alert()alert()と記述できる。

プロパティ

JavaScriptのwindowオブジェクトには、次のプロパティがある。

windowオブジェクトのプロパティ一覧
プロパティ 説明
オブジェクト localStorage ローカルストレージ用Storageオブジェクト。HTML5で追加されたプロパティ。
parent ウィンドウの親
self 現在のウィンドウ
sessionStorage セッションストレージ用Storageオブジェクト。HTML5で追加されたプロパティ。
XDomainRequest IE8及びIE9におけるHTTP access control (CORS)の実装
コレクション frames すべてのフレームの配列
pageXOffset ウィンドウの左端から水平方向にスクロールされたピクセル数
pageYOffset ウィンドウの状態から垂直方向にスクロールされたピクセル数
top ウィンドウの上端
文字列 name ウィンドウの名前
イベントハンドラ onresize ウィンドウのサイズが変更された後に呼び出されるイベントのハンドラ

このウィンドウにおけるプロパティの値を次に示す。

windowオブジェクトのプロパティ
プロパティ
fullScreen
innerHeight
innerWidth
length
name
outerHeight
outerWidth
screenX
screenY
scrollX
scrollY

innerHeight

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

let ih = window.innerHeight

innerWidth

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

let iw = window.innerWidth

length

ウィンドウのフレーム数

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 は、ウィンドウの外側の高さを示す。読取専用のプロパティで、値を設定することはできない。

let iw = window.innerHeight

outerWidth

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

let ow = window.outerWidth

screenLeft

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

screenTop

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

screenX

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

screenY

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

メソッド

JavaScriptのwindowオブジェクトには、次のメソッドがある。

windowオブジェクトのメソッド一覧
分類 メソッド 説明
フォーカス blur 現在のウィンドウからフォーカスを外す。
focus 現在のウィンドウにフォーカスを設定する。
時間 clearTimeout setTimeoutメソッドで設定したタイマをクリアする。
setTimeout 指定した時間が経過した後、関数の呼び出し又は式の評価を行う。
開閉 close 現在のウィンドウを閉じる。
createPopup ポップアップウィンドウを作成する。
移動 moveBy 現在の位置からウィンドウを移動する。
moveTo 指定の位置へウィンドウを移動する。
印刷 print 現在のウィンドウの内容をプリントする。
サイズ変更 resizeBy ウィンドウをリサイズ
resizeTo ウィンドウをリサイズ
スクロール scrollBy コンテンツをスクロール
scrollTo コンテンツをスクロール

ブラウザの対応状況

このページを閲覧しているウェブブラウザの対応状況を示す。

プロパティ 対応状況
window.jQuery
window.localStorage
window.sessionStorage
window.XDomainRequest

window.blur

window.blur()
blur()

window.close

window.close()
close()

window.focus

window.focus()
focus()

window.moveBy

window.moveBy(x, y)
moveBy(x, y)
x

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

y

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

window.moveTo

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);

window.resizeBy

window.resizeBy(x, y)
resizeBy(x, y)

window.resizeTo

window.resizeTo(width, height)
resizeTo(width, height)

window.scrollBy

window.scrollBy(x, y)
scrollBy(x, y)

window.scrollTo

window.scrollTo(x, y)
scrollTo(x, y)

window.clearTimeout

window.clearTimeout(id)
clearTimeout(id)

window.setTimeout

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