Question

我在用戶離開頁面時正在運行一個對話框。唯一的是它運行1秒並消失？我知道它與bind('beforeunload')有關，但對話框會比你讀的更快。

如何阻止這種情況發生？

$(document).ready(function() { 

    // Append dialog pop-up modem to body of page 
    $('body').append("<div id='confirmDialog' title='Confirm'><p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Are you sure you want to leave " + brandName + "? <br /> Your order will not be saved.</p></div>"); 

    // Create Dialog box 
    $('#confirmDialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     overlay: { 
     backgroundColor: '#000', 
     opacity: 0.5 
     }, 
     buttons: { 
     'I am sure': function() { 
      var href = $(this).dialog('option', 'href', this.href); 
      window.location.href = href; 
     }, 
     'Complete my order': function() { 
      $(this).dialog('close'); 
     } 
     } 
    }); 

    // Bind event to Before user leaves page with function parameter e 
    $(window).bind('beforeunload', function(e) {  
     // Mozilla takes the 
     var e = $('#confirmDialog').dialog('open').dialog('option', 'href', this.href); 
     // For IE and Firefox prior to version 4 
     if (e){ 
      $('#confirmDialog').dialog('open').dialog('option', 'href', this.href); 
     } 
     // For Safari 
     e.$('#confirmDialog').dialog('open').dialog('option', 'href', this.href); 
    }); 

    // unbind function if user clicks a link 
    $('a').click(function(event) { 
     $(window).unbind(); 
     //event.preventDefault(); 
     //$('#confirmDialog').dialog('option', 'href', this.href).dialog('open'); 
    }); 

    // unbind function if user submits a form 
    $('form').submit(function() { 
     $(window).unbind(); 
    }); 
}); 

Answer 1

beforeunload利用內置於瀏覽器的方法，你需要一個字符串返回給它，瀏覽器將顯示該字符串，並詢問用戶是否要離開頁面。

您不能使用自己的對話框（或jQueryUI模式對話框）來覆蓋beforeunload。

beforeunload無法將用戶重定向到其他頁面。

$(window).on('beforeunload', function(){ 
    return 'Are you sure you want to leave?'; 
}); 

這將使一個警告框彈出，上面寫着'Are you sure you want to leave?'並詢問他們是否要離開頁面的用戶。

（更新：Firefox不顯示自定義的消息，它只是顯示自己的）

如果你想運行的頁面被卸載功能，您可以使用$(window).unload()，只是注意，它可能停止頁面卸載或重定向用戶。 （UPDATE：鉻和Firefox塊警報在unload。）

$(window).unload(function(){ 
    alert('Bye.'); 
}); 

演示：http://jsfiddle.net/3kvAC/241/

UPDATE：

$(...).unload(...)是因爲jQuery的V1.8 deprecated，而是使用：

$(window).on('unload', function(){ 
}); 

Answer 2

你也可以使用下面的unload方法介紹由微軟來實現這一點。 點擊here查看現場演示。

function closeIt() 
    { 
    return "Any string value here forces a dialog box to \n" + 
     "appear before closing the window."; 
    } 
    window.onbeforeunload = closeIt; 

Click閱讀Microsoft文檔。

Answer 3

在我的情況下，我使用它來顯示一個'preloader'，然後再轉到我的webapp的另一部分，所以這與在打開的新頁面中出現的'preloader'匹配，以實現頁面之間的美學變化。

它的工作是什麼，我（和我什麼都試過），是這樣的：

function myLoader() { 
    // Show my Loader Script; 
} 

$(window).on('beforeunload' , function() { 
    myLoader(); 
});