XRSession: visibilitychange event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The visibilitychange
event is sent to an XRSession
to inform it when it becomes visible or hidden, or when it becomes visible but not currently focused. Upon receiving the event, you can check the value of the session's visibilityState
property to determine the new visibility state.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("visibilitychange", (event) => {});
onvisibilitychange = (event) => {};
Event type
An XRSessionEvent
. Inherits from Event
.
Event properties
Description
Trigger
Triggered when an XRSession
becomes visible or hidden, or when it becomes visible but not currently focused.
When the XRSession
receives this event, the visibility state has already been changed.
Use cases
Upon receiving the event, you can check the value of the session's visibilityState
property to determine the new visibility state.
Examples
This example demonstrates how to listen for a visibilitychange
event on a WebXR session, using addEventListener()
to begin listening for the event:
navigator.xr.requestSession("inline").then((xrSession) => {
xrSession.addEventListener("visibilitychange", (e) => {
switch (e.session.visibilityState) {
case "visible":
case "visible-blurred":
mySessionVisible(true);
break;
case "hidden":
mySessionVisible(false);
break;
}
});
});
When a visibility state change occurs, the event is received and dispatched to a function mySessionVisible()
, with a Boolean parameter indicating whether or not the session is presently being displayed to the user.
You can also create the event handler by assigning it to the XRSession
's onvisibilitychange
event handler property, like this:
xrSession.onvisibilitychange = (e) => {
/* event handled here */
};
Specifications
Specification |
---|
WebXR Device API # eventdef-xrsession-visibilitychange |
WebXR Device API # dom-xrsession-onvisibilitychange |
Browser compatibility
BCD tables only load in the browser