JavaScript中window.open()与window.close()函数使用异常问题

核心原因 #

现代浏览器的安全策略规定：只有由当前脚本通过window.open()创建的同源窗口，才能被该脚本调用window.close()关闭。如果打开的是第三方域名页面（比如你代码中的Google），浏览器会直接拒绝关闭请求，因为脚本没有权限控制非同源的窗口实例。

可行解决方案 #

1. 打开同源页面 #

确保打开的是自身域名下的页面，这样就能正常触发关闭操作。修改后的代码示例：

let myWindow;

function openWindow() {
  // 替换为你自己域名下的页面路径
  myWindow = window.open('/new-window.html', '_blank', 'width=600,height=400');
}

function closeWindow() {
  // 先验证窗口状态，避免报错
  if (myWindow && !myWindow.closed) {
    myWindow.close();
  }
}

对应的HTML保持不变即可。

2. 第三方页面配合消息监听（需控制第三方页面） #

如果你有权限修改打开的第三方页面，可以通过跨页面消息通信触发关闭：

父页面代码：

let myWindow;

function openWindow() {
  myWindow = window.open('https://your-third-party-domain.com');
}

function closeWindow() {
  if (myWindow && !myWindow.closed) {
    // 发送关闭指令，注意指定目标域名确保安全
    myWindow.postMessage('trigger-close', 'https://your-third-party-domain.com');
  }
}

第三方页面代码：

window.addEventListener('message', (event) => {
  // 验证消息来源，防止恶意调用
  if (event.origin === 'https://your-parent-domain.com' && event.data === 'trigger-close') {
    window.close();
  }
});

3. 增加窗口状态校验 #

调用关闭前先检查窗口实例的有效性，避免控制台报错：

function closeWindow() {
  if (myWindow && typeof myWindow.close === 'function' && !myWindow.closed) {
    try {
      myWindow.close();
    } catch (err) {
      console.error('关闭窗口失败:', err);
    }
  }
}

注意事项 #

如果必须打开第三方域名且无法修改对方页面，浏览器的安全机制会彻底阻止关闭操作，这种情况下没有通用解法——这是浏览器为了防止恶意脚本随意控制用户窗口的必要限制。

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