使用多屏幕窗口放置API管理多个显示

多屏幕窗口放置API是Capability项目的一部分，目前正在开发中。这篇帖子将随着实施的进展而更新。

多屏幕窗口放置API允许您枚举连接到您机器的显示器，并将窗口放置在特定屏幕上。

虚拟交易台可以在多个窗口中显示市场趋势，其中任何一个窗口都可以全屏模式查看。

幻灯片放映应用程序可以在内部主屏幕上显示演讲者笔记，在外部投影仪上显示演示文稿。

要在本地试验多屏幕窗口放置API，而不使用原始试用令牌，请在Chrome：//标志中启用#enable-explementation-web-platform-Feature标志。

从Chrome 86中开始，多屏幕窗口放置API将作为Chrome的原版提供。原产地试验预计将在Chrome 88年(2021年2月24日)结束。

Origin试用版允许您尝试新功能，并就其可用性、实用性和有效性向Web标准社区提供反馈。有关详细信息，请参阅Web开发人员原版试用指南。若要注册此原版试用版或其他原版试用版，请访问注册页。

将令牌添加到您的页面。有两种方法可以做到这一点：在每个页面的头部添加一个Origin-Trial<；meta>；标记。例如，这可能类似于：<；meta http-equv="；Origin-Trial"；Content="；TOKEN_GOES_HERE"；>；

如果您可以配置您的服务器，您还可以使用原始试用HTTP标头添加令牌。生成的响应头应该类似于：Origin-Trial：Token_Goes_Here。

不幸的是，久经考验的窗口控制方法Window.open()没有意识到额外的屏幕。虽然此API的某些方面看起来有点过时，例如它的windowFeature DOMString参数，但多年来它仍然为我们提供了很好的服务。要指定一个窗口的位置，您可以将坐标作为左坐标和上坐标(或分别为ScreenX和Screeny)传递，并将所需的大小作为宽度和高度(或分别为innerWidth和innerHeight)传递。例如，要在距左侧50像素和距顶部50像素的位置打开一个400×300的窗口，您可以使用以下代码：

您可以通过查看window.screen属性来获取有关当前屏幕的信息，该属性返回一个Screen对象。这是我的MacBook Air 13上的输出“：

Window.Screen；/*来自My MacBook Air 13的输出“：availHeight：975 availLeft：0 availTop：23 availWidth：1680 color Depth：30 Height：1050 id："；"；Internal：false Left：0 Orientation：ScreenOrientation{angle：0，type："；横向-primary"；，onchange：null}象素深度：30 primary：false scalefactor：2 top：0 touch支持：false width：

像大多数在科技行业工作的人一样，我不得不让自己适应新的工作现实，建立我的个人家庭办公室。我的笔记本电脑如下图所示(如果您感兴趣，可以阅读我的设置的详细信息)。我的MacBook Air旁边的iPad通过Sidecar连接到笔记本电脑，因此，无论何时需要，我都可以快速将iPad转换为第二个屏幕。

如果我想利用更大的屏幕，我可以将上面代码示例中的弹出窗口放到第二个屏幕上。我是这样做的：

这是一个粗略的猜测，因为没有办法知道第二个屏幕的尺寸。Window.Screen中的信息只包括内置屏幕，而不包括iPad屏幕。据报道，内置屏幕的宽度为1680像素，因此移动到2500像素可能会将窗口转移到iPad上，因为我恰好知道它位于我的MacBook Air的右侧。一般情况下我该怎么做呢？事实证明，有比猜测更好的方法。这种方式就是多屏幕窗口放置API。

在使用多屏幕窗口放置API之前，我必须向用户请求权限。可以使用权限API查询新的窗口放置权限，如下所示：

设GRANTED=FALSE；Try{const{state}=等待导航器.permission。查询({name："；窗口放置"；})；GRANT=STATE="；；}捕获{//无任何内容。}。

浏览器可以选择在首次尝试使用新API的任何方法时动态显示权限提示。请阅读以了解更多信息。

要使用多屏幕窗口放置API，我将首先调用Window.isMultiScreen()方法。它返回一个承诺，根据机器当前连接的是一个屏幕还是多个屏幕，该承诺的解析结果为TRUE或FALSE。对于我的设置，它返回true。

现在我知道当前设置是多屏幕的，我可以使用Window.getScreens()获取有关第二个屏幕的更多信息。它返回使用Screen对象数组解析的承诺。在我的连接了iPad的MacBook Air 13上，这将返回一个由两个屏幕对象组成的数组：

等待窗口。GetScreens()；/*连接iPad的MacBook Air 13“输出：屏幕1(内置显示屏)：availHeight：975 availLeft：0 availLeft：23 availWidth：1680 color Depth：30 Height：1050 id："；0"；Internal：True Left：0 Orientation：Null PixelDepth：30 primary：true scalefactor：2 top：0 touch支持：false width：1680 screen 2(IPad)：availHeight。内部：假左：1680方向：零像素深度：24主：假比例因子：2顶部：0触摸支持：假宽度：1366*/。

