diff options
Diffstat (limited to 'files/ja/web/api/windoweventhandlers')
12 files changed, 924 insertions, 0 deletions
diff --git a/files/ja/web/api/windoweventhandlers/index.html b/files/ja/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..e06b61d49c --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/index.html @@ -0,0 +1,103 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML DOM + - Interface + - Mixin + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>WindowEventHandlers</code></strong> ミックスインは、{{domxref("Window")}}、{{domxref("HTMLBodyElement")}}、{{domxref("HTMLFrameSetElement")}} などのいくつかのインターフェイスに共通のイベントハンドラを記述します。 これらの各インターフェイスは、追加の固有のイベントハンドラを実装できます。</span></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>WindowEventHandlers</code> はインターフェースではなく、ミックスインです。 実際には、<code>WindowEventHandlers</code> 型のオブジェクトを作成することはできません。</p> +</div> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em><code>onXYZ</code> という形式のイベントプロパティは、{{domxref("WindowEventHandlers")}} で定義され、{{domxref("Window")}} および Web Workers の {{domxref("WorkerGlobalScope")}} によって実装されます。</em></p> + +<dl> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>{{event("afterprint")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>{{event("beforeprint")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>{{event("beforeunload")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt> + <dd>{{event("hashchange")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt> + <dd>{{event("languagechange")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>{{event("message")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onmessageerror")}}</dt> + <dd>{{event("MessageError")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>{{event("offline")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>{{event("online")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>{{event("pagehide")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>{{event("pageshow")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt> + <dd>{{event("popstate")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onrejectionhandled")}}</dt> + <dd>{{event("rejectionhandled")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。 {{jsxref("Promise")}} が拒否され、拒否が処理されたことを示します。</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>{{event("storage")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}}</dt> + <dd>{{event("unhandledrejection")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。 {{jsxref("Promise")}} は拒否されたが拒否が処理されなかったことを示します。</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>{{event("unload")}} イベントが発生したときに呼び出されるコードを表す {{domxref("EventHandler")}} です。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>このインターフェイスはメソッドを定義しません。</em></p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'WindowEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName("HTML5.1")}} 以降、変更はありません。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML5 W3C")}} スナップショット以降に <code>onlanguage</code> が追加されました。</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 <code>WindowEventHandlers</code> の作成（ターゲットの前にあるプロパティ）。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window")}} と {{domxref("WorkerGlobalScope")}}</li> +</ul> diff --git a/files/ja/web/api/windoweventhandlers/onbeforeprint/index.html b/files/ja/web/api/windoweventhandlers/onbeforeprint/index.html new file mode 100644 index 0000000000..3365ee7e4d --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onbeforeprint/index.html @@ -0,0 +1,69 @@ +--- +title: WindowEventHandlers.onbeforeprint +slug: Web/API/WindowEventHandlers/onbeforeprint +tags: + - API + - DOM + - Event Handler + - HTML DOM + - Reference + - onbeforeprint + - プロパティ + - 印刷 +translation_of: Web/API/WindowEventHandlers/onbeforeprint +--- +<div>{{ApiRef}}</div> + +<p>{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onbeforeprint</code></strong> プロパティは、現在のウィンドウの {{event("beforeprint")}} イベントを処理するための {{domxref("EventHandler")}} です。 このイベントは、印刷ダイアログウィンドウが開く前に発生します。</p> + +<p><code>beforeprint</code> イベントと {{event("afterprint")}} イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、<code><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types">@media print</a></code> CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.addEventListener("beforeprint", function(event) { ... }); +window.onbeforeprint = function(event) { ... }; +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>Safari はこれらのイベントを実装していませんが、{{domxref("window.matchMedia")}}<code>('print')</code> を使用して <code>beforeprint</code> イベントと同等の結果を作成できます。</p> + +<pre class="brush: js">var mediaQueryList = window.matchMedia('print'); +mediaQueryList.addListener(function(mql) { + if(mql.matches) { + console.log('onbeforeprint に相当する webkit'); + } +});</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onbeforeprint")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window.print()")}}</li> + <li>{{domxref("WindowEventHandlers.onafterprint")}}</li> + <li><a href="/ja/docs/Web/Guide/Printing">印刷</a></li> +</ul> diff --git a/files/ja/web/api/windoweventhandlers/onbeforeunload/index.html b/files/ja/web/api/windoweventhandlers/onbeforeunload/index.html new file mode 100644 index 0000000000..2df07cafcd --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onbeforeunload/index.html @@ -0,0 +1,98 @@ +--- +title: WindowEventHandlers.onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload +tags: + - API + - DOM + - Event Handler + - Property + - Reference + - Window + - イベントハンドラー + - プロパティ +translation_of: Web/API/WindowEventHandlers/onbeforeunload +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>onbeforeunload</strong></code> は {{domxref("WindowEventHandlers")}} ミックスインのプロパティで、 {{event("beforeunload")}} イベントを処理する {{domxref("EventHandler")}} です。このイベントはウィンドウでリソースを {{event("unload")}} しようとするときに発生します。この時点では文書はまだ表示されており、イベントはキャンセル可能な状態です。</p> + +<div class="note"> +<p><strong>メモ:</strong> ブラウザーによっては不要なポップアップを防ぐために、ページで操作が行われない限り、 <code>beforeunload</code> イベントハンドラーの中で作られたプロンプトを表示しないことがあります。さらに、ブラウザーによっては全く表示しないかもしれません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.addEventListener("beforeunload", function(event) { ... }); +window.onbeforeunload = function(event) { ... };</pre> + +<p>ふつうは、 {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} および {{event("beforeunload")}} イベントを使用したほうが <code>onbeforeunload</code> を使用するよりも適切です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、ページの終了前にユーザーに確認を取ります。</p> + +<p>HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。</p> + +<pre class="brush:js">window.addEventListener('beforeunload', function (e) { + // イベントをキャンセルする + e.preventDefault(); + // Chrome では returnValue を設定する必要がある + e.returnValue = ''; +}); +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>ページが JavaScript を使用してコンテンツを表示している場合、ページを離れて元に戻ったときに JavaScript が停止することがあります。 <code>window.onbeforeunload</code> をバインドすることで、ブラウザーがページを完全にキャッシュすることを防ぐことができます。そうすると、ページ内の JavaScript は、次回の訪問時に起動され、必要に応じてコンテンツを更新します。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>このイベントは最初に Microsoft Internet Explorer 4 で導入され、HTML5 仕様で標準化されました。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-window-onbeforeunload', 'onbeforeunload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.WindowEventHandlers.onbeforeunload")}}</p> + +<p>HTML 仕様書は、ユーザーに確認を取るときに {{domxref("Event.returnValue")}} メソッドの代わりに {{domxref("Event.preventDefault()")}} メソッドを使用するよう明記しています。しかし、これはまだすべてのブラウザーが対応しているわけではありません。</p> + +<p>このイベントが <code>null</code> でも <code>undefined</code> でもない値を返した場合 (または <code>returnValue</code> プロパティに設定した場合)、ユーザーに対してページが終了することの確認が行われます。古いブラウザーでは、イベントの返値がダイアログに表示されます。 Firefox 44, Chrome 51, Opera 38, Safari 9.1 以降では、次のように、文字列の返値ではなく、ウェブページからは制御できない一般化された文字列が表示されます。</p> + +<ul> + <li>例えば、 Firefox では "This page is asking you to confirm that you want to leave - data you have entered may not be saved." (このページが本当にページから離れるかどうかを確認しています。 - 入力されたデータは保存されない可能性があります) という文字列が表示されます ({{bug("588292")}} を参照)。</li> + <li>Chrome では "Do you want to leave this site? Changes you made may not be saved" (サイトを離れますか？変更が保存されない可能性があります) という文字列が表示されます (<a href="https://www.chromestatus.com/feature/5349061406228480">Chrome Platform Status</a> を参照)。</li> +</ul> + +<p>Internet Explorer は <code>null</code> の返値を尊重せず、テキストとして "null" をユーザーに表示します。プロンプトをスキップするには、 <code>undefined</code> を使用する必要があります。</p> + +<p>ブラウザーによっては、このイベント内での {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} の呼び出しは無視される可能性があります。詳しくは <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">HTML 仕様書</a>を参照して下さい。</p> + +<p>また、様々なブラウザーがイベントの結果を無視し、ユーザーにまったく確認を取らないことがあります。このような場合、文書は常に自動的にアンロードされます。 Firefox では <a>about:config</a> の中に <code>dom.disable_beforeunload</code> という名前のスイッチがあり、この動作を有効にすることができます。Chrome 60 時点では、フレームまたはページが読み込まれてからユーザーが何も操作を行っていない場合、確認は行われません。</p> diff --git a/files/ja/web/api/windoweventhandlers/onhashchange/index.html b/files/ja/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..ad25ea1977 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,161 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +tags: + - Event Handler + - HTML DOM + - Hash + - Property + - Reference + - URL & Hash + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onhashchange</code></strong> プロパティは、<code><a href="/ja/docs/Web/API/Window/hashchange_event">hashchange</a></code> イベントを処理するための {{domxref("EventHandler")}} です。</span></p> + +<p><code>hashchange</code> イベントは、ウィンドウのハッシュが変更されると発生します（{{domxref("Window.location")}} および {{domxref("HTMLHyperlinkElementUtils.hash")}} を参照）。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><strong>イベントハンドラの使用</strong></p> + +<pre class="syntaxbox">window.onhashchange = funcRef; +</pre> + +<p><strong>HTML イベントハンドラの使用</strong></p> + +<pre class="syntaxbox"><body onhashchange="funcRef();"> +</pre> + +<p><strong>イベントリスナーの使用</strong></p> + +<p>イベントリスナーを追加するには、{{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用します。</p> + +<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false); +</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>funcRef</code></dt> + <dd> 関数への参照。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_an_event_handler" name="Using_an_event_handler">イベントハンドラの使用</h3> + +<p>この例では、イベントハンドラ（<code>window.onhashchange</code>）を使用して、新しいハッシュ値が変更されるたびにチェックします。 それが <code>#cool-feature</code> と等しい場合、スクリプトはコンソールにメッセージを記録します。</p> + +<pre class="brush:js">function locationHashChanged() { + if (location.hash === '#cool-feature') { + console.log("あなたはクールな機能を訪れています！"); + } +} + +window.onhashchange = locationHashChanged; +</pre> + +<h3 id="Using_an_event_listener" name="Using_an_event_listener">イベントリスナーの使用</h3> + +<p>この例では、イベントリスナーを使用して、ハッシュが変更されるたびに通知を記録します。</p> + +<pre class="brush:js">function hashHandler() { + console.log('ハッシュが変更されました！'); +} + +window.addEventListener('hashchange', hashHandler, false); +</pre> + +<h3 id="Overriding_the_hash" name="Overriding_the_hash">ハッシュのオーバーライド</h3> + +<p>この関数は、新しいハッシュを動的に設定し、2つの値のいずれかにランダムに設定します。</p> + +<pre class="brush:js">function changeHash() { + location.hash = (Math.random() > 0.5) ? 'location1' : 'location2'; +} +</pre> + +<h2 id="The_hashchange_event" name="The_hashchange_event">hashchange イベント</h2> + +<p>送出された <code>hashchange</code> イベントには、次のプロパティがあります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">フィールド</td> + <td class="header">型</td> + <td class="header">説明</td> + </tr> + <tr> + <td><code>newURL</code></td> + <td><code>DOMString</code></td> + <td>ウィンドウがナビゲートされた新しい URL。</td> + </tr> + <tr> + <td><code>oldURL</code></td> + <td><code>DOMString</code></td> + <td>ウィンドウがナビゲートされる前の URL。</td> + </tr> + </tbody> +</table> + +<h3 id="Polyfill_for_event.newURL_and_event.oldURL" name="Polyfill_for_event.newURL_and_event.oldURL">event.newURL および event.oldURL のポリフィル</h3> + +<pre class="brush:js">// hashchange イベントを登録するコードの前にこのスニペットを実行してください +if (!window.HashChangeEvent)(function(){ + var lastURL = document.URL; + window.addEventListener("hashchange", function(event){ + Object.defineProperty(event, "oldURL", {enumerable:true,configurable:true,value:lastURL}); + Object.defineProperty(event, "newURL", {enumerable:true,configurable:true,value:document.URL}); + lastURL = document.URL; + }); +}()); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-window-onhashchange', 'onhashchange')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onhashchange")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Window/hashchange_event">hashchange</a></code> イベント</li> + <li><a href="/ja/docs/DOM/Manipulating_the_browser_history">ブラウザーの履歴の操作</a></li> + <li><a href="/ja/docs/DOM/window.history"><code>history.pushState()</code> メソッドと <code>history.replaceState()</code> メソッド</a></li> + <li>{{domxref("WindowEventHandlers.onpopstate")}}</li> + <li>{{domxref("HTMLHyperlinkElementUtils.hash")}}</li> +</ul> diff --git a/files/ja/web/api/windoweventhandlers/onlanguagechange/index.html b/files/ja/web/api/windoweventhandlers/onlanguagechange/index.html new file mode 100644 index 0000000000..4af90d8573 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onlanguagechange/index.html @@ -0,0 +1,67 @@ +--- +title: WindowEventHandlers.onlanguagechange +slug: Web/API/WindowEventHandlers/onlanguagechange +tags: + - API + - Event Handler + - Experimental + - HTML DOM + - Property + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onlanguagechange +--- +<div>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onlanguagechange</code></strong> プロパティは、{{event("languagechange")}} イベントを処理するための {{domxref("EventHandler")}} です。</span></p> + +<p>このイベントは、このインターフェイスを実装するオブジェクト（通常は {{domxref("Window")}}、{{domxref("HTMLBodyElement")}}、{{domxref("HTMLIFrameElement")}}）によって受信されます。 このイベントは、優先言語リストが更新されたことを知らせるためにブラウザーによって送信されます。 このリストは、{{domxref("NavigatorLanguage.languages")}} を介してアクセスできます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>object</em>.onlanguagechange = <em>function</em>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<ul> + <li><code>function</code> は、<code>()</code> 接尾辞やパラメーターを持たないユーザー定義関数の名前、または <code>function(event) {...}</code> などの匿名関数宣言です。 イベントハンドラには常に、{{domxref("Event")}} 型のイベントを含む1つのパラメーターがあります。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">window.onlanguagechange = function(event) { + console.log('languagechange イベントを検出！'); +}; +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>初期仕様</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onlanguagechange")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{event("languagechange")}} イベントとその型の {{domxref("Event")}}</li> +</ul> diff --git a/files/ja/web/api/windoweventhandlers/onmessage/index.html b/files/ja/web/api/windoweventhandlers/onmessage/index.html new file mode 100644 index 0000000000..7c0b151337 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onmessage/index.html @@ -0,0 +1,48 @@ +--- +title: WindowEventHandlers.onmessage +slug: Web/API/WindowEventHandlers/onmessage +tags: + - API + - Event Handler + - HTML DOM + - Property + - Reference + - Window + - WindowEventHandlers + - events + - onmessage +translation_of: Web/API/WindowEventHandlers/onmessage +--- +<div>{{APIRef("HTML DOM")}}{{ SeeCompatTable() }}</div> + +<p>{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onmessage</code></strong> プロパティは、オブジェクトが {{event("message")}} イベントを受け取るたびに呼び出される {{domxref("EventHandler")}} です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.addEventListener('message', function(event) { ... }) +window.onmessage = function(event) { ... }</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-window-onmessage','onmessage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.WindowEventHandlers.onmessage")}}</p> +</div> diff --git a/files/ja/web/api/windoweventhandlers/onmessageerror/index.html b/files/ja/web/api/windoweventhandlers/onmessageerror/index.html new file mode 100644 index 0000000000..efc950b479 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onmessageerror/index.html @@ -0,0 +1,54 @@ +--- +title: WindowEventHandlers.onmessageerror +slug: Web/API/WindowEventHandlers/onmessageerror +tags: + - API + - Event Handler + - HTML DOM + - Property + - Reference + - Window + - WindowEventHandlers + - onmessageerror +translation_of: Web/API/WindowEventHandlers/onmessageerror +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} インターフェイスの <strong><code>onmessageerror</code></strong> イベントハンドラは {{domxref("EventListener")}} であり、ウィンドウで <code>messageerror</code> タイプの MessageEvent が発生するたびに、つまり、{{glossary("Deserialization", "逆シリアル化")}}できないメッセージを受信したときに呼び出されます。</span></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>window</em>.onmessageerror = function() { ... };</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-window-onmessageerror', 'onmessageerror')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.WindowEventHandlers.onmessageerror")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Channel Messaging の使用</a></li> +</ul> diff --git a/files/ja/web/api/windoweventhandlers/onpopstate/index.html b/files/ja/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..3063f71af1 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,85 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +tags: + - API + - DOM + - Event Handler + - HTML DOM + - HTML5 + - Window + - WindowEventHandlers + - onpopstate + - イベント + - プロパティ +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onpopstate</code></strong> プロパティは、ウィンドウの <code><a href="/ja/docs/Web/API/Window/popstate_event">popstate</a></code> イベントを処理するための {{domxref("EventHandler")}} です。</span></p> + +<p><code>popstate</code> イベントは、同じ文書の2つの履歴項目の間で、アクティブな履歴項目が変わるたびにウィンドウに発行されます。アクティブな履歴項目が <code>history.pushState()</code> を呼び出したことで作成されたり、 <code>history.replaceState()</code> を呼び出したことで影響されたりした場合、 <code>popstate</code> イベントの <code>state</code> プロパティが履歴項目の状態オブジェクトのコピーを保持します。</p> + +<div class="note"> +<p><strong>メモ</strong>: <code>history.pushState()</code> 又は <code>history.replaceState()</code> を呼び出すことは、 <code>popstate</code> イベントのトリガーにはなりません。 <code>popstate</code> イベントは、戻るボタンをクリックしたり (又は JavaScript で <code>history.back()</code> を呼び出したり)、同じ文書で2つの履歴項目間を移動したりするように、ブラウザーのアクションを実行することのみがトリガーになります。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.onpopstate = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> は、ハンドラ関数です。</li> +</ul> + +<h2 id="The_popstate_event" name="The_popstate_event">例</h2> + +<p>例えば、<code>http://example.com/example.html</code> のページで次のコードを実行すると、示されているようにアラートを生成します。</p> + +<pre class="brush:js">window.onpopstate = function(event) { + alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); +}; + +history.pushState({page: 1}, "title 1", "?page=1"); +history.pushState({page: 2}, "title 2", "?page=2"); +history.replaceState({page: 3}, "title 3", "?page=3"); +history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" +history.back(); // alerts "location: http://example.com/example.html, state: null +history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} +</pre> + +<p>なお、元の履歴項目 (<code>http://example.com/example.html</code> の場合) には関連付けられる状態オブジェクトがありませんが、それでも2回目の <code>history.back()</code> の呼び出し後に項目がアクティブになったとき、 <code>popstate</code> イベントが発行されます。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onpopstate', 'onpopstate')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onpopstate")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.history")}}</li> + <li><a href="/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history">ブラウザーの履歴の操作</a></li> + <li><a href="/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">AJAX ナビゲーションの例</a></li> +</ul> diff --git a/files/ja/web/api/windoweventhandlers/onrejectionhandled/index.html b/files/ja/web/api/windoweventhandlers/onrejectionhandled/index.html new file mode 100644 index 0000000000..c2bdf26513 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onrejectionhandled/index.html @@ -0,0 +1,53 @@ +--- +title: WindowEventHandlers.onrejectionhandled +slug: Web/API/WindowEventHandlers/onrejectionhandled +tags: + - API + - Event Handler + - HTML DOM + - JavaScript + - Promises + - Property + - Reference + - WindowEventHandlers + - events + - onrejectionhandled +translation_of: Web/API/WindowEventHandlers/onrejectionhandled +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onrejectionhandled</code></strong> プロパティは、{{event("rejectionhandled")}} イベントを処理するための {{domxref("EventHandler")}} です。 このイベントは、{{jsxref("Promise")}} が拒否されたときに発生します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.addEventListener("rejectionhandled", function(event) { ... }); +window.onrejectionhandled = function(event) { ...};</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">window.onrejectionhandled = function(e) { + console.log(e.reason); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onrejectionhandled")}}</p> diff --git a/files/ja/web/api/windoweventhandlers/onstorage/index.html b/files/ja/web/api/windoweventhandlers/onstorage/index.html new file mode 100644 index 0000000000..b93699fd04 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onstorage/index.html @@ -0,0 +1,64 @@ +--- +title: WindowEventHandlers.onstorage +slug: Web/API/WindowEventHandlers/onstorage +tags: + - API + - Event Handler + - Property + - Reference + - Web Storage + - WindowEventHandler +translation_of: Web/API/WindowEventHandlers/onstorage +--- +<div class="syntaxbox">{{ ApiRef() }}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onstorage</code></strong> プロパティは、<code><a href="/ja/docs/Web/API/Window/storage_event">storage</a></code> イベントを処理するための {{domxref("EventHandler")}} です。</span></p> + +<p><code>storage</code> イベントは、別のドキュメントのコンテキストでストレージ領域が変更されたときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em> </em><em>window</em>.onstorage = <em>functionRef</em>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は、関数名や<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 この関数は、その唯一の引数として {{domxref("StorageEvent")}} を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、別のドキュメントでストレージキーに対する値が変更されるたびに、それを記録します。</p> + +<pre class="brush: js">window.onstorage = function(e) { + console.log('キー ' + e.key + + ' の値が ' + e.oldValue + + ' から ' + e.newValue + ' に変更されました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-window-onstorage','onstorage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onstorage")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Window/storage_event"><code>Window: storage</code> イベント</a></li> +</ul> diff --git a/files/ja/web/api/windoweventhandlers/onunhandledrejection/index.html b/files/ja/web/api/windoweventhandlers/onunhandledrejection/index.html new file mode 100644 index 0000000000..5c4f100cec --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onunhandledrejection/index.html @@ -0,0 +1,57 @@ +--- +title: WindowEventHandlers.onunhandledrejection +slug: Web/API/WindowEventHandlers/onunhandledrejection +tags: + - API + - Event Handler + - HTML DOM + - Promises + - Property + - Reference + - WindowEventHandlers + - events + - onunhandledrejection +translation_of: Web/API/WindowEventHandlers/onunhandledrejection +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onunhandledrejection</code></strong> プロパティは、{{event("unhandledrejection")}} イベントを処理するための {{domxref("EventHandler")}} です。 このイベントは、処理されなかった {{jsxref("Promise")}} 拒否に対して発生します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.onunhandledrejection = <em>function</em>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>function</code> は、ウィンドウが <code>unhandledrejection</code> イベントを受け取ったときに呼び出す {{domxref("EventHandler")}} または関数です。 イベントハンドラは、{{domxref("PromiseRejectionEvent")}} を入力パラメーターとして受け取ります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、処理されなかった拒否の <code>reason</code> 値を単にコンソールに記録します。</p> + +<pre class="brush: js">window.onunhandledrejection = function(e) { + console.log(e.reason); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onunhandledrejection")}}</p> diff --git a/files/ja/web/api/windoweventhandlers/onunload/index.html b/files/ja/web/api/windoweventhandlers/onunload/index.html new file mode 100644 index 0000000000..ee34416709 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onunload/index.html @@ -0,0 +1,65 @@ +--- +title: WindowEventHandlers.onunload +slug: Web/API/WindowEventHandlers/onunload +tags: + - API + - Event Handler + - HTML DOM + - MakeBrowserAgnostic + - Property + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onunload +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onunload</code></strong> プロパティは、{{Event("unload")}} イベントを処理するための {{domxref("EventHandler")}} です。 このイベントは、ウィンドウがコンテンツとリソースをアンロードするときに発生します。 リソースの除去は、<code>unload</code> イベントが発生した後に処理されます。</span></p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: ポップアップブロッカーを備えたブラウザーは、<code>onunload</code> イベントハンドラ関数にあるすべての {{domxref("Window.open()")}} メソッドの呼び出しを無視します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.addEventListener("unload", function(event) { ... }); +window.onunload = function(event) { ... }; +</pre> + +<p>通常は、<code>onunload</code> の代わりに {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} と {{event("unload")}} イベントを使用することをお勧めします。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onunload")}}</p> + +<p>Firefox 1.5 では、ページでこのイベントハンドラを使用すると、ブラウザーがメモリ内の bfcache にページをキャッシュできなくなります。 詳細については、<a href="/ja/Firefox/Releases/1.5/Using_Firefox_1.5_caching">Firefox 1.5 のキャッシュの使用</a>を参照してください。</p> |