2009-08-26 16 views
6

Est-il possible de créer une boîte de confirmation personnalisée pour l'événement onbeforeunload dans un navigateur? J'ai essayé mais ensuite j'obtiens 2 boites de confirmation (une de moi qui n'est rien d'autre que la confirmation de retour ... et puis la standard du navigateur).Personnalisation de l'écran de confirmation onbeforeunload

Au moment mon code ressemble:

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?'; 
    } 
} 

J'utilise jQuery pour cela.

Répondre

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; 
}; 

S'il vous plaît noter: La plupart des navigateurs ont mis ce message après un autre texte. Vous n'avez pas le contrôle complet du contenu de la boîte de dialogue de confirmation.

+0

Il est malheureusement impossible de remplacer cet écran. –

3

Non, vous ne pouvez pas éviter le standard dans le navigateur. Tout ce que vous pouvez faire est de lui injecter du texte personnalisé; si vous utilisez le gestionnaire d'événement suivant (enregistré le chemin lib prototype):

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

(et showMyBeforeUnloadConfirmation est vrai), vous obtenez une confirmation standard du navigateur avec le texte suivant:

Etes-vous sûr vous voulez naviguer loin de cette page?

foo bar baz

Appuyez sur OK pour continuer ou Annuler pour rester sur la page en cours.

[OK] [Annuler]

0

J'ai fait face au même problème, je suis en mesure d'obtenir sa propre boîte de dialogue avec mon message, mais les problèmes que j'ai rencontrés étaient:

  1. Il donnait message sur toutes les navigations et je voulais seulement pour près Cliquez sur.
  2. Avec mon propre message de confirmation si l'utilisateur sélectionne "Annuler", il affiche toujours la boîte de dialogue par défaut du navigateur.

Voici le code de solutions que j'ai trouvé, que j'ai écrit sur ma page maître.

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;