SYNCERのロゴ
アイキャッチ画像

Window - ウィンドウ

Windowは、ウィンドウ(ブラウジングコンテキスト)の情報を取得したり、操作するための機能を備えたインターフェイスです。

概要

名前
Window
実装
GlobalEventHandlers
IDL
[PrimaryGlobal, LegacyUnenumerableNamedProperties] 
interface Window : EventTarget {
  // the current browsing context
  [Unforgeable] readonly attribute WindowProxy window;
  [Replaceable] readonly attribute WindowProxy self;
  [Unforgeable] readonly attribute Document document;
  attribute DOMString name; 
  [PutForwards=href, Unforgeable] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute CustomElementRegistry customElements;
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  attribute DOMString status;
  void close();
  readonly attribute boolean closed;
  void stop();
  void focus();
  void blur();

  // other browsing contexts
  [Replaceable] readonly attribute WindowProxy frames;
  [Replaceable] readonly attribute unsigned long length;
  [Unforgeable] readonly attribute WindowProxy? top;
  attribute any opener;
  [Replaceable] readonly attribute WindowProxy? parent;
  readonly attribute Element? frameElement;
  WindowProxy? open(optional USVString url = "about:blank", optional DOMString target = "_blank", optional [TreatNullAs=EmptyString] DOMString features = "");
  getter object (DOMString name);
  // Since this is the global object, the IDL named getter adds a NamedPropertiesObject exotic
  // object on the prototype chain. Indeed, this does not make the global object an exotic object.
  // Indexed access is taken care of by the WindowProxy exotic object.

  // the user agent
  readonly attribute Navigator navigator; 
  readonly attribute ApplicationCache applicationCache;

  // user prompts
  void alert();
  void alert(DOMString message);
  boolean confirm(optional DOMString message = "");
  DOMString? prompt(optional DOMString message = "", optional DOMString default = "");
  void print();

  unsigned long requestAnimationFrame(FrameRequestCallback callback);
  void cancelAnimationFrame(unsigned long handle);

  void postMessage(any message, USVString targetOrigin, optional sequence<object> transfer = []);
};
Window implements GlobalEventHandlers;
Window implements WindowEventHandlers;

callback FrameRequestCallback = void (DOMHighResTimeStamp time);

typedef double DOMHighResTimeStamp;
// CSS Object Model
partial interface Window {
  [NewObject] CSSStyleDeclaration getComputedStyle(Element elt, optional CSSOMString? pseudoElt);
};

typedef USVString CSSOMString;
// CSSOM View Module
partial interface Window {
    [NewObject] MediaQueryList matchMedia(CSSOMString query);
    [SameObject, Replaceable] readonly attribute Screen screen;

    // browsing context
    void moveTo(long x, long y);
    void moveBy(long x, long y);
    void resizeTo(long x, long y);
    void resizeBy(long x, long y);

    // viewport
    [Replaceable] readonly attribute long innerWidth;
    [Replaceable] readonly attribute long innerHeight;

    // viewport scrolling
    [Replaceable] readonly attribute double scrollX;
    [Replaceable] readonly attribute double pageXOffset;
    [Replaceable] readonly attribute double scrollY;
    [Replaceable] readonly attribute double pageYOffset;
    void scroll(optional ScrollToOptions options);
    void scroll(unrestricted double x, unrestricted double y);
    void scrollTo(optional ScrollToOptions options);
    void scrollTo(unrestricted double x, unrestricted double y);
    void scrollBy(optional ScrollToOptions options);
    void scrollBy(unrestricted double x, unrestricted double y);

    // client
    [Replaceable] readonly attribute long screenX;
    [Replaceable] readonly attribute long screenY;
    [Replaceable] readonly attribute long outerWidth;
    [Replaceable] readonly attribute long outerHeight;
    [Replaceable] readonly attribute double devicePixelRatio;
};

typedef USVString CSSOMString;

dictionary ScrollToOptions : ScrollOptions {
    unrestricted double left;
    unrestricted double top;
};

dictionary ScrollOptions {
    ScrollBehavior behavior = "auto";
};

enum ScrollBehavior { "auto", "instant", "smooth" };
// Selection API
partial interface Window {
    Selection? getSelection();
};
仕様書
https://html.spec.whatwg.org/multipage/window-object.html#window
https://drafts.csswg.org/cssom/#extensions-to-the-window-interface (CSS Object Model)
https://drafts.csswg.org/cssom-view/#extensions-to-the-window-interface (CSSOM View Module)
http://w3c.github.io/selection-api/#extensions-to-window-interface (Selection API)

チュートリアル

Windowは、windowが返します。

window ;	// Window

window.history ;
window.location ;

windowのプロパティやメソッドは、windowを省略して利用できます。省略した方が処理が高速になります。

window.history.length ;
history.length ;

window.location.href ;
location.href ;

window.alert() ;
alert() ;

