Window インターフェイス
Window インターフェイスとは、ブラウザが表示されるウィンドウの情報の取得とその操作の方法を定義したインターフェイスです。
ウィンドウの操作についてはセキュリティ上の問題から限定的です。セキュリティ上の問題から、ブラウザからは OS 上のファイル操作は基本的にできないようになっています。
Windowのプロパティ、メソッド、イベントハンドラーとイベントについては各項目を参照してください。
Window インターフェイスはEventTargetインターフェイスを継承しています。Window上でユーザーによる操作などのイベントが発生すると既存または設定したイベントハンドラーが呼び出されます。
Window.onloadイベントなどは初期設定に利用されます。
インターフェイスの継承とオブジェクトのツリー構造
Window インターフェイスの継承と Window オブジェクト内のオブジェクト群の構成は別の形をしています。 オブジェクト化されると以下のようなツリー構造になります。
- Window
- └ Document
- └ <html>
- ├ <head>
- └ <tite>、<meta>、<link>...
- └ <body>
- └ <article>、<header>、<main>...
- ├ <head>
- └ <html>
ブラウザによってwebページが読み込まれると、インターフェイスと呼ばれる設計書に従ってページ内容がオブジェクト化されツリー構造が作成されます。
WindowオブジェクトにDocumentオブジェクトが包括された扱いになります。
Documentオブジェクトから包括するWindowオブジェクトをdocument.defaultViewプロパティで取得できます。
ページ内 Index
プロパティ(Properties)
Windowは省略が可能です。例えば Window.console は console 、Window.event は event と書けます。
console.log("error occurred : ");
よく使われるプロパティとしては、履歴ページを遷移する .history があります。
| Property | 概要 | 分類 |
|---|---|---|
| console | デバグ用コンソール Console API オブジェクト自身。console.log('error'); といった使い方をする。詳しくは Console API を参照 | 開発用 |
| customElements | 任意にエレメントが作成できる CustomElementRegistry オブジェクト自身。customElements.define( "example-element", Class_Example );といった使い方をする。詳しくは CustomElementRegistry を参照 | 開発用 |
| crypto | 暗号に関連した、Crypto オブジェクトの取得。詳しくは Crypto を参照 | 暗号 |
| document | Windowが包括するDocumentオブジェクト自身。document.getElementbyId('example');といった使い方をする。詳しくはDocumentインターフェイスを参照 | エレメント参照、Document |
| event | 現在の Event オブジェクト自身。event.type;といった使い方をする。イベントハンドラーを通した関数内でよく使う。詳しくは Event を参照 | エレメント参照、Event |
| frameElement | <iframe>のような埋め込まれたエレメントの取得。自身がトップレベルエレメントの場合はnull | <iframe> |
| frames | <iframe>のような埋め込まれたエレメント群をリストで取得 | <iframe> |
| history | ブラウザーのセッション履歴 History オブジェクトの取得。詳しくは History インターフェイスを参照 | 履歴 |
| innerHeight | ウィンドウの内部の高さ ピクセル単位 | サイズ、設定 |
| innerWidth | ウィンドウの内部の高さ ピクセル単位 | サイズ、設定 |
| length | <iframe>のような埋め込まれたエレメント群の数を取得。 | <iframe> |
| Location | 現在のURL情報をもつ Location オブジェクト自身。var url=location;でURLが取得できる。詳しくは Location インターフェイスを参照 | URL |
| locationbar | ロケーションバー locationbar オブジェクト自体。表示／非表示情報のみ。詳しくは BarProp インターフェイス を参照 | ツールバー |
| localStorage | localStorageに保存された情報をもつ Storage オブジェクトの取得。詳しくは Storage インターフェイスを参照 | 一時保存 |
| menubar | メニューバー menubar オブジェクト自体。表示／非表示情報のみ。詳しくは BarProp インターフェイス を参照 | ツールバー |
| name | ウィンドウのブラウジングコンテキスト（ウィンドウの上部バー）の名称の取得と設定 | サイズ、設定 |
| navigator | クッキーの拒否、ネットワークの接続状態や位置情報、外部デバイスの制御といったブラウザーやデバイス上で管理された情報に関する navigator オブジェクトを返す。詳しくは Navigator を参照してください | IOT、デバイス制御 |
| opener | 現在のWindowを開いたWindowを取得。 | Windowオブジェクト |
| outerHeight | ウィンドウの外郭の高さ ピクセル単位 | サイズ、設定 |
| outerWidth | ウィンドウの外郭の幅 ピクセル単位 | サイズ、設定 |
| pageXOffset | screenXのエリアス | サイズ、設定 |
| pageYOffset | screenYのエリアス | サイズ、設定 |
| parent | <iframe>のような埋め込まれたWindowの親Windowを取得。 | <iframe>、Windowオブジェクト |
| performance | Webページのパフォーマンスに関する情報をもつ Performance オブジェクト自体。詳しくは Performance インターフェイスを参照 | 読み込み、描写速度 |
| personalbar | パーソナルバー personalbar オブジェクト自体。表示／非表示情報のみ。詳しくは BarProp インターフェイス を参照 | ツールバー |
| screen | ディスプレイの表示サイズに関する Screen オブジェクト自体。詳しくは Screen インターフェイスを参照 | サイズ、設定 |
| screenLeft | screenXのエリアス | サイズ、設定 |
| screenTop | screenYのエリアス | サイズ、設定 |
| screenX | Windowの左端からビューポート（見えている）の左端までの距離 ピクセル単位 | サイズ、設定 |
| screenY | Windowの上端からビューポート（見えている）の上端までの距離 ピクセル単位 | サイズ、設定 |
| scrollbars | スクロールバー scrollbars オブジェクト自体。表示／非表示情報のみ。詳しくは BarProp インターフェイス を参照 | ツールバー |
| scrollX | Documentが水平スクロールされている距離を取得 ピクセル単位 | サイズ、設定 |
| scrollY | Documentが垂直スクロールされている距離を取得 ピクセル単位 | サイズ、設定 |
| self | Window オブジェクト自信を取得 | Windowオブジェク |
| sessionStorage | sessionStorage情報をもつ Storage オブジェクトの取得。詳しくは Storage インターフェイスを参照 | 一時保存 |
| statusbar | ステータスバー statusbar オブジェクト自体。表示／非表示情報のみ。詳しくは BarProp インターフェイス を参照 | ツールバー |
| toolbar | ツールバー toolbar オブジェクト自体。表示／非表示情報のみ。詳しくは BarProp インターフェイス を参照 | ツールバー |
| top | Windowの階層の最上位のWindowの参照を取得。 | Windowオブジェクト |
| window | 現在のWindow オブジェクトを取得。window.windowといった使い方ができる | Windowオブジェクト |
メソッド(Methods)
Windowは省略が可能です。例えば Window.console は console 、Window.event は event と書けます。
Window インターフェイスは、EventTargetインターフェイスのメソッドを継承しています。
| メソッド(Method) | 概要 | 分類 |
|---|---|---|
| alert() | 警告ダイアログを表示 | ダイアログ |
| blur() | 現在のWindowからフォーカスを外す | Window オブジェクト |
| cancelAnimationFrame() | requestAnimationFrame()による描写処理をキャンセルする。requestAnimationFrame()の返り値 ID を渡す | アニメーション、描写 |
| close() | Windowを閉じる | Window オブジェクト |
| confirm() | メッセージ、OKボタン, キャンセルボタンのあるモーダルダイアログ | ダイアログ |
| focus() | Windowをフォーカスする | Window オブジェクト |
| getComputedStyle() | 引数に指定されたエレメントオブジェクトに適応されているスタイル設定の情報である CSSStyleDeclaration オブジェクトを取得 | CSS |
| getSelection() | ユーザーが選択しているテキストの範囲情報である Selection オブジェクトの取得 | テキスト選択 |
| matchMedia() | メディア（デバイスなど）が要求する表示幅などの情報をもつ MediaQueryList オブジェクトを取得。詳しくは MediaQueryList インターフェイスを参照 | 表示デバイス、プリンター |
| moveBy() | Windowを指定した距離の移動 | サイズ、設定 |
| moveTo() | Windowを指定した位置に移動 | サイズ、設定 |
| open() | 新しいWindowを開く | Window オブジェクト |
| postMessage() | Window オブジェクト間でクロスドメイン通信ができる。<iframe>やポップアップによる親子間での通信 | Window間のデータのやりとり |
| print() | 印刷ダイアログを開く | ダイアログ |
| prompt() | 入力ができるダイアログを表示 | ダイアログ |
| requestAnimationFrame() | よりスムーズなアニメーション効果の起動 | アニメーション、描写 |
| resizeBy() | Windowのサイズを指定分変える | サイズ、設定 |
| resizeTo() | Windowのサイズを指定サイズに変える | サイズ、設定 |
| scroll() | Window内のDocumentを指定位置にスクロール | サイズ、設定 |
| scrollBy() | Window内のDocumentを指定分スクロール | サイズ、設定 |
| scrollTo() | Window内のDocumentを指定の位置分スクロール | サイズ、設定 |
| stop() | Windowの読み込みを停止 | Window オブジェクト |
イベントタイプ、イベントハンドラー(Event Handlers)
Windowへの設定が対象となるイベント、イベントハンドラーについてです。定義方法には以下があります。
window.addEventListener( 'click', ()=>{...} )
window.onload = function(){...}
イベントハンドラーとは、onイベント名の属性です。この属性が設定されることで Windowでイベントを捉えたら定義された関数や関数式を実行します。
.addEventListener() メソッドではイベントタイプを指定します。
Window のイベントハンドラーは GlobalEventHandlers ミックスイン、WindowEventHandlers ミックスインを継承しています。
以下は GlobalEventHandlers ミックスイン、WindowEventHandlers ミックスインのイベント名一覧です。
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
詳しくは、 GlobalEventHandlers ミックスイン、WindowEventHandlers ミックスインを参照してください。
以下はその他 Window インターフェイスで利用できるイベントタイプ名の一覧です。実験的もしくは古いために使用は推奨できません。イベントハンドラーはこのタイプ名にon
が付いた名称です。
| タイプ名 | 概要 | 分類 |
|---|---|---|
| appinstalled ( onappinstalled ) | ウェブアプリケーションのインストールに成功すると | |
| beforeinstallprompt ( onbeforeinstallprompt ) | ウェブアプリケーションのインストールをプロンプトで承諾したら | |
| devicemotion | デバイスのモーションセンサーが検知したら | |
| ondeviceorientation | ||
| DOMContentLoaded | イベントのみ。ページが読み込まれ、スタイルシート、画像、サブフレームは読み込まれる前 | |
| gamepadconnected | ゲーム用パッドに接続されたら | |
| gamepaddisconnected | ゲーム用パッドに外されたら |