如何捕获离开当前页面的浏览器按钮行为

By minirplus on 2021-09-15 in DEV

有一个需求是需要在用户离开页面的时候对用户数据进行异步保存，但是在何时是一个触发点能够判断用户离开了页面，是一个问题，在Chrome浏览器中，通过以下按钮都会触发这个行为

触发离开页面的浏览器行为包括

Chrome中可以通过beforeunload这个EventListener对用户的浏览器行为进行监听，一旦监听到事件，就触发行为。

在这个行为中，可以附加一个Chrome系统行为，既通过event.preventDefault();来告诉浏览器弹出离开页面的提示框，但是这个提示是有选项的，在获取到beforeunload的时候，其实用户并没有实际离开，只能判断用户试图离开页面。

何时是用户真的离开页面？需要通过监听unload事件，unload事件的触发事件是在用户点击了离开页面的按钮后触发，这时用户才真正决定离开页面。

需要注意的是，在Chrome中，当用户点击刷新并点击离开按钮后，其实还是回到了当前页面，这时候，当用户后续再次点击刷新，是不会有任何的系统弹框的，除非用户通过Ctrl+R进行刷新才会有提示离开弹框。这个在console中可以看到相应的Chrome官方解释文档。

Demo

demo中，用了两个alert和console来打印触发的状态，在chrome中，alert会被拦截，所以只有console会触发。

window.addEventListener('beforeunload', (event) => {

alert("beforeunload");

console.log('beforeunload')

// Cancel the event as stated by the standard.

event.preventDefault();

// Chrome requires returnValue to be set.

event.returnValue = '';

});

window.addEventListener('unload', (event) => {

alert("onunload");

console.log('onunload')

});

console.log('App started')