前端用户离开页面的时候提示是否确认离开的实现-onbeforeunload

文章参考来源：https://blog.csdn.net/liusain... 感谢 o(^▽^)o

需求描述

在做一个react项目的时候，有这样一个需求：

1. 用户在某个页面编辑了一些内容未进行保存，当用户点击网页的刷新按钮或者关闭网页的时候，对用户提示“是否离开页面”。
2. 当用户编辑时编辑状态被锁定，其他用户无法编辑。用户确认离开的时候需要解锁，取消的时候则不解锁

解决方法： js中的 onbeforeunload 函数

我们知道，通过onbeforeunload可以监听window的页面是否离开

//window
window.onbeforeunload=function(e){     
    e = e || window.event;
    if (e) {
        // 兼容IE8和Firefox 4之前的版本
        e.returnValue = "当前内容未保存，确认离开？";
    }
    return "当前内容未保存，确认离开？";
} 

但是按照当前的需求，我们需要知道弹窗执行的返回值。
然鹅 ⊂((・x・))⊃～实际上拿不到诶（不知道是不是我操作姿势不对，反正无法得知用户是点击了“取消”按钮还是点击了“离开”按钮），但是产品的需求，咱们还是要满足的！就算是骚操作，我们也要写出来！
不瞎BB了～
我的实现方式是在组件的 componentDidMount 生命周期内去做以下的操作

componentDidMount () {
    this.onbeforePageLeave();
}

onbeforePageLeave = ()=>{
    let that = this;
    window.onbeforeunload = function(e){
        if (that.state.isEditing) { //判断编辑状态
        
            // 触发刷新的时候默认解锁，通过 cancelLeavePage 来判断是否取消离开,如果取消离开再执行取消离开需要做的操作
             that.unLock(true);
            
            // 当页面弹窗消失的时候才去创建定时器（也就是用户已经点击了取消离开或确认离开之后）
            setTimeout(()=>{
                // 50微妙的原因：50微妙后如果页面被关闭/刷新，则cancelLeavePage不会执行，否则将会执行cancelLeavePage
                setTimeout(that.cancelLeavePage, 50)
            }, 0);
            
            e = e || window.event;
            if (e) {
                // 兼容IE8和Firefox 4之前的版本
                e.returnValue = "当前内容未保存，确认离开？";
            }
            return "当前内容未保存，确认离开？";
        }
        return;
   };
}

cancelLeavePage  = ()=>{
    // 取消离开页面
    console.log("取消离开页面");
    // 编辑状态取消离开，重新加锁
    this.unLock(false)
}
  
unLock = （option）=>{
    // 是否解锁的请求
}

实现方式可能不是最佳的，但是我的小脑瓜现在只想到这种实现方式，如果有什么不对的还请指出～感谢(^o^)

(一只有点话痨的小前端，来唠嗑呀～)