JavaScript avant de quitter la page

234

Je veux faire une confirmation avant que l'utilisateur ne quitte la page. S'il dit ok, il redirigerait vers une nouvelle page ou annulerait pour quitter. J'ai essayé de le faire avec onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Mais ça confirme après la page déjà fermée? Comment le faire correctement?

Ce serait encore mieux si quelqu'un montre comment le faire avec jQuery?

javascript jquery

— kd7
source

1

ha ha ha ... Oui, c'est tout à fait ça .. mais heureusement ce n'est pas mon site ... mon client demande à le faire de son côté

— kd7

25

Oui, mais je suis vraiment heureux de voir ces alertes lorsque je suis sur le point de quitter une page Gmail non enregistrée.

— Etdashou

Remarque, sur Firefox 4+, seul un message par défaut est affiché à la place de votre message personnalisé developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

4

Copie possible de l' utilisateur Warn avant de quitter la page Web avec des modifications non enregistrées

— Wasim A.

352

onunload(ou onbeforeunload) ne peut pas rediriger l'utilisateur vers une autre page. C'est pour des raisons de sécurité.

Si vous souhaitez afficher une invite avant que l'utilisateur ne quitte la page, utilisez onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Ou avec jQuery:

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

Cela demandera simplement à l'utilisateur s'il veut quitter la page ou non, vous ne pouvez pas le rediriger s'il choisit de rester sur la page. S'ils choisissent de quitter, le navigateur ira là où il leur a dit d'aller.

Vous pouvez utiliser onunloadpour faire des choses avant le déchargement de la page, mais vous ne pouvez pas rediriger à partir de là (Chrome 14+ bloque les alertes à l'intérieur onunload):

window.onunload = function() {
    alert('Bye.');
}

Ou avec jQuery:

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

— Rocket Hazmat
source

12

@Joseph: Lorsque vous renvoyez une chaîne de onbeforeunload, le navigateur place cette chaîne dans sa propre boîte de confirmation. L'utilisation confirmest inutile dans onunloadet onbeforeunload, parce que seul le navigateur peut contrôler où il va, pas vous. Découvrez cette démo: jsfiddle.net/3kvAC

— Rocket Hazmat

7

Juste une note, si vous souhaitez afficher un message de manière conditionnelle onbeforeunload, return falsele navigateur affichera "false" dans une boîte de dialogue. Vous devez le faire return undefinedsi vous souhaitez laisser la fenêtre se fermer sans alerte utilisateur.

— Dan Fitch

5

@Adam: Firefox a décidé de ne pas autoriser la personnalisation de ce message. Cela fait partie du navigateur, vous ne pouvez donc pas remplacer ce comportement. D'autres navigateurs peuvent également supprimer la possibilité de personnaliser le message. Voir: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

— Rocket Hazmat

8

@RocketHazmat Chrome aussi. Il dit maintenant seulement: Voulez-vous quitter ce site? Les modifications que vous avez apportées peuvent ne pas être enregistrées.

— programmer5000

6

@ programmer5000 C'est bien parce que certains sites Web malveillants peuvent afficher des avertissements inutiles (par exemple "Vous ne pouvez pas partir sans donner vos informations bancaires")

— Naman

34

Ce code lorsque vous détectez également que l'état du formulaire a changé ou non.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Vous pouvez utiliser la fonction de sérialisation du formulaire Google JQuery, cela collectera toutes les entrées du formulaire et l'enregistrera dans le tableau. Je suppose que cela explique assez :)

— Wasim A.
source

une idée pourquoi cela ne fonctionnerait pas? Pourrait-il être écrasé par d'autres fonctions js / plugins jquery? J'utilise une application webrtc et j'aimerais "fermer" certaines choses lorsque le client ferme la fenêtre, d'où la nécessité de gérer la fermeture de la fenêtre.

— Hé

1

cela peut être remplacé par tout autre plugin, etc.

— Wasim A.

Oui ... si vous avez du code JS qui masque ou désactive les champs de saisie après le chargement de la page, alors lorsque vous effectuez la vérification pour comparer les champs masqués \ désactivés ne seront pas sérialisés. Le chèque échouera bien sûr. ;) Il y a cette solution: stackoverflow.com/a/4748748/114029

— Leniel Maccaferri

Au fait ... il y a une meilleure façon ici: stackoverflow.com/q/16322042/114029

— Leniel Maccaferri

1

il convient de noter que cela déclenchera également un avertissement lorsque vous appuyez sur le bouton Soumettre. on pourrait sérialiser à nouveau le formulaire en cliquant sur le bouton soumettre pour éviter cela.

— Adam

19

Cela vous alertera en quittant la page actuelle

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

— Ajit Singh
source

14

Voici ce que j'ai fait pour afficher le message de confirmation au moment où j'ai des données non enregistrées

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

renvoyer "indéfini" désactivera la confirmation

Remarque: renvoyer "null" ne fonctionnera pas avec IE

Vous pouvez également utiliser "non défini" pour désactiver la confirmation

window.onbeforeunload = undefined;

— Mina Matta
source

11

Pour avoir un popop avec Chrome 14+, vous devez procéder comme suit:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Il sera demandé à l'utilisateur s'il souhaite rester ou partir.

— David Bélanger
source

Une idée pourquoi cela ne fonctionne pas? J'utilise Chrome (dernière version) avec un tas de plugins jquery mais je ne reçois aucune alerte lorsque je ferme la fenêtre.

— hey

@hey Pourquoi le vote négatif? Cela fonctionne .... Vous devez vous assurer qu'il est en dehors de la jQuery(document)et je suggère de le mettre juste après que tous vos plugins soient chargés. De plus, cet extrait ne fait aucune alerte ... c'est seulement une démo avec return.

— David Bélanger

7

Vous pouvez utiliser le one-liner suivant pour toujours demander à l'utilisateur avant de quitter la page.

window.onbeforeunload = s => "";

Pour demander à l'utilisateur lorsqu'un élément de la page a été modifié, consultez cette réponse .

— spencer.sm
source

Est-ce que cela se déclenche également si je rafraîchis la page ou si je quitte simplement?

— Si8

Oui, il se déclenchera lors d'un rafraîchissement ou d'une sortie.

— spencer.sm

Existe-t-il de toute façon de savoir quand il est actualisé vs quand c'est la première fois?

— Si8

Lorsqu'un utilisateur arrive sur la page pour la première fois, contrairement à ce qu'il actualise la page.

— Si8

Oh non. Il ne sera pas renvoyé lorsqu'un utilisateur accède à la page pour la première fois. Uniquement lors de la fermeture ou de la modification de pages ou de l'actualisation.

— spencer.sm

4

Normalement, vous souhaitez afficher ce message lorsque l'utilisateur a apporté des modifications dans un formulaire, mais elles ne sont pas enregistrées.

Adoptez cette approche pour afficher un message, uniquement lorsque l'utilisateur a modifié quelque chose

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Simon Franzen
source

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

— Emir Mamashov
source

2

La plupart des solutions ici n'ont pas fonctionné pour moi, j'ai donc utilisé celle trouvée ici

J'ai également ajouté une variable pour autoriser ou non la case de confirmation

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— Raj Sharma
source

1

Un peu plus utile, activez et désactivez

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
source