修改內容未儲存瀏覽器關閉確認

似水浮流年發表於2018-04-20
瀏覽器

最近開發遇到了檢測使用者修改未儲存時，關閉瀏覽器提示儲存的需求，類似下圖。本文記錄下用到的知識點。

修改內容未儲存瀏覽器關閉確認

window.onbeforeunload

詳細描述見 onbeforeunload MDN 文件 作用是：當視窗即將被解除安裝（關閉）時，會觸發該事件。此時頁面文件依然可見，且該事件的預設動作可以被取消。另外頁面重新整理和切換也會觸發該函式。

使用方法：

window.onbeforeunload = () => {
  if(hasChanged)
    return "放棄當前未儲存內容而關閉頁面？";
}
複製程式碼

window.onunload

onunload 方法用法與onbeforeunload 相同，功能相同

對比如下：

onbeforeunload 瀏覽器相容性較好，主流瀏覽器均支援。onunload 相容性較差 onbeforeunload在onunload之前執行，它還可 以阻止onunload的執行。

導航守衛

但是onbeforeunload 在Vue 單頁網站中有時候不起作用，因為單頁切換不會觸發視窗解除安裝事件。因此要用到 Vue-router 導航守衛來實現，用到了元件內的守衛。用法如下：

beforeRouteLeave: function(to, from , next){
  if (hasChanged) {
    this.$confirm('放棄當前未儲存內容而關閉頁面？', '提示', {
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      next()
    }).catch(() => {
      next(false)
    });
  } else {
    next()
  }
}
複製程式碼

相關文章