備忘録的プログラミングリファレンス

Windowインターフェイス

 Windowインターフェイスとは、ブラウザが表示されるOS上のウィンドウの情報の取得とその操作の方法を定義したインターフェイスです。 ウィンドウの操作についてはセキュリティ上の問題から限定的です。セキュリティ上の問題から、ブラウザからはOS上のファイル操作は基本的にできないようになっています。

 Windowのプロパティメソッドイベントハンドラーとイベントについては各項目を参照してください。

 WindowインターフェイスはEventTargetインターフェイスを継承しています。Window上でユーザーによる操作などのイベントが発生すると既存または設定したイベントハンドラーが呼び出されます。

Web API における Window インターフェイスの継承図

 Window.onloadイベントなどは初期設定に利用されます。

インターフェイスの継承とオブジェクトのツリー構造

 Window インターフェイスの継承と Window オブジェクト内のオブジェクト群の構成は別の形をしています。 オブジェクト化されると以下のようなツリー構造になります。

Documentオブジェクト
  • Window
  • Document
    • └ <html>
      • ├ <head>
        • └ <tite>、<meta>、<link>...
      • └ <body>
        • └ <article>、<header>、<main>...

 ブラウザによってwebページが読み込まれると、インターフェイスと呼ばれる設計書に従ってページ内容がオブジェクト化されツリー構造が作成されます。

 WindowオブジェクトにDocumentオブジェクトが包括された扱いになります。

 Documentオブジェクトから包括するWindowオブジェクトをdocument.defaultViewプロパティで取得できます。

プロパティ(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 を参照暗号
documentWindowが包括する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ウィンドウの外郭の幅 ピクセル単位サイズ、設定
pageXOffsetscreenXのエリアスサイズ、設定
pageYOffsetscreenYのエリアスサイズ、設定
parent<iframe>のような埋め込まれたWindowの親Windowを取得。<iframe>、Windowオブジェクト
performanceWebページのパフォーマンスに関する情報をもつ Performance オブジェクト自体。詳しくは Performance インターフェイスを参照読み込み、描写速度
personalbarパーソナルバー personalbar オブジェクト自体。表示/非表示情報のみ。詳しくは BarProp インターフェイス を参照ツールバー
screenディスプレイの表示サイズに関する Screen オブジェクト自体。詳しくは Screen インターフェイスを参照サイズ、設定
screenLeftscreenXのエリアスサイズ、設定
screenTopscreenYのエリアスサイズ、設定
screenXWindowの左端からビューポート(見えている)の左端までの距離 ピクセル単位サイズ、設定
screenYWindowの上端からビューポート(見えている)の上端までの距離 ピクセル単位サイズ、設定
scrollbarsスクロールバー scrollbars オブジェクト自体。表示/非表示情報のみ。詳しくは BarProp インターフェイス を参照ツールバー
scrollXDocumentが水平スクロールされている距離を取得 ピクセル単位サイズ、設定
scrollYDocumentが垂直スクロールされている距離を取得 ピクセル単位サイズ、設定
selfWindow オブジェクト自信を取得Windowオブジェク
sessionStoragesessionStorage情報をもつ Storage オブジェクトの取得。詳しくは Storage インターフェイスを参照一時保存
statusbarステータスバー statusbar オブジェクト自体。表示/非表示情報のみ。詳しくは BarProp インターフェイス を参照ツールバー
toolbarツールバー toolbar オブジェクト自体。表示/非表示情報のみ。詳しくは BarProp インターフェイス を参照ツールバー
topWindowの階層の最上位のWindowの参照を取得。Windowオブジェクト
window現在のWindow オブジェクトを取得。window.windowといった使い方ができるWindowオブジェクト

WindowOrWorkerGlobalScopeのプロパティ一覧 

 WindowOrWorkerGlobalScope ミックスインのプロパティを含んでいます。

タイプ名(ハンドラー名)概要分類

メソッド(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 オブジェクト

WindowOrWorkerGlobalScopeのメソッド一覧 

 WindowOrWorkerGlobalScope ミックスインのメソッドも含んでいます。

タイプ名(ハンドラー名)概要分類

イベントタイプ、イベントハンドラー(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ゲーム用パッドに外されたら