如何检测JavaScript弹窗关闭事件？使用.close事件时打开弹窗即触发

嘿，我发现你现在遇到的问题是——刚打开弹窗就触发了关闭日志，这是因为你判断弹窗是否关闭的逻辑搞错啦！

问题出在哪？ #

你原来的代码里用了if (newwindow.close)，但close是弹窗对象的方法，不是状态属性。只要弹窗成功创建（哪怕还开着），这个方法就存在，所以你的条件会立刻成立，导致一打开弹窗就输出"Closed"并清除定时器。

正确的检测方式 #

我们应该用弹窗对象的closed属性，它是一个布尔值：

• 弹窗打开时，newwindow.closed为false
• 弹窗关闭后，newwindow.closed为true

另外还要加个判断：如果弹窗被浏览器拦截了，newwindow会是null，这时候要处理这种情况，避免报错。

修改后的代码 #

function start() {
  $.ajax({
    type: "post",
    dataType: "html",
    url: 'client_get',
    crossDomain: true,
    data: { 'id': '123' },
    success: function(response) {
      let json;
      try {
        json = JSON.parse(response);
      } catch (err) {
        start();
        return; // 解析失败后直接返回，避免后续代码执行
      }

      jQuery(document).ready(function($) {
        const newwindow = window.open('https://www.example.com/key?v=' + json[0]['url'], 'key', 'width=800,height=600,status=0,toolbar=0');
        
        // 先判断弹窗是否被浏览器拦截
        if (!newwindow) {
          console.log("弹窗被浏览器拦截了！");
          return;
        }

        const close_interval = setInterval(function() {
          // 检查closed属性
          if (newwindow.closed) {
            console.log("Closed");
            clearInterval(close_interval);
          }
        }, 1000);
      });
    }
  });
}

额外提示 #

如果你的弹窗是同源页面（和父页面域名相同），还可以用更优雅的方式监听关闭事件，不用定时器：

newwindow.addEventListener('unload', function() {
  console.log("Closed");
});

但如果是跨域页面（比如你现在打开的是example.com，和父页面域名不同），浏览器的同源策略会阻止你监听这个事件，这时候定时器检测closed属性就是唯一可行的办法啦。

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