如何在微信H5页面中监听关闭事件并发送请求？

Question

监听微信H5页面关闭，需要在此时机发送请求添加历史记录，我在onHide，onUnload事件中发送请求安卓手机没问题，但是苹果手机却无法监听到。

在网上找了很多方法如：window.addEventListener('pagehide'() => {})和window.addEventListener('visibilitychange'() => {})
甚至使用navigator.sendBeacon()发送请求都不行，有没有大佬出手相助。

Answer 1

这样试试,直接梭哈

let isEndSendOK = false;
function report() {
  if (isEndSendOK) {
    return;
  }
  isEndSendOK = true;
  fetch('xxxxxx');
}

// 监听多个事件，做同一个事情，用一个标志位确定是否做过
// 移动端普遍只支持 pagehide
window.addEventListener('beforeunload', report);
window.addEventListener('pagehide', report);
window.addEventListener('unload', report);

// IOS14 之前不会冒泡，只能监听document
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'visible') {
    report();
  } else {
    // 如果界面又显示了，说明没有关闭，重置标志位
    isEndSendOK = false;
  }
});

浏览器关闭时只能发送异步请求
1、可以使用navigator.sendBeacon(url, data)，默认post请求，返回值Boolean
2、使用fetch发送请求

await fetch(``, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    // 保持连接
    keepalive: true
  });