双显示器环境下网页弹出窗口固定指定显示器位置问题求助

问题背景 #

点击按钮打开包含PDF的弹出窗口，在双显示器环境下，弹出窗口始终与主浏览器处于同一屏幕。需求是：主浏览器在左屏时，弹出窗口固定显示在右屏之前拖拽过的位置；主浏览器在右屏时，弹出窗口也能对应到之前设置的位置，但现有代码无法实现。尝试过设置窗口的screen宽度和top值，未解决问题。

现有代码问题分析 #

现有代码仅保存窗口的绝对坐标（screenX/screenY），但双显示器切换时，主浏览器所在屏幕的坐标基准发生变化，绝对坐标无法适配跨屏幕的位置记忆需求。需要改为保存窗口相对于所属屏幕的相对位置，再结合主浏览器当前所在屏幕计算目标位置。

修改后的代码实现 #

1. PDF弹出窗口内的位置保存与还原代码

<iframe src="pdf-file-location.pdf" width="100%" height="100%"></iframe>
<script>
    const windowName = "pdfWindow1234";

    // 保存窗口相对于当前屏幕的位置，以及当前屏幕宽度
    function saveRelativePosition() {
        const relativeLeft = window.screenX - window.screen.left;
        const relativeTop = window.screenY - window.screen.top;
        const screenWidth = window.screen.width;
        
        const positionData = { relativeLeft, relativeTop, screenWidth };
        localStorage.setItem(windowName, JSON.stringify(positionData));
    }

    window.onbeforeunload = saveRelativePosition;

    // 加载时基于当前屏幕基准还原位置
    window.onload = function() {
        const defaultData = { relativeLeft: 100, relativeTop: 100, screenWidth: screen.width };
        const savedData = JSON.parse(localStorage.getItem(windowName)) || defaultData;
        
        const absoluteLeft = window.screen.left + savedData.relativeLeft;
        const absoluteTop = window.screen.top + savedData.relativeTop;
        window.moveTo(absoluteLeft, absoluteTop);
    };
</script>

2. 主页面打开弹窗的代码

<button onclick="openPdfWindow()">打开PDF</button>
<script>
    function openPdfWindow() {
        const windowName = "pdfWindow1234";
        const windowWidth = 800;
        const windowHeight = 600;
        const pdfUrl = "pdf.txt"; 

        const defaultData = { relativeLeft: 100, relativeTop: 100, screenWidth: screen.width };
        const savedData = JSON.parse(localStorage.getItem(windowName)) || defaultData;

        // 计算目标屏幕的左侧坐标：和主浏览器所在屏幕切换
        let targetScreenLeft;
        if (screen.width === savedData.screenWidth) {
            // 同尺寸屏幕，切换到另一屏（左屏→右屏，右屏→左屏）
            targetScreenLeft = screen.left === 0 ? screen.width : 0;
        } else {
            // 不同尺寸屏幕，默认放在主屏幕右侧
            targetScreenLeft = screen.left + screen.width;
        }

        // 结合相对位置计算绝对坐标
        const absoluteLeft = targetScreenLeft + savedData.relativeLeft;
        const absoluteTop = screen.top + savedData.relativeTop;

        const windowFeatures = `width=${windowWidth},height=${windowHeight},left=${absoluteLeft},top=${absoluteTop}`;
        
        const newWindow = window.open(pdfUrl, windowName, windowFeatures);

        if (!newWindow) {
            alert("弹窗拦截已开启！请允许本网站的弹窗权限。");
        }
    }
</script>

核心改进点 #

• 相对位置存储：保存窗口相对于自身所在屏幕的偏移量，而非绝对坐标，确保跨屏幕时位置逻辑有效。
• 屏幕切换判断：打开弹窗时自动识别主浏览器所在屏幕，将弹窗定位到另一屏幕的记忆位置。
• 自适应还原：弹窗加载时基于当前所在屏幕的坐标基准还原位置，拖拽后的位置在任何屏幕都能正确恢复。

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