WindowControlsOverlay: geometrychange-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Das geometrychange-Ereignis wird ausgelöst, wenn sich die Position, Größe oder Sichtbarkeit des Titelleistenbereichs einer Progressive Web App ändert.

Dies gilt nur für Progressive Web Apps, die auf Desktop-Betriebssystemen installiert sind und die Window Controls Overlay API verwenden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("geometrychange", (event) => {});

ongeometrychange = (event) => {};

Ereignistyp

Ereigniseigenschaften

Neben den unten aufgelisteten Eigenschaften sind Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.

titlebarAreaRect

Ein DOMRect, das die Position und Größe des Titelleistenbereichs innerhalb des App-Inhalts darstellt.

visible

Ein Boolean, der angibt, ob das Fenstersteuerungs-Overlay sichtbar ist oder nicht.

Beispiele

Verwendung von addEventListener():

js
navigator.windowControlsOverlay.addEventListener("geometrychange", (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
});

Verwendung der ongeometrychange-Ereignishandler-Eigenschaft:

js
navigator.windowControlsOverlay.ongeometrychange = (event) => {
  const { x, y, width, height } = event.titlebarAreaRect;
  console.log(
    `The titlebar area coordinates are x:${x}, y:${y}, width:${width}, height:${height}`,
  );
};

Spezifikationen

Specification
Window Controls Overlay
# the-ongeometrychange-attribute

Browser-Kompatibilität

BCD tables only load in the browser