WindowControlsOverlay: geometrychange event
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The geometrychange
event is fired when the position, size, or visibility of a Progressive Web App's title bar area changes.
This only applies to Progressive Web Apps installed on desktop operating systems and use the Window Controls Overlay API.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("geometrychange", (event) => {});
ongeometrychange = (event) => {};
Event type
A WindowControlsOverlayGeometryChangeEvent
. Inherits from Event
.
Event properties
In addition to the properties listed below, properties from the parent interface, Event
, are available.
Examples
Using 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}`
);
});
Using the ongeometrychange
event handler property:
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}`
);
};
Specifications
Specification |
---|
Window Controls Overlay # the-ongeometrychange-attribute |
Browser compatibility
BCD tables only load in the browser