如何判断弹出窗口是通过window.close()关闭还是鼠标点击手动关闭

可以通过自定义状态标记+事件监听的方式实现两种关闭场景的区分，核心逻辑是：代码调用window.close()的路径可以主动打标记，用户手动触发的关闭不会走自定义的关闭逻辑，由此可以识别用户主动关闭的场景。

基础实现（弹出窗口内部逻辑） #

1. 重写弹出窗口原生的window.close方法，代码调用关闭时标记状态

// 弹出窗口页面内的初始化代码
let isJsInitiatedClose = false
const nativeClose = window.close
window.close = function () {
  isJsInitiatedClose = true
  nativeClose.apply(this, arguments)
}

2. 监听页面卸载事件，判断关闭来源

window.addEventListener('beforeunload', () => {
  if (!isJsInitiatedClose) {
    // 进入该分支即为用户主动手动关闭窗口，可执行对应逻辑
    console.log('用户主动关闭了弹出窗口')
    // 如果需要通知父窗口，可通过postMessage传递消息
    window.opener?.postMessage({ action: 'popup_user_closed' }, window.opener.origin)
  }
})

适配父窗口调用关闭的场景 #

如果父窗口会直接调用弹出窗口的close方法，需要补充跨页面消息监听打标记：

// 父窗口代码
const popupWin = window.open('弹出窗口地址')
// 调用关闭前先给弹出窗口发消息打标记
popupWin.postMessage({ action: 'js_close_trigger' }, '弹出窗口的origin')
popupWin.close()

// 弹出窗口内补充监听逻辑
window.addEventListener('message', (e) => {
  // 校验来源安全后再处理
  if (e.origin === '父窗口的origin' && e.data.action === 'js_close_trigger') {
    isJsInitiatedClose = true
  }
})

• 极端场景比如浏览器崩溃、系统结束进程、强制杀页面等情况，beforeunload事件不会触发，这部分场景无法识别
• 跨域场景下postMessage必须严格指定目标origin，禁止使用*避免安全风险
• 不要在beforeunload事件中添加阻塞式的弹窗逻辑，多数浏览器会直接拦截这类操作

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