前端用戶離開頁面的時候提示是否確認離開的實現-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^)

(一隻有點話癆的小前端，來嘮嗑呀～)