Chrome 浏览器 onbeforeunload 事件失效，有哪些替代方案？

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《Chrome 浏览器 onbeforeunload 事件失效，有哪些替代方案？》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

chrome 浏览器 onbeforeunload 事件失效，有替代方案吗？

在 chrome 浏览器中使用 window.onbeforeunload 事件来实现离开页面提示的功能时，需要注意该事件已在 chrome 51 中被移除。其他浏览器也相应版本移除了此事件。

针对这个问题，可以使用以下替代方案：

方案 1：beforeunload 事件

虽然 onbeforeunload 事件已弃用，但 browsers（包括 chrome、firefox、edge 等）仍然支持 beforeunload 事件。该事件与 onbeforeunload 类似，区别在于它的触发时机与窗口关闭时刻相关，而 onbeforeunload 事件的触发时机与页面离开时刻相关。

window.addeventlistener('beforeunload', function(e) {
  var message = 'leave?';
  e = e || window.event;
  if (e) {
    e.returnvalue = message;
  }
  return message;
});

方案 2：页面可见性 api

页面可见性 api 可以用来检测浏览器窗口是否处于可见状态。当窗口不可见时，可以触发提示。

document.addeventlistener('visibilitychange', function() {
  if (document.visibilitystate === 'hidden') {
    // 页面离开，触发提示
  }
});

方案 3：会话存储

可以使用会话存储来保存用户输入的数据。这样，当用户离开页面后再回来时，可以恢复之前输入的数据。

// 保存数据到会话存储
sessionStorage.setItem('myData', JSON.stringify(myData));

// 从会话存储中恢复数据
var myData = JSON.parse(sessionStorage.getItem('myData'));

到这里，我们也就讲完了《Chrome 浏览器 onbeforeunload 事件失效，有哪些替代方案？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！