頁面關閉beforeunload事件

beforeunload事件在當頁面卸載（關閉）或刷新時調用，事件觸發的時候彈出一個有肯定和取消的對話框，肯定則離開頁面，取消則繼續待在本頁；

jquery離開頁面彈出提示代碼

//綁定beforeunload事件

$(window).bind('beforeunload',function(){

return '您輸入的內容還沒有保存，肯定離開此頁面嗎？';

});

//解除綁定，通常放在提交觸發事件中

$(window).unbind('beforeunload');

js離開頁面提示  onbeforeunload事件方法

window.onbeforeunload = function(event) { 

return confirm("肯定退出嗎"); 

}

如下操做觸發beforeunload，onbeforeunload

1 ·關閉瀏覽器窗口 

2·經過地址欄或收藏夾前往其餘頁面的時候 

3·點擊返回，前進，刷新，主頁其中一個的時候 

4·點擊 一個前往其餘頁面的url鏈接的時候 

5·調用如下任意一個事件的時候：click,document.write()方法（輸出內容），document.open()  打開一個新的空白文檔，document.close()方法可關閉一個由open()方法打開的輸出流，並顯示選定的數據。
，window close ()，form.submit. 

6·當用window open打開一個頁面，並把本頁的window的名字傳給要打開的頁面的時候。

  7·從新賦予location.href的值的時候。

  8·經過input type=」submit」按鈕提交一個具備指定action的表單的時候。

  9.能夠用在如下元素： body, frameset, window

 

// 關閉窗口時彈出確認提示

$(window).bind('beforeunload', function(){

    // 只有在標識變量is_confirm不爲false時，才彈出確認提示

    if(window.is_confirm !== false){     

           return '您可能有數據沒有保存';

    }

});

// 提交表單時，不彈出確認提示框

$('form').bind('submit', function(){   

          is_confirm = true; 

 });

//頁面內的跳轉操做均不彈出確認窗口

$(window).bind('mouseover mouseleave', function(event){

    is_confirm = event.type == 'mouseleave';

});

(function(){   

     // 關閉窗口時彈出確認提示   

    $(window).bind('beforeunload', function(){     

   // 只有在標識變量is_confirm不爲false時，才彈出確認提示     

    if(window.is_confirm !== false)     

          return '您可能有數據沒有保存'; 

    }) 

  // mouseleave mouseover事件也能夠註冊在body、外層容器等元素上 

   .bind('mouseover mouseleave', function(event){   

    　　is_confirm = event.type == 'mouseleave';   

    });

})();

 

<script type="text/javascript"> var changeFlag=false;//標識文本框值是否改變，爲true，標識已變 $(document).ready(function(){ //文本框值改變即觸發 $("input[type='text']").change(function(){ changeFlag=true; }); //文本域改變即觸發 $("textarea").change(function(){ changeFlag=true; }); }); //離開頁面時保存文檔 window.onbeforeunload = function() { 　　if(changeFlag ==true){ 　　　　//若是changeFlag的值爲true則提示 　　if(confirm("頁面值已經修改，是否要保存？")){ 　　　　//處理信息保存... 　　　　　　alert("即將執行保存操做..."); 　　}else{ 　　　　//不保存數據... 　　　　alert("不保存信息..."); 　　} }