js在關閉頁面前彈出確認提示【轉載】

最近項目中出現個bug，就是導出數據後，會提示確認導航，其實實際需求並不須要這個提示，多是以前遺留的問題。查了下資料是在觸發了onbeforeunload事件，那麼剩下的就是代碼組織問題了。

衆所周知，如今的主流瀏覽器基本上都是多標籤頁的。在標籤頁數量較多的時候，可能連標籤頁的標題都沒法看清。所以，用戶可能一不當心就關錯了標籤 頁，或者直接點擊瀏覽器右上角的關閉按鈕一不當心就關閉了全部標籤頁，而用戶以前訪問咱們站點的某個頁面可能還有很是重要的數據沒有保存。。。

所以，在某些重要數據的錄入頁面，或者在某些包含重要操做的頁面，咱們有必要爲這些網頁添加在關閉頁面前彈出確認提示窗口，以避免用戶不慎關閉網頁致使重要數據丟失。

下面，咱們就直接參考示例代碼吧。

1. //在關閉頁面時彈出確認提示窗口
   
2. window.onbeforeunload = function(event){    
   
3.     return '您可能有數據沒有保存';
   
4. };

注意：因爲onbeforeunload事件並非W3C規範的標準事件，所以並非全部的瀏覽器廠商都支持該事件。到目前爲止，IE、FireFox、Chrome等瀏覽器均支持onbeforeunload事件，Opera瀏覽器不支持該事件。

在頁面的JavaScript腳本中加入上述代碼以後，當咱們關閉該網頁時，能夠看到以下所示的提示效果。

IE瀏覽器關閉頁面前的提示信息

火狐瀏覽器關閉頁面前的提示信息

Chrome瀏覽器關閉頁面前的提示信息

此外，若是你的當前頁面引入了jQuery，那麼你會發現onbeforeunload事件將可能無效，你必須以jQuery的方式來註冊該事件，代碼以下：

1. //在關閉頁面時彈出確認提示窗口
   
2. $(window).bind('beforeunload', function(){
   
3.     return '您可能有數據沒有保存';
   
4. });

強烈注意：使用上面的代碼以後，你會發現beforeunload事件會在致使當前頁面被銷燬的任何狀況下觸發，好比：刷新該頁面、關閉當前選項卡、關閉瀏覽器，甚至當你點擊該頁面上的外部連接、提交該頁面上的表單數據時，都會觸發beforeunload事件。這固然不是咱們所但願看到的，咱們但願的多是，在提交該頁面上表單的時候不彈出確認提示框，或者點擊該頁面上的外部連接也不彈出提示框。

這個時候，咱們應該怎麼作呢？很明顯，咱們須要增長一個條件判斷，從而判斷當用戶的操做符合某些條件時才彈出確認提示框。下面，咱們以基於jQuery的代碼爲例，來編寫具體的代碼：

1. // 關閉窗口時彈出確認提示
   
2. $(window).bind('beforeunload', function(){
   
3.     // 只有在標識變量is_confirm不爲false時，才彈出確認提示
   
4.     if(window.is_confirm !== false)
   
5.         return '您可能有數據沒有保存';
   
6. });

在上面的代碼中，咱們增長了一個全局變量is_confirm來做爲條件判斷變量，只要該變量不爲false時，才彈出確認提示框。固然，咱們還須要添加一些代碼來控制該變量，以確保在不但願彈出確認提示框的地方，不會彈出確認提示框。例如，咱們但願在提交表單的時候，不彈出確認提示框。

1. // 提交表單時，不彈出確認提示框
   
2. $('form').bind('submit', function(){
   
3.     is_confirm = true;  
   
4. });

若是咱們但願當用戶進行提交表單、點擊連接等頁面內的任何跳轉操做時都不彈出提示框，只有在點擊標籤頁的關閉按鈕或者瀏覽器的關閉按鈕時才彈出確認提示框，那麼咱們該如何編寫代碼呢？因爲標籤頁關閉按鈕和瀏覽器關閉按鈕均在頁面之外，用戶點擊關閉按鈕都須要將鼠標移動到頁面之外的位置，所以咱們能夠經過鼠標的位置來進行判斷。此外，咱們也無需去時刻獲取鼠標位置，咱們只須要給當前頁面的window對象(或body、外層容器等元素)註冊mouseover、mouseleave事件便可。

1. //頁面內的跳轉操做均不彈出確認窗口
   
2. $(window).bind('mouseover mouseleave', function(event){
   
3.     is_confirm = event.type == 'mouseleave';
   
4. });

下面就以頁面內的元素均不彈出確認提示窗口爲例，編寫一次完成的示例代碼(基於jQuery)：

1. (function(){
   
2.     // 關閉窗口時彈出確認提示
   
3.     $(window).bind('beforeunload', function(){
   
4.         // 只有在標識變量is_confirm不爲false時，才彈出確認提示
   
5.         if(window.is_confirm !== false)
   
6.             return '您可能有數據沒有保存';
   
7.     })
   
8.     // mouseleave mouseover事件也能夠註冊在body、外層容器等元素上
   
9.     .bind('mouseover mouseleave', function(event){
   
10.         is_confirm = event.type == 'mouseleave';
    
11.     });
    
12. })();