web-dev-qa-db-fra.com

jQuery beforeunload fenêtre pop-up personnalisée pour quitter une page

Salut, je voudrais personnaliser ma fenêtre contextuelle pour quitter une page, existe-t-il un moyen simple de le faire?

J'utilise jQuery simple

$(document).ready(function() {
    var myPopUp = $('#pop-up').css('display', 'block');
    $(window).bind('beforeunload', function(){
      return 'load my pop up here instead of the default browser message';
    });
});

mon html pour le pop up est qui est caché par défaut

<div id="pop-up">
  <h2>Are you sure wanna leave</h2>
  <a href="#">Leave</a>
  <a href="#" class="close">Stay</a>
</div>

Merci

javascriptjquerypopuponbeforeunload
32
dikei

Réponse courte: Vous ne pouvez pas .

Réponse plus longue: pour des raisons de "sécurité" assez évidentes, ce que vous pouvez faire lorsqu'un utilisateur essaie de s'éloigner d'une page/fermer un onglet ou de toute autre manière quitter le site est très limité.

La raison en est que les navigateurs veulent s'assurer absolument que vous ne pouvez pas empêcher l'utilisateur de fermer un onglet ou une fenêtre qu'il/elle veut pour fermer .

Par conséquent, l'événement onbeforeunload javascript - et par extension l'événement beforeunload jQuery - sont extrêmement limités dans ce qu'ils peuvent faire. Une des choses qu'ils ne peuvent certainement pas faire est d'empêcher la fermeture de la page - sauf en utilisant une méthode très standardisée et plutôt ennuyeuse que le navigateur autorise (généralement).

Certains navigateurs vous permettent de spécifier un message, tandis que d'autres (y compris firefox) ne vous permettent même pas de changer le message (car vous pourriez tromper l'utilisateur en lui demandant "Puis-je adopter votre fils à naître?") ... AFAIK la plupart des navigateurs le permettent vous pour spécifier une chaîne de votre choix en plus à un message standard qui ne peut pas être modifié. Certains navigateurs (pas les principaux navigateurs de bureau) n'ont même pas complètement l'événement.

Ce que vous voulez réaliser, c'est essentiellement de forcer l'utilisateur à rester sur votre page, puis à afficher un pop-up Nice lui demandant de confirmer ... et bien que cela puisse certainement améliorer l'expérience utilisateur dans de nombreux cas, vous ne ' Je dois réfléchir très dur pour imaginer comment on pourrait en abuser pour ne tout simplement pas permettre à l’utilisateur de partir.

Pensez à la façon dont les sites ennuyeux qui cassent le bouton de retour sont, puis imaginez qu'ils pourraient même supprimer votre capacité à fermer un onglet!

Je suis tombé sur ceci une question plutôt amusante sur le forum d'un utilisateur qui a passé beaucoup de temps à essayer d'éviter même le peu d'agacement peut être ajouté - un court extrait:

Je n'aime pas le déchargement et le déchargement. Je ne pense pas qu'ils devraient être tirés sur mon installation de Firefox. Je ne pense pas qu'il y ait une application utile de ces événements, pas même le bienfaiteur "vous avez du travail non enregistré!" popups. Lorsque je dis à mon navigateur Web de fermer une page Web, je ne veux pas qu'une page Web empêche (ou retarde) la fermeture du navigateur - du tout.

Et juste pour ajouter un peu d'informations quelque peu officielles:

mozilla.org: WindowEventHandlers.onbeforeunload :

Depuis le 25 mai 2011, la spécification HTML5 indique que les appels aux méthodes window.alert (), window.confirm () et window.Prompt () peuvent être ignorés lors de cet événement. Voir la spécification HTML5 pour plus de détails.

38
Mikk3lRo

Cette question a été posée et répondue dans plusieurs messages stackoverflow tels que celui-ci n

Si vous pouvez également expliquer quelles sont les circonstances de la sortie de la "page", vous pourriez probablement obtenir une réponse meilleure et appropriée. Si vous souhaitez avertir que l'utilisateur doit enregistrer avant, passez à la poste supérieure du lien. Si vous souhaitez simplement avertir avant de quitter la page, essayez cette réponse que l'utilisateur Hunter a laissé:

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>
5
lifejuggler

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility

il n'est pas possible d'avoir un popup personnalisé voir le lien spécifié

1
kishore kingmaker