屏幕详细信息：screenschange 事件

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

安全上下文：此功能仅在 安全上下文（HTTPS）中可用，并且仅在某些或所有 支持的浏览器 中可用。

ScreenDetails 接口的 screenschange 事件在系统可用的屏幕集发生变化时触发：也就是说，一个新的屏幕变得可用或现有的屏幕变得不可用。这将反映在 screens 数组的变化中。

语法

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

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

onscreenschange = (event) => {};

事件类型

一个通用的 Event。

示例

您可以使用 screenschange 事件检测可用屏幕何时发生变化，报告变化，关闭所有窗口，然后重新打开所有窗口以适应新的配置。

js
const screenDetails = await window.getScreenDetails();

// Return the number of screens
let noOfScreens = screenDetails.screens.length;

screenDetails.addEventListener("screenschange", () => {
  // If the new number of screens is different to the old number of screens, report the difference
  if (screenDetails.screens.length !== noOfScreens) {
    console.log(
      `The screen count changed from ${noOfScreens} to ${screenDetails.screens.length}`,
    );

    // Update noOfScreens value
    noOfScreens = screenDetails.screens.length;
  }

  // Open, close, or rearrange windows as needed, to fit the new screen configuration
  updateWindows();
});

规范

规范
窗口管理
# eventdef-screendetails-screenschange
窗口管理
# ref-for-dom-screendetails-onscreenschange

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