JavaScript window

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

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

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

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

プロパティ

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

window オブジェクトのプロパティ
プロパティ 説明
console ウェブ・ブラウザのデバッグ・コンソール
document HTML ドキュメント
frames すべてのフレームの配列
history ブラウザのURL履歴
jQuery jQuery ライブラリ
localStorage ローカル・ストレージ
location URL
navigator ウェブ・ブラウザ
opener 親ウィンドウ
pageXOffset ウィンドウの左端から水平方向にスクロールされたピクセル数
pageYOffset ウィンドウの状態から垂直方向にスクロールされたピクセル数
parent 親ウィンドウ
screen スクリーン
screenLeft スクリーン対するウィンドウの X 座標
screenX プロパティと同じ
screenTop スクリーン対するウィンドウの Y 座標
screenY プロパティ
self 現在のウィンドウ
top ウィンドウの上端

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 オブジェクトのメソッド一覧を以下に示す。

window オブジェクトのメソッド
メソッド 説明
alert 警告ダイアログを表示する
clearInterval 一定時間毎に実行する処理を解除する
confirm 確認を行うために「はい」と「いいえ」を選択するダイアログを表示する
open Webブラウザを別ウィンドウ又はタブで開く
prompt 文字列を入力できるダイアログを表示する
setInterval 一定時間毎に実行する処理を設定する

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