title | short-title | slug | l10n | ||
---|---|---|---|---|---|
Document: visibilitychange イベント |
visibilitychange |
Web/API/Document/visibilitychange_event |
|
{{APIRef}}
visibilitychange
イベントは、タブのコンテンツが表示状態または非表示状態になったときに document に発生します。
このイベントはキャンセル不可です。
このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("visibilitychange", (event) => {});
onvisibilitychange = (event) => {};
一般的な {{domxref("Event")}} です。
このイベントには、更新された文書の表示・非表示状態が含まれていませんが、この情報は document の {{domxref("Document.visibilityState", "visibilityState")}} プロパティから取得することができます。
このイベントは、ユーザーが新しいページに移動したり、タブを切り替えたり、タブを閉じたり、ブラウザーを最小化したり閉じたりしたとき、あるいはモバイルではブラウザーから異なる形のアプリに切り替えたときに visibilityState
が hidden
になった状態で発行されます。 hidden
への遷移はページが確実に監視できる最後のイベントなので、開発者はそれをユーザーのセッションの終わりとして扱うべきです(例えば解析データの送信の場合)。
また、 hidden
への遷移は、ページが UI の更新を停止し、ユーザーがバックグラウンドで実行させたくないタスクを停止するための良いタイミングでもあります。
この例は、ページが非表示になると音声再生を一時停止し、ページが再び表示されると再生を再開します。 完全な例については、Page Visibility API: Pausing audio on page hide ドキュメントを参照してください。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
playingOnHide = !audio.paused;
audio.pause();
} else {
// 音声が "playing on hide" であった場合は復旧する
if (playingOnHide) {
audio.play();
}
}
});
この例では、 hidden
への遷移をユーザーセッションの終わりとして扱い、 {{domxref("Navigator.sendBeacon()")}} API を使って適切な解析を送信しています。
document.onvisibilitychange = () => {
if (document.visibilityState === "hidden") {
navigator.sendBeacon("/log", analyticsData);
}
};
{{Specifications}}
{{Compat}}
- ページ可視性 API
- {{domxref("Document.visibilityState")}}
- {{domxref("Document.hidden")}}
- Don't lose user and app state, use Page Visibility は、なぜ
beforeunload
/unload
ではなく、visibilitychange
を使用しなければならないのか、その理由を詳しく説明しています。 - Page Lifecycle API は、ウェブアプリケーションでページのライフサイクルの動作を処理する際の最善の手法を解説しています。