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()
ウィンドウの読み込みを中止します。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
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 | ● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- Window.parent
- parentは、Windowのプロパティです。自身をiframe要素などでサブフレームとして開いている親のウィンドウを返します。
- Window.scrollBy()
- scrollBy()は、Windowのメソッドです。相対位置を指定してスクロールします。
- Window.alert()
- alert()は、Windowのメソッドです。アラートを表示します。最近のブラウザはダイアログを継続的に非表示にする機能を備えているので、重要な場面で利用するのは非推奨です
- Window.window
- windowは、Windowのプロパティです。Windowを返します。これは、自分自身と同じです。window===window.windowも、window===window.window.windowも成り立ちます。windowがWindowを返す仕組みの元です。