用戶關閉頁面時彈窗提示

背景

網頁很容易碰到這樣的需求。網上收到的解決方法如下 

window.onbeforeunload = function (e) {
  e = e || window.event;

  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '關閉提示';
  }

  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '關閉提示';
};

 

但是在瀏覽器上驗證下，卻沒有按照預期彈框

原因

https://bbs.csdn.net/topics/392441581

• 現在瀏覽器為了優化用戶體驗，對onbeforeunload 的離開頁面提示做出了限制。
  比如最新版的谷歌瀏覽器，必須要有用戶在頁面上有點擊等操作之后再離開頁面才能有提示，如果頁面打開后沒有用戶在頁面上點擊等操作就離開（關閉）頁面就不會有提示。
  另外一般的ide或代碼編輯器內嵌瀏覽器離開（關閉）頁面也不會有提示

 

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload

• 當該事件返回的字符串（事前設置好的event.returnValue的值）不為null或者undefined時，彈出確認窗口讓用戶自行選擇是否關閉當前頁面。一些瀏覽器將該事件返回的字符串顯示在彈出窗上。從Firefox 4、 Chrome 51、Opera 38 和Safari 9.1開始，通用確認信息代替事件返回的字符串。比如，火狐上會顯示“本頁面要求您確認您要離開 - 您輸入的數據可能不會被保存”，請查閱bug 588292和Chrome Platform Status。

  從2011年5月25日起,  HTML5 規范 聲明:在該事件的處理函數中調用下列彈窗相關的方法時,可以忽略不執行,window.showModalDialog(), window.alert(), window.confirm()window.prompt().