1. 监听页面离开

页面离开包括跳转到新页面和关闭页面

beforeunload

在unload之前触发，可用于阻塞页面退出(Chrome不支持自定义文案)

  window.onbeforeunload = function (e) {
    var e = e || window.event,
      dialogText = '页面还未保存，确定要离开吗？';//该自定义内容仅在老版本浏览器中有效
    if (e) {
      e.returnValue = dialogText;
    };
    return dialogText;
  };

pagehide

不同浏览器内表现形式不同，在微信等应用内仅有pagehide而无beforeunload事件

2. 离开时调用接口

直接调用异步ajax

无法完成三次握手，接口会被cancel
可以通过服务器端配置ignore_user_abort防止接口cancel

调用同步ajax

例如jquery的ajax配置async:false即可，但由于阻塞页面关闭或跳转，2019年底开始Chrome已不再支持

通过图片src(未测试)

创建img并将其src设为待请求的get链接，本质上同调用同步ajax

navigator.sendBeacon

专用于离开页面时埋点，会发起一个POST类型的HTTP请求，data可以为字符串或FormData，也可以不传data直接在url中拼接query

window.addEventListener("pagehide", function () {
  navigator.sendBeacon(url,data);
});

使用websocket等长连接方式