Edition for Web Developers — Last Updated 24 March 2023
Window
オブジェクトSupport in all current engines.
window.window
window.frames
window.self
これらの属性はすべてwindowを返す。
window.document
windowと関連するDocument
を返す。
document.defaultView
documentに関連付けられたWindow
がある場合はそれを返し、そうでなければnullを返す。
window = window.open([ url [, target [, features ] ] ])
url(デフォルトで"about:blank
")を表示するためのウィンドウを開き、それを返す。target(デフォルトで"_blank
")は、新しいウィンドウの名前を示す。すでにその名前をもつウィンドウが存在する場合、それが再利用される。features引数はコンマ区切りトークンの集合を含むことができる:
noopener
"noreferrer
"これらは、ハイパーリンク上のnoopener
およびnoreferrer
リンクタイプと同等に動作する。
popup
"ユーザーエージェントに、新しいウィンドウに最小限のウェブブラウザーユーザーインターフェイスを提供するように促す。 (すべてのBarProp
オブジェクトにもvisible
ゲッターに影響を与える。)
globalThis. open( "https://email.example/message/CAOOOkFcWW97r8yg=SsWg7GgCmp4suVX9o85y8BvNRqMjuc5PXg" , undefined , "noopener,popup" );
window.name [ = value ]
ウィンドウの名前を返す。
名前を変更する設定が可能である。
window.close()
ウィンドウを閉じる。
window.closed
ウィンドウが閉じられている場合はtrueを返し、そうでなければfalseを返す。
window.stop()
ドキュメントの読み込みを中止する。
Window
オブジェクトのインデックス付きアクセスwindow.length
文書ツリーの子ナビゲート可能の数を返す。
window[index]
指定された文書ツリーの子ナビゲート可能に対応するWindowProxy
を返す。
Window
オブジェクトの名前付きアクセスwindow[name]
指示された要素または要素のコレクションを返す。
一般的な規則として、これに依存することはもろいコードを導く。たとえば、新しい機能がウェブプラットフォームに加えられるように、いずれかのIDがこのAPIのマッピングで終わることは時間をかけて変化できる。この代わりに、document.getElementById()
またはdocument.querySelector()
を使用する。
window.top
window.opener [ = value ]
オープナーブラウジングコンテキストに対するWindowProxy
を返す。
存在しないまたはnullが設定されている場合、nullを返す。
nullに設定可能である。
window.parent
親ナビゲート可能に対するWindowProxy
を返す。
window.frameElement
ナビゲート可能コンテナー要素を返す。
存在しない場合、生成元をまたいだ状況でnullを返す。
歴史的な理由から、Window
インターフェイスには、特定のウェブブラウザーインターフェイス要素の可視性を表すいくつかのプロパティがあった。
プライバシーと相互運用性の理由から、ウィンドウがポップアップウィンドウを表しているかどうかに関係なく、これらのプロパティはすべて同じ値を返すようになった。
window.locationbar.visible
Support in all current engines.
window.
.visiblewindow.personalbar.visible
window.scrollbars.visible
window.statusbar.visible
window.toolbar.visible
Window
がポップアップでない場合はtrueを返す。そうでなければfalseを返す。
WindowProxy
外来オブジェクトWindowProxy
は、Window
の通常のオブジェクトをラップする外来オブジェクトであり、ほとんどの操作をラップされたオブジェクトに間接的に転送する。各ブラウジングコンテキストは、関連するWindowProxy
オブジェクトを持つ。ブラウジングコンテキストがナビゲートされるとき、ブラウジングコンテキストの関連付けられたWindowProxy
オブジェクトによってラップされたWindow
オブジェクトが変更される。
Location
インターフェイスSupport in all current engines.
Support in all current engines.
Support in all current engines.
各Window
オブジェクトは、Location
オブジェクトの一意なインスタンスに関連付けられており、Window
オブジェクトの作成時に割り当てられる。
document.location [ = value ]
window.location [ = value ]
現在のページの位置とLocation
オブジェクトを返す。
別のページにナビゲートするために、設定可能である。
Location
オブジェクトは、関連付けられたDocument
のURLの表現と、関連付けられたナビゲート可能をナビゲートおよびリロードするためのメソッドを提供する。
location.toString()
location.href
Location
オブジェクトのURLを返す。
与えられたURLにナビゲートするように、設定可能である。
location.origin
Location
オブジェクトの生成元を返す。
location.protocol
Location
オブジェクトのスキームを返す。
変更されたスキームと同じURLにナビゲートするように、設定可能である。
location.host
Location
オブジェクトのURLのホストとポートを返す(スキームのデフォルトポートと異なる場合)。
変更されたホストおよびポートと同じURLにナビゲートするように、設定可能である。
location.hostname
Location
オブジェクトのホストを返す。
変更されたホストと同じURLにナビゲートするように、設定可能である。
location.port
Location
オブジェクトのポートを返す。
変更されたポートと同じURLにナビゲートするように、設定可能である。
location.pathname
Location
オブジェクトのパスを返す。
変更されたパスと同じURLにナビゲートするように、設定可能である。
location.search
Location
オブジェクトのURLのクエリーを返す(空でない場合は先頭の"?
"を含む)。
(先頭の"?
"を無視して)変更されたクエリーと同じURLにナビゲートするように、設定可能である。
location.hash
Location
オブジェクトのURLのフラグメントを返す(空でない場合は先頭の"#
"を含む)。
(先頭の"#
"を無視して)変更されたフラグメントと同じURLにナビゲートするように、設定可能である。
location.assign(url)
与えられたURLにナビゲートする。
location.replace(url)
セッション履歴から現在のページを削除し、与えられたURLにナビゲートする。
location.reload()
現在のページをリロードする。
location.ancestorOrigins
History
インターフェイスSupport in all current engines.
Support in all current engines.
history.length
現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーの数を返す。
history.scrollRestoration
history.scrollRestoration = value
アクティブなセッション履歴エントリーのスクロール復元モードをvalueに設定する。
history.state
JavaScript値に逆シリアル化された、アクティブなセッション履歴エントリーのシリアル化された状態を返す。
history.go()
現在のページをリロードする。
history.go(delta)
現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーリストで、指定された数のステップを前後に移動する。
ゼロ差分は、現在のページをリロードする。
差分が範囲外の場合、何もしない。
history.back()
現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーリストで1ステップ戻る。
前のページが存在しない場合、何もしない。
history.forward()
現在のトラバース可能なナビゲート可能の全体のセッション履歴エントリーリストで1ステップ進める。
次のページが存在しない場合、何もしない。
history.pushState(data, "")
シリアル化された状態をdataのシリアル化に設定して、セッション履歴に新しいエントリーを追加する。アクティブな履歴エントリーのURLがコピーされ、新しいエントリーのURLに使用される。
(2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。)
history.pushState(data, "", url)
シリアル化された状態をdataのシリアル化に設定し、URLをurlに設定して、セッション履歴に新しいエントリーを追加する。
現在のDocument
がURLをurlに書き換えることができない場合、"SecurityError
" DOMException
が投げられる。
(2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。)
history.replaceState(data, "")
アクティブなセッション履歴エントリーのシリアル化された状態をdataの構造化されたクローンに更新する。
(2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。)
history.replaceState(data, "", url)
アクティブなセッション履歴エントリーのシリアル化された状態をdataの構造化されたクローンに更新し、そのURLをurlに更新する。
現在のDocument
がURLをurlに書き換えることができない場合、"SecurityError
" DOMException
が投げられる。
(2番目のパラメーターは歴史的な理由で存在し、省略することはできない。空の文字列を渡すことは慣例的なものである。)
document's URL | targetURL | can have its URL rewritten |
---|---|---|
https://example.com/home | https://example.com/home#about | ✅ |
https://example.com/home | https://example.com/home?page=shop | ✅ |
https://example.com/home | https://example.com/shop | ✅ |
https://example.com/home | https://user:pass@example.com/home | ❌ |
https://example.com/home | http://example.com/home | ❌ |
file:///path/to/x | file:///path/to/x#hash | ✅ |
file:///path/to/x | file:///path/to/x?search | ✅ |
file:///path/to/x | file:///path/to/y | ❌ |
about:blank | about:blank#hash | ✅ |
about:blank | about:blank?search | ❌ |
about:blank | about:srcdoc | ❌ |
data:text/html,foo | data:text/html,foo#hash | ✅ |
data:text/html,foo | data:text/html,foo?search | ❌ |
data:text/html,foo | data:text/html,bar | ❌ |
data:text/html,foo | data:bar | ❌ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43 | blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43#hash | ✅ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43 | blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43?search | ❌ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43 | blob:https://example.com/anything | ❌ |
blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43 | blob:path | ❌ |
Document
のURLのみが重要であり、その生成元は重要ではないことに注意する。継承された生成元をもつabout:blank
Document
、サンフォボックスiframe
、またはdocument.domain
セッターが使用されている場合のように、これらが一致しないことがある。
ユーザーはいくつかの座標に常にあり、ユーザーが後で再開するための特定の座標に対応するページをブックマークできるような、ユーザーがラインに沿って移動できるゲームを考える。
そのようなゲームでx=5位置を実装する静的ページは次のようになる:
<!DOCTYPE HTML>
<!-- this is https://example.com/line?x=5 -->
< html lang = "en" >
< title > Line Game - 5</ title >
< p > You are at coordinate 5 on the line.</ p >
< p >
< a href = "?x=6" > Advance to 6</ a > or
< a href = "?x=4" > retreat to 4</ a > ?
</ p >
このようなシステムの問題点は、毎回ユーザーがクリックするとページ全体をリロードする必要があることにある。ここで、代わりにスクリプトを使用して、リロードを行うための別の方法:
<!DOCTYPE HTML>
<!-- this starts off as https://example.com/line?x=5 -->
< html lang = "en" >
< title > Line Game - 5</ title >
< p > You are at coordinate < span id = "coord" > 5</ span > on the line.</ p >
< p >
< a href = "?x=6" onclick = "go(1); return false;" > Advance to 6</ a > or
< a href = "?x=4" onclick = "go(-1); return false;" > retreat to 4</ a > ?
</ p >
< script >
var currentPage = 5 ; // prefilled by server
function go( d) {
setupPage( currentPage + d);
history. pushState( currentPage, "" , '?x=' + currentPage);
}
onpopstate = function ( event) {
setupPage( event. state);
}
function setupPage( page) {
currentPage = page;
document. title = 'Line Game - ' + currentPage;
document. getElementById( 'coord' ). textContent = currentPage;
document. links[ 0 ]. href = '?x=' + ( currentPage+ 1 );
document. links[ 0 ]. textContent = 'Advance to ' + ( currentPage+ 1 );
document. links[ 1 ]. href = '?x=' + ( currentPage- 1 );
document. links[ 1 ]. textContent = 'retreat to ' + ( currentPage- 1 );
}
</ script >
スクリプトをもたないシステムにおいて、前の例と同じように動作する。しかし、同じ体験に対するネットワークアクセスが存在しないので、スクリプトをサポートするユーザーは現在はるかに速く移動できる。さらに、経験に反して、ユーザーは単にナイーブなスクリプトベースのアプローチ、ブックマーク、およびセッション履歴の移動が依然として動作する必要がある。
上記の例において、pushState()
メソッドへのdata引数は、サーバーに送信されるものと同じ情報であるが、スクリプトはURLにユーザーが移動するたびに解析する必要はないので、より便利な形式となる。
ほとんどのアプリケーションは、すべての履歴エントリーに同じスクロール復元モード値を使用したいと考えている。これを実現するために、できるだけ早くscrollRestoration
属性を設定して(たとえば、文書のhead
要素の最初のscript
要素で)、履歴セッションに追加されたエントリーが確実に希望のスクロール復元モードになるようにする。
< head >
< script >
if ( 'scrollRestoration' in history)
history. scrollRestoration = 'manual' ;
</ script >
</ head >
PopStateEvent
インターフェイスSupport in all current engines.
event.state
pushState()
またはreplaceState()
へ提供される情報のコピーを返す。
HashChangeEvent
インターフェイスSupport in all current engines.
event.oldURL
以前に現在であったセッション履歴のエントリーのURLを返す。
event.newURL
今現在であるセッション履歴のエントリーのURLを返す。
PageTransitionEvent
インターフェイスSupport in all current engines.
event.persisted
pageshow
に対して、ページが新しく読み込まれている(およびload
イベントが発生する)場合にfalseを返す。そうでなければ、trueを返す。
pagehide
イベントに対して、ページが最後の時間まで出かける場合はfalseを返す。そうでなければtrueを返す。これは、ユーザーがこのページに戻った場合(Document
のsalvageable状態がtrueのままの場合)にページが再利用される可能性があることを意味する。
ページがサルベージ不能になる原因には、次のものがある:
Document
を存続させないことを決定したiframe
を持っているWebSocket
オブジェクトDocument
の中止BeforeUnloadEvent
インターフェイスSupport in all current engines.
BeforeUnloadEvent
固有の初期化メソッドは存在しない。
BeforeUnloadEvent
インターフェイスは、イベントをキャンセルするだけでなく、returnValue
属性を空文字列以外の値に設定することで、アンロードがユーザーによってキャンセルされたかどうかをチェックできるようにするレガシーインターフェイスである。著者は、returnValue
を使用する代わりに、preventDefault()
メソッド、またはイベントをキャンセルするその他の手段を使用すべきである。