多屏幕窗口管理演示 - Window Placement API

Window Placement API 是一个现代Web API，允许Web应用查询连接的多个显示器的详细信息（如屏幕标签、分辨率、坐标位置、是否主屏幕等），并在指定的屏幕上放置或移动浏览器窗口。

在传统Web开发中，开发者只能通过 window.screen 获取主屏幕的基本信息，无法感知多屏幕环境。Window Placement API 填补了这一空白，使得：

• 金融交易平台可以在多个屏幕上有序排列数据面板
• 视频会议应用可以在副屏全屏展示共享内容
• 创意工具（如设计软件Web版）可以跨屏幕组织工作区
• 仪表盘应用可以驱动多个信息显示屏

调用 window.getScreenDetails() 会返回一个 Promise，解析后得到包含 screens 数组和 currentScreen 属性的对象：

const screenDetails = await window.getScreenDetails();
// screenDetails.screens - 所有屏幕的 ScreenDetailed 数组
// screenDetails.currentScreen - 当前窗口所在的屏幕

screenDetails.screens.forEach(screen => {
    console.log(screen.label, screen.width, screen.height);
    console.log('位置:', screen.left, screen.top);
    console.log('是否主屏:', screen.isPrimary);
    console.log('是否内置:', screen.isInternal);
});

首次调用时会触发浏览器权限弹窗，用户授权后才能获取详细屏幕信息。建议在用户点击按钮时调用，而不是页面加载时自动调用。

截至2024年，Window Placement API 的支持情况：

• Chrome / Edge 100+：完整支持 getScreenDetails()、screen.isExtended、screenschange 事件
• Opera 86+：支持
• Firefox：目前不支持（可通过 window.screen 获取有限信息）
• Safari：目前不支持

需要使用 HTTPS 或 localhost 环境。对于不支持的浏览器，可以降级使用传统的 window.screen API 获取主屏幕基本信息。

检测代码：'getScreenDetails' in window 或检查 screen.isExtended 属性。

screen.isExtended 是一个布尔属性（Chrome 100+），无需用户授权即可访问。它快速告诉你当前是否连接了多个屏幕：

• true：桌面扩展到多个显示器（如笔记本+外接显示器）
• false：仅有单个屏幕，或屏幕处于镜像模式

这是一个轻量级的预检查方法，可以用来决定是否需要调用 getScreenDetails() 获取详细的多屏幕信息。在单屏幕环境下可以跳过权限请求，优化用户体验。

有几种方法可以在多屏幕间管理窗口：

1. window.open() 定位：使用 feature 参数中的 left 和 top 在目标屏幕坐标打开新窗口。
   window.open(url, '_blank', 'left=2000,top=100,width=800,height=600');
2. window.moveTo()：对已打开的 popup 窗口调用 moveTo(x, y) 将其移动到目标屏幕。
3. 全屏到指定屏幕：结合 Fullscreen API，先将窗口移动到目标屏幕再请求全屏。

需要注意浏览器弹窗拦截策略——window.open 需要在用户交互（点击）中调用，且某些浏览器对 moveTo 有限制。

传统 Screen API（window.screen）仅提供主屏幕的有限信息：

• screen.width / screen.height — 主屏幕分辨率
• screen.availWidth / screen.availHeight — 主屏幕可用空间
• screen.colorDepth — 色深

Window Placement API 在此基础上大幅扩展：

• 获取所有屏幕的完整信息（标签、坐标、尺寸）
• 知道每个屏幕的虚拟坐标位置（left/top），了解屏幕物理排列
• 区分主屏幕（isPrimary）和内置屏幕（isInternal）
• 监听屏幕配置实时变化（screenschange / currentscreenchange 事件）
• 获取每个屏幕的可用空间（排除任务栏等）

简单来说，传统API只能看到主屏幕，Window Placement API能看到完整的桌面空间布局。

Window Placement API 提供了两个事件来监听屏幕配置变化：

• screenschange：当屏幕配置发生变化时触发（连接/断开显示器、更改分辨率等）。在 ScreenDetails 对象上监听。
• currentscreenchange：当当前窗口被移动到不同屏幕时触发。

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', () => {
    console.log('屏幕配置已变化！');
    // 重新获取屏幕信息
});
screenDetails.addEventListener('currentscreenchange', () => {
    console.log('当前窗口切换到了屏幕:', screenDetails.currentScreen.label);
});

这对于需要实时响应显示器热插拔的应用非常重要，如重新布局窗口或调整UI。

安全性：

• 需要 window-management 权限，浏览器会明确提示用户授权
• 仅 HTTPS 或 localhost 环境可用
• 用户可随时在浏览器设置中撤销权限
• 屏幕标签可能包含敏感信息（如显示器型号），应谨慎处理

最佳实践：

• 在用户明确操作（点击按钮）时请求权限，而非页面加载时
• 提供降级方案，兼容不支持该API的浏览器
• 使用 screen.isExtended 预检查，避免不必要的权限请求
• 监听 screenschange 事件，优雅处理显示器热插拔
• 在调用 window.open 时使用合理的窗口尺寸，避免过大或过小
• 记录用户窗口布局偏好，提供恢复功能