如何解决JavaScript多显示器下窗口位置恢复异常的问题？

问题根源 #

Chrome对网页通过window.open指定的窗口位置有安全限制：如果目标位置超出当前浏览器所在显示器的可见区域，浏览器会自动将窗口调整到主显示器的边缘。这就导致在副显示器关闭的窗口，再次打开时无法回到原位置。

普通网页解决方案（无需扩展） #

通过窗口加载后二次调整位置的方式，绕过Chrome的初始位置限制，同时优化状态保存格式：

1. 修改状态保存与读取函数

// 保存窗口完整状态
const saveWindowState = () => {
  const state = {
    screenX: window.screenX,
    screenY: window.screenY,
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight
  };
  localStorage.setItem('windowState', JSON.stringify(state));
};

// 读取保存的状态，默认返回初始值
const getWindowState = () => {
  const saved = localStorage.getItem('windowState');
  return saved ? JSON.parse(saved) : {
    screenX: 0,
    screenY: 0,
    innerWidth: 800,
    innerHeight: 1000
  };
};

2. 调整窗口打开逻辑

在窗口加载完成后，调用moveTo和resizeTo强制恢复位置：

const handleExpandClick = (id) => {
  const state = getWindowState();
  // 初始尝试用保存的参数打开窗口
  const windowFeatures = `top=${state.screenY},left=${state.screenX},width=${state.innerWidth},height=${state.innerHeight}`;
  const pdfWindow = window.open(
    `http://127.0.0.1:8000/transactions/matching_evidence/${id}#toolbar=0,view=FitH`,
    "pdf",
    windowFeatures
  );

  pdfWindow.onload = () => {
    // 窗口加载后二次调整位置，确保回到原显示器
    try {
      pdfWindow.moveTo(state.screenX, state.screenY);
      pdfWindow.resizeTo(state.innerWidth, state.innerHeight);
    } catch (e) {
      console.warn('无法调整窗口位置:', e);
    }

    // 监听窗口关闭事件，保存最新状态
    pdfWindow.onbeforeunload = () => {
      saveWindowState.call(pdfWindow); // 绑定到子窗口上下文
    };
  };
};

Chrome扩展解决方案（精准控制） #

如果可以开发Chrome扩展，使用官方chrome.windowsAPI能完全绕过位置限制，实现精准的跨显示器位置管理：

示例代码（扩展脚本中）

// 读取保存的窗口状态
chrome.storage.local.get('windowState', (result) => {
  const state = result.windowState || {
    left: 0,
    top: 0,
    width: 800,
    height: 1000
  };

  // 创建窗口并指定位置
  chrome.windows.create({
    url: `http://127.0.0.1:8000/transactions/matching_evidence/${id}#toolbar=0,view=FitH`,
    left: state.left,
    top: state.top,
    width: state.width,
    height: state.height,
    focused: true
  }, (newWindow) => {
    // 监听窗口关闭，保存最新状态
    chrome.windows.onRemoved.addListener((windowId) => {
      if (windowId === newWindow.id) {
        chrome.windows.get(windowId, (currentWindow) => {
          chrome.storage.local.set({
            windowState: {
              left: currentWindow.left,
              top: currentWindow.top,
              width: currentWindow.width,
              height: currentWindow.height
            }
          });
        });
      }
    });
  });
});

注意事项 #

• 普通网页方案依赖窗口加载后的二次调整，若用户断开了原副显示器，窗口仍会被调整到当前可用显示器。
• 扩展方案需要申请windows和storage权限，在manifest.json中配置：

  {
    "permissions": ["windows", "storage"]
  }
  

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