WindowControlsOverlay: geometrychange 事件

实验性: 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

当渐进式 Web 应用的标题栏区域的位置、大小或可见性发生变化时，将触发 geometrychange 事件。

这仅适用于安装在桌面操作系统上并使用 窗口控件覆盖 API 的渐进式 Web 应用。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或者设置事件处理程序属性。

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

ongeometrychange = (event) => {};

事件类型

A WindowControlsOverlayGeometryChangeEvent. 继承自 Event.

Event WindowControlsOverlayGeometryChangeEvent

事件属性

除了下面列出的属性之外，父接口 Event 的属性也可以使用。

titlebarAreaRect

A DOMRect 代表标题栏区域在应用程序内容中的位置和大小。

visible

A 布尔值，指示窗口控件覆盖是否可见。

示例

使用 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}`,
  );
});

使用 ongeometrychange 事件处理程序属性

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}`,
  );
};

规范

规范
窗口控件覆盖
# the-ongeometrychange-attribute

浏览器兼容性

BCD 表格仅在浏览器中加载