多屏环境下window.open()参数left不生效,窗口无法水平居中显示问题解决

转载已于 2024-10-29 16:17:05 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_44056419/article/details/111467747

文章标签：

#javascript

于 2023-01-10 10:49:07 首次发布

开发记录专栏收录该内容

11 篇文章

订阅专栏

在双屏或多屏设置中，使用window.open()的left参数尝试使新窗口居中可能不会生效。文章提到了一种替代方案，即利用window.screen.availLeft来获取可用屏幕左边界，从而实现跨屏幕的弹窗居中。通过计算(window.screen.availLeft||0)+(screen.width-1200)/2，可以确保窗口在任何屏幕上都能正确居中打开。

多屏环境下window.open()参数left不生效

let windowLeft = (window.screenX || window.screenLeft || 0) + (screen.width - widowWidth) / 2;

tips: screenX和screenY属性返回窗口相对于屏幕的X和Y坐标

经过测试：发现双屏时，以上方法在副屏打开弹窗仍然无法居中

最终方案：
let left = (window.screen.availLeft || 0) + (screen.width - 1200) /2

        /**
         * 打开子窗口
         * @param path
         */
        windowOpenHelper(path, dynamicQuery) {
            const url = this.$router.resolve({
                path,
                query: {
                    projectId: this.$route.query.projectId,
                    enterpriseId: this.$route.query.enterpriseId,
                    ...dynamicQuery
                },
            }).href
            const width = 1750
            const height = 900
            const offsetLeft = (window.outerWidth - width) / 2
            const offsetTop = (window.outerHeight - height) / 2
            //浏览器地址栏、书签栏高度
            const topHeight = (window.outerHeight - window.innerHeight) / 2
            const features = `left=${(window.screen.availLeft || 0) + offsetLeft},top=${
                offsetTop + topHeight},width=${width},height=${height - 60}`
            return window.open(url, '_blank', features)
        },