id属性値を持つ要素は、Windowのプロパティから参照できます。こちらは、Document.getElementById()の方が処理が高速なのでご注意下さい。

<p id="hoge">SYNCER</p>
var element = document.getElementById( "hoge" ) ;
var element = window.hoge ;
var element = hoge ;

コンストラクタ

コンストラクタはありません。

プロパティ

applicationCache

ApplicationCacheを返します。

closed

ウィンドウが閉じられているか否かを返します。

customElements

CustomElementRegistryを返します。

devicePixelRatio

ウィンドウの、デバイスピクセル比を返します。

document

このウィンドウが参照しているDocumentを返します。

frameElement

自身を開いている元のフレーム要素を返します。

frames

自分自身を含めた全てのフレームのウィンドウを返します。

history

Historyを返します。

innerHeight

ウィンドウのビューポートの高さを返します。

innerWidth

ウィンドウのビューポートの横幅を返します。

length

サブフレームの数を返します。

location

Locationを返します。

locationbar

ロケーションバーを表すBarPropを返します。

menubar

メニューバーを表すBarPropを返します。

name

ウィンドウの名前を返します。

navigator

Navigatorを返します。

opener

自身をハイパーリンク(target=_blank)やopen()で新しく開いた元のウィンドウを返します。

outerHeight

ウィンドウ全体の高さを返します。

outerWidth

ウィンドウ全体の横幅を返します。

pageXOffset

水平方向のスクロール量を返します。このプロパティはScrollXのエイリアスです。

pageYOffset

垂直方向のスクロール量を返します。このプロパティはScrollYのエイリアスです。

parent

自身をiframe要素などでサブフレームとして開いている親のウィンドウを返します。

personalbar

パーソナルバーを表すBarPropを返します。

screen

Screenを返します。

screenX

ウィンドウの水平方向の位置を返します。

screenY

ウィンドウの垂直方向の位置を返します。

scrollX

水平方向のスクロール量を返します。

scrollY

垂直方向のスクロール量を返します。

scrollbars

スクロールバーを表すBarPropを返します。

self

Windowを返します。これは、自分自身と同じです。

status

ウィンドウのステータスを表す文字列を返します。

statusbar

ステータスバーを表すBarPropを返します。

toolbar

ツールバーを表すBarPropを返します。

top

最上位のコンテキスト(ウィンドウ)を返します。

window

Windowを返します。これは、自分自身と同じです。

メソッド

alert()

アラートを表示します。

blur()

ウィンドウのフォーカスを外します。

cancelAnimationFrame()

requestAnimationFrame()で実行されている繰り返し処理を中止します。

close()

ウィンドウを閉じます。

confirm()

確認ダイアログを表示します。ユーザーが「はい」と「いいえ」、どちらを選んだかを返します。

focus()

ウィンドウにフォーカスします。

getComputedStyle()

要素に適用されているスタイルシートをCSSStyleDeclarationで返します。

getSelection()

選択中のテキストを表すSelectionを返します。

matchMedia()

MediaQueryListを作成します。

moveBy()

相対位置を指定して、ウィンドウを移動します。

moveTo()

絶対位置を指定して、ウィンドウを移動します。

open()

新しいウィンドウを開きます。

postMessage()

別ウィンドウにメッセージを送信します。

print()

印刷ダイアログを開きます。

prompt()

入力ダイアログを開きます。

requestAnimationFrame()

60fpsの間隔で繰り返し処理を実行します。

resizeBy()

相対位置を指定して、ウィンドウをリサイズします。

resizeTo()

絶対位置を指定して、ウィンドウをリサイズします。

scroll()

絶対位置を指定してスクロールします。

scrollBy()

相対位置を指定してスクロールします。

scrollTo()

絶対位置を指定してスクロールします。このメソッドは、scroll()のエイリアスです。

stop()

ウィンドウの読み込みを中止します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
Window
alert()
applicationCache 42+ 56+ 10+
blur()
cancelAnimationFrame() 24+ 23+ 7.1+ 10+ 15+ 7.0+ 4.4+
close()
closed
confirm()
customElements 54+× 10+×× 41+ 10.0+×
devicePixelRatio 18+
document
focus()
frameElement
frames
getComputedStyle()
getSelection()
history
innerHeight
innerWidth
length
location
locationbar× 15+
matchMedia() 6+ 5.1+ 10+ 15+ 4.0+
menubar× 15+
moveBy()
moveTo()
name
navigator
open()
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
personalbar× 15+
postMessage() 8+
print()
prompt()
requestAnimationFrame() 24+ 23+ 7.1+ 10+ 15+ 7.0+ 4.4+
resizeBy()
resizeTo()
screen
screenX
screenY
scroll()
scrollbars× 15+
scrollBy()
scrollTo()
scrollX確認中
scrollY確認中
self
status
statusbar× 15+
stop()×
toolbar× 15+
top
window
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。