父窗口最大化时Firefox/Safari的window.open忽略指定宽高问题

问题背景 #

在Ubuntu的Firefox、macOS的Safari中，当父窗口处于最大化状态时，调用window.open设置的弹窗位置和尺寸参数会被忽略，弹窗直接继承最大化状态；但Chromium系浏览器不受此影响。这是因为部分浏览器的窗口管理策略默认让新弹窗继承父窗口的状态，而非严格遵循手动配置。

可用解决方法 #

• 添加隔离特性参数
  在窗口特性字符串中加入noopener和noreferrer，强制浏览器创建独立的弹窗上下文，避免继承父窗口的最大化状态：

  let windowFeatures = "left=100,top=100,width=800,height=600,noopener,noreferrer"
  window.open('img.html', 'foobar', windowFeatures);
  

  这两个参数原本用于安全隔离，但能触发部分浏览器的独立窗口初始化逻辑，绕过状态继承。

• 弹窗加载后手动调整
  如果上面的方法无效，可以在弹窗加载完成后，通过resizeTo和moveTo强制设置尺寸和位置：

  const popup = window.open('img.html', 'foobar', "noopener,noreferrer");
  popup.addEventListener('load', () => {
    popup.resizeTo(800, 600);
    popup.moveTo(100, 100);
  });
  

  注意：此方法要求弹窗与父窗口同域，否则会触发跨域安全限制。

• 修改Firefox配置（仅针对Firefox）
  在Firefox地址栏输入about:config，找到browser.link.open_newwindow.restriction，将值从默认的2改为0。修改后Firefox会严格遵循window.open的参数设置，不再继承父窗口的最大化状态。

浏览器差异说明 #

Chromium系浏览器（Chrome、Edge等）默认优先遵循window.open的配置参数，不受父窗口状态影响；而Firefox和Safari存在状态继承的默认策略，需要通过上述方法调整。

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