多屏环境下screenDetails()弹窗无法在第二显示器打开问题

代码现存直接问题 #

• 副屏数组索引错误：JS数组下标从0开始，原代码取secondaries[1]，仅连接1块副屏时该值为undefined，后续坐标计算直接抛出异常进入catch分支，弹窗使用默认参数打开在主屏
• moveTo方法调用无效：该方法仅接受x、y两个数值型坐标参数，原代码传入数组和无意义数字，完全不生效
• 坐标计算逻辑冲突：原代码先计算了副屏居中坐标，拼接窗口特性参数时又硬编码加了1000、400的固定偏移，极易超出副屏可用范围，浏览器会自动将超出屏幕边界的弹窗拉回当前可见的主屏区域
• 变量类型错误：窗口尺寸、坐标初始值定义为字符串类型，部分浏览器解析字符串类型的窗口特性参数时会出现解析失败，回退到默认值
• 异步触发触发安全限制：await操作会让代码脱离用户点击的同步执行栈，Chromium内核浏览器会将非用户同步触发的window.open判定为风险弹窗，忽略所有自定义坐标、尺寸参数
• 重复调用API：原代码权限判断阶段两次调用getScreenDetails()，可能触发重复的权限校验，部分场景下会导致返回的屏幕坐标信息异常

通用排查步骤 #

• 校验权限状态：打开控制台查看window-placement权限的state值，必须为granted状态；若为prompt需要手动点击允许，denied状态下API无法返回真实多屏坐标
• 核对系统显示器配置：在系统显示设置中确认副屏的排列位置，查看控制台输出的副屏left/top值，若副屏和主屏坐标完全重叠，计算出的坐标自然会落在主屏
• 关闭弹窗拦截：浏览器自带的强力弹窗拦截、第三方广告拦截插件都会强制忽略弹窗坐标参数，将弹窗限制在当前屏幕
• 确认浏览器兼容性：多屏窗口管理API仅支持Chrome/Edge 100及以上版本，Firefox、Safari全版本不支持该能力，无法实现精准副屏弹窗
• 校验窗口参数格式：window.open的features字符串不能包含多余空格，必须显式添加popup=yes参数，否则会被识别为新开标签页，标签页模式下所有坐标、尺寸参数均不生效

修正后可运行代码 #

<html>
<title>test</title>
<head>
    <script type="text/javascript">
        // 页面加载时预请求权限、缓存屏幕信息，避免点击时异步触发弹窗被拦截
        let screenCache = null;
        const url = "http://google.com";
        const width = 800;
        const height = 600;
        let popup = null;

        // 页面初始化时预加载屏幕信息
        window.addEventListener('DOMContentLoaded', async () => {
            if ('getScreenDetails' in window) {
                try {
                    const permission = await navigator.permissions.query({name: 'window-placement'});
                    if (permission.state !== 'denied') {
                        screenCache = await window.getScreenDetails();
                    }
                } catch (e) {
                    screenCache = null;
                }
            }
        });

        function openOnSecondaryScreen() {
            if (!screenCache || !window.screen.isExtended) {
                alert("未检测到多屏环境或权限未授予");
                return;
            }

            try {
                // 取第一块副屏
                const secondaryScreen = screenCache.screens.find(screen => !screen.isPrimary);
                if (!secondaryScreen) {
                    alert("未检测到副屏");
                    return;
                }

                // 计算副屏居中坐标，无额外偏移
                const x = secondaryScreen.left + (secondaryScreen.availWidth - width) / 2;
                const y = secondaryScreen.top + (secondaryScreen.availHeight - height) / 2;

                // 拼接参数，无多余空格，显式声明popup类型
                const features = `popup=yes,left=${x},top=${y},width=${width},height=${height}`;
                popup = window.open(url, 'secondaryPopup', features);
                
                // 兜底：如果open时坐标偏移，二次moveTo修正
                if (popup) {
                    popup.moveTo(x, y);
                }
            } catch (err) {
                console.error("打开副屏弹窗失败：", err);
            }
        }
    </script>
</head>
<body>
    <button type="button" id="open" onclick="openOnSecondaryScreen()">Open</button>
</body>
</html>

内容的提问来源于stack exchange，提问作者Chris