前端用户离开页面的时候提示是否确认离开的实现-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^)

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