不常用的浏览器 API — Multi-Screen Window Placement

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

Multi-Screen Window Placement 是浏览器新提供的一组控制多窗口的 API，这个 API 不常用单纯是因为比较新，在 Chrome 100 开始可以完整支持，我们可以通过相关 API 来实现兼容多屏的 Web 应用。

在传统的网页中可能用不到多屏 API，但是在现在的复杂 Web 应用场景中，多屏操作还是有非常多的应用场景的。这段时间一直在更新不常用的 API 系列，可以看到很多新的 API 都在不断补充浏览器的应用能力，新的 API 更多侧重于构建复杂应用的能力。

回到本文主题，Multi-Screen Window Placement API 有一个官方示例，打开 michaelwasserman.github.io/window-plac… 可以快速体验多屏交互应用。

我们来看一下详细的 API，多屏互动的核心 API 是 getScreenDetails，调用这个 API 可以获取到用户的多个屏幕信息，在屏幕信息中我们可以获取到多个显示器的排列方式，这样调用 moveTo 进行移动时就可以选择移动到其他屏幕上。

对于切换屏幕的行为，我们可以使用 screenschange 事件进行监听，我们可以捕获到屏幕坐标的变化信息。

此外对于全屏 API [requestFullScreen()](<https://developer.mozilla.org/docs/Web/API/Element/requestFullscreen>) ，传入屏幕信息作为参数了，这样可以实现在指定的显示屏下全屏显示，举个例子：

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

这里实现的是一个在主显示屏全屏的效果。

最后注意 chrome 100 目前用户量很小，这个东西目前还不能大范围使用，感兴趣可以提前学习。