W3cubDocs

/Web APIs

XRSession: visibilitychange event

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

js

addEventListener("visibilitychange", (event) => {});

onvisibilitychange = (event) => {};

Event type

Event properties

In addition to the properties listed below, properties from the parent interface, Event, are available.

session Read only

The XRSession to which the event refers.

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:

js

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:

js

xrSession.onvisibilitychange = (e) => {
  /* event handled here */
};

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
visibilitychange_event 79 79 No No 66 No No 79 No 57 No 11.2

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XRSession/visibilitychange_event