2009-08-26 95 views
6

是否可以在瀏覽器中爲onbeforeunload事件創建自定義確認框?我試了一下,但後來我得到了2個確認框(從我這裏得到的只是返回確認...,然後是瀏覽器中的標準框)。onbeforeunload確認屏幕定製

目前我的代碼看起來像:

var inputChanged = false; 

$(window).load(function() { 
    window.onbeforeunload = navigateAway; 
    $(':input').bind('change', function() { inputChanged = true; }); 
}); 

function navigateAway(){ 
    if(inputChanged){ 
     return 'Are you sure you want to navigate away?'; 
    } 
} 

我使用jQuery這一點。

回答

11
window.onbeforeunload = function (e) { 
    var message = "Your confirmation message goes here.", 
    e = e || window.event; 
    // For IE and Firefox 
    if (e) { 
    e.returnValue = message; 
    } 

    // For Safari 
    return message; 
}; 

請注意:大多數瀏覽器把這個消息後,一些其他的文字。您無法完全控制確認對話框的內容。

+0

它確實很遺憾,無法覆蓋此屏幕。 – 2009-08-27 07:28:45

3

不,你無法從瀏覽器中避免使用標準的。你所能做的只是向它注入一些自定義文本;如果你使用下面的事件處理(註冊原型LIB方式):

Event.observe(window, "beforeunload", function(event) { 
    if (showMyBeforeUnloadConfirmation) 
     event.returnValue = "foo bar baz"; 
}); 

(和showMyBeforeUnloadConfirmation是真實的),你會得到瀏覽器的標準確認有以下文字:

確定你想離開這個頁面嗎?

富酒吧巴茲

按確定繼續,或取消留在當前頁面。

[確定] [取消]

0

我面臨同樣的問題,我能得到自己的對話框,我的消息,但我面臨的問題是:

  1. 這對所有的導航給人的消息,我想它僅適用於緊密單擊。
  2. 如果用戶選擇「取消」,用我自己的確認信息,它仍然顯示瀏覽器的默認對話框。

以下是我找到的解決方案代碼,這是我在母版頁上寫的。

function closeMe(evt) { 
    if (typeof evt == 'undefined') { 
     evt = window.event; 
    } 
    if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) { 
     return "Do you want to log out of your current session?"; 
    } 
} 

window.onbeforeunload = closeMe;