如何检测iOS Safari网页扩展中弹窗的关闭或隐藏事件？

针对iOS Safari扩展弹窗关闭/隐藏时常规事件不触发的问题，给你几个可行的解决思路：

1. 尝试 beforeunload 事件（有限场景生效） #

iOS Safari对弹窗的unload类事件支持不完善，但可以试试在弹窗页面监听beforeunload，部分场景下能捕获到关闭动作：

window.addEventListener('beforeunload', (event) => {
  // 执行弹窗关闭前的逻辑，比如给后台发通知
  browser.runtime.sendMessage({ action: 'popupClosed' });
});

注意：这个事件在用户切换App导致弹窗被隐藏时可能失效，仅能覆盖主动关闭弹窗的场景。

2. 心跳检测机制（稳定覆盖全场景） #

iOS Safari弹窗被隐藏或关闭时，页面JS执行会被暂停，利用这一点可以做弹窗与后台的心跳交互：

• 弹窗页面：加载后启动定时心跳

let heartbeatTimer;

function startHeartbeat() {
  heartbeatTimer = setInterval(() => {
    browser.runtime.sendMessage({ action: 'heartbeat' });
  }, 1000);
}

window.addEventListener('load', startHeartbeat);

• 后台脚本：维护超时计时器，超过指定时间未收到心跳则判定弹窗已关闭/隐藏

let timeoutTimer;

browser.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'heartbeat') {
    clearTimeout(timeoutTimer);
    timeoutTimer = setTimeout(() => {
      // 这里执行弹窗关闭后的逻辑
      console.log('Popup closed or hidden');
    }, 3000);
  }
});

这个方法稳定性高，能覆盖弹窗被关闭、切换App隐藏、系统后台回收等所有场景。

3. 主动触发端口断开 #

你之前用browser.runtime.connect()未触发onDisconnect，是因为iOS Safari的端口回收机制和macOS不同。可以在弹窗页面主动断开端口：

let popupPort;

window.addEventListener('load', () => {
  popupPort = browser.runtime.connect({ name: 'popup-connection' });
});

window.addEventListener('beforeunload', () => {
  popupPort?.disconnect();
});

后台脚本监听端口断开事件：

browser.runtime.onConnect.addListener((port) => {
  if (port.name === 'popup-connection') {
    port.onDisconnect.addListener(() => {
      console.log('Popup closed/hidden');
    });
  }
});

主动断开能让后台准确捕获弹窗的关闭动作。

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