请注意iPad的Left值是如何从1680开始的，这正好是内置显示屏的宽度。这使我能够准确地确定屏幕是如何逻辑排列的(相邻、重叠等)。现在每个屏幕都有数据来显示它是否是内部屏幕以及它是否是主屏幕。请注意，内置屏幕不一定是主屏幕。这两个屏幕也都有一个ID，如果它在浏览器会话中保持不变，则允许恢复窗口排列。

现在唯一缺少的是检测我的屏幕设置何时更改的方法。一个名为creenschange的新事件就是这样做的：只要屏幕星座被修改，它就会触发。(请注意，事件名称中的"；creens"；是复数。)当连接的一个屏幕的分辨率改变时，或者当新的或现有的屏幕(在Sidecar的情况下是物理地或虚拟地)插入或拔下插头时，它也会触发。

请注意，您需要异步查找新的屏幕详细信息，ScreensChange事件本身不提供此数据。这在未来可能会改变。现在，您可以通过调用window.getScreens()来查看屏幕详细信息，如下所示。

窗户。AddEventListener('；Screenschange'；，Async(Event)=>；{控制台。日志(我在那里，但基本上没用，事件)；常量详细信息=等待窗口。GetScreens()；})；

到目前为止，您可以通过命名恰当的requestFullScreen()方法请求以全屏模式显示元素。该方法接受一个Options参数，您可以在该参数中传递FullcreenOptions。到目前为止，它唯一的属性是NavigationUI。多屏幕窗口放置API添加了一个新的Screen属性，允许您确定在哪个屏幕上启动全屏视图。例如，如果要使主屏幕全屏显示：

尝试{const primary yScreen=(等待getScreens())。筛选器((Screen)=>；Screen.primary)[0]；等待文档.body。RequestFullScreen({Screen：PrimiyScreen})；}catch(Err){控制台。错误(err.name，err.message)；}。

不能对多屏幕窗口放置API进行多边形填充，但您可以填补其形状，以便可以专门针对新API进行编码：

If(！("；getScreens"；in Window)){//返回当前屏幕的一个元素数组，//注意可能还有更多元素。窗户。GetScreens=async()=>；[Window.screen]；//返回`false`，注意这可能是谎言。窗户。IsMultiScreen=Async()=>；false；}。

API的其他方面-oncreenschange事件和FullcreenOptions的Screen属性-不会被不支持的浏览器分别触发或静默忽略。

如果您和我一样，您会密切关注各种加密货币的发展。(实际上，我非常不关注，但是，出于本文的目的，假设我关注)。为了跟踪我拥有的加密货币，我开发了一款网络应用程序，可以让我在所有生活情况下都能观察市场，比如坐在舒适的床上，我有一个很棒的单屏设置。

这是关于密码的，市场随时都可能变得忙碌起来。如果发生这种情况，我可以快速移到我的办公桌前，在那里我可以设置多屏幕。我可以点击任何货币的窗口，并在对面屏幕上以全屏视图快速查看全部详细信息。下面是我在上一次YCY大屠杀时拍的一张最近的照片，它让我完全措手不及，把手放在脸上。

您可以使用下面嵌入的演示，或者在GLITCH上查看其源代码。

Chrome团队使用控制访问功能强大的Web平台功能(包括用户控制、透明度和人体工程学)中定义的核心原则设计并实现了多屏幕窗口放置API。多屏幕窗口放置API暴露了有关连接到设备的屏幕的新信息，增加了用户的指纹面，特别是那些具有持续连接到其设备的多个屏幕的用户。作为这一隐私问题的一次缓解，暴露的屏幕属性被限制在常见放置用例所需的最低限度。站点需要用户权限才能获取多屏幕信息并在其他屏幕上放置窗口。

用户完全控制其设置的曝光。他们可以接受或拒绝权限提示，并通过浏览器中的站点信息功能撤销以前授予的权限。

使用多屏幕窗口放置API的权限是否已被授予，这一事实在浏览器的站点信息中显示出来，也可以通过权限API进行查询。

Chrome团队想了解您使用多屏幕窗口放置API的体验。

API有没有什么地方不像您预期的那样工作？或者，是否缺少实现您的想法所需的方法或属性？对安全模型有什么疑问或评论吗？

在相应的GitHub回购上提交规范问题，或将您的想法添加到现有问题上。

你在Chrome的实现中发现错误了吗？或者实现与规范不同？

在new.crbug.com上提交漏洞。请确保包含尽可能多的详细信息、简单的复制说明，并在组件框中输入Blink>；WindowDialog。Gitch非常适合于快速、轻松地分享批评意见。

您是否计划使用多屏幕窗口放置API？您的公开支持有助于Chrometeam确定功能的优先顺序，并向其他浏览器供应商展示支持这些功能的重要性。

向@ChromiumDev发送带有#WindowPlacement标签的推文，让我们知道您在哪里以及如何使用它。

多屏幕窗口放置API规范由Victor Costan和Joshua Bell编辑。该API由Mike Wasserman实现。本文由乔·梅德利、弗朗索瓦·博福特和凯西·巴斯克审阅。感谢劳拉·托伦特·普伊格提供的照片。