如何实现JavaScript多屏支持？

Question

当我在思考JavaScript的多监视器/屏幕支持时，我发现以下StackExchange问题与该主题相关：

• 2013 - 40k views: 在多监视器/双监视器系统上使用window.open() - 窗口弹出在哪里？
• 2014 - 10k views: 在第二个显示器上打开新窗口
• 2016 - 42 views: 如何在单击按钮时将网页显示到连接的另一个监视器上？
• 2008 - 11k views: 使用JavaScript测试多个屏幕
• 2017 - ~1k views: https://webmasters.stackexchange.com/questions/103269/auto-open-fullscreen-on-another-monitor

很多问题和答案都围绕着使用JavaScript处理多个屏幕的缺失选项展开。安全和技术原因被称为这种功能不存在的原因。

另一方面，几千次浏览表明人们对这个主题很感兴趣，并且已经尝试了多年的解决方法。

因此，我支持来自webmasters.stackexchange问题的我想自动化这个过程，所以当他们加载第一个地址时，第二个窗口会自动弹出到第二个监视器上并全屏显示。这只是内部行为，将是预期的行为。并且我想知道需要做什么才能获得这个功能？

例如，HTML标准是否需要更改，请参见2014年code project的问题 - 浏览器供应商是否需要采取措施？是否需要在JavaScript中添加内容，例如我们可以从客户端访问哪些信息？并且要实现解决方案需要采取哪些行动？

顺便提一下 - 如果你认为这与主题无关，那么我需要如何修改我的问题才能避免关闭。我非常认真对待这个问题 - 我已经看到了很多次背后的需求。

- Wolfgang Fahl

---

仅仅因为一个问题很好，不意味着它适合在stackoverflow上提问。 - Jared Smith

https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays 这个怎么样？ - Wolfgang Fahl

@JaredSmith 不是tc39邮件列表，他们只关心编程语言的特性。对于新的Web API请求，WHATWG邮件列表或GitHub存储库是相关的地方。 - Bergi

谢谢。我在其他问题的一些评论下面添加了答案，并创建了https://stackoverflow.com/questions/tagged/presentation-api。 - Wolfgang Fahl

是的，事实上——答案涉及演示 API，这就是我选择该标签提问的原因。它还为我今天发现的其他低能见度问题设置了背景。 - Wolfgang Fahl

Answer 1

自从Chrome的版本66，就可以使用Presentation API。自2019年4月起，有一个W3C草案。

示例：

• https://googlechrome.github.io/samples/presentation-api/

将适用于Chrome 66+，并显示错误消息。

ReferenceError: PresentationRequest is not defined (Your browser may not support this feature.)

当点击presentationRequest.start()时，对于其他浏览器，会出现一个选择对话框。

在Chrome 66+中，会出现一个选择对话框。

在选择所需屏幕后，可以使用全屏模式。

- Wolfgang Fahl

---

如果您需要英文版本的消息，请访问以下链接：https://i.stack.imgur.com/UOG8O.png - Kaiido

在测试中，新的演示文稿默认全屏显示在我的当前设备上，而不是次要附加显示器上。因此，目前对我来说这不是可行/可靠的解决方案。 - Lou Groshek

Answer 2

screen.isExtended如果存在一个或多个额外的显示器，则为true。

window.getScreenDetails返回一个包含屏幕数组、尺寸和位置的对象。对于非主屏幕，left值是将新窗口移动到该屏幕的目标。

const doSetup = async () => {
  const screenDetails = await window.getScreenDetails()
  if (screen.isExtended && screenDetails.screens.length > 1) {
    const newChildWindow = window.open(
      url,
      'New Child Window',
      `popup,width=${800},height=${600},left=0,top=0`
    )
    newChildWindow.moveTo(screenDetails.screens[1].left, 0)
  }
}

这里有非常详细的解释：https://web.dev/multi-screen-window-placement/

- Lou Groshek