web-dev-qa-db-fra.com

Comment arrêter le déchargement d'une page (s'éloigner) dans JS?

Quelqu'un sait-il comment empêcher une page de se recharger ou de s'éloigner?

jQuery (fonction ($) {
 
/* global lors de la notification de déchargement */
 avertissement = vrai; 
 
 if (avertissement) {
 $ (fenêtre) .bind ("décharger", fonction () {
 if (confirmer ("Voulez-vous quitter cette page") == true) {
 // ils ont appuyé sur OK 
 alert ('ok'); 
} else {
 // ils ont appuyé sur Cancel 
 alert ('cancel'); 
 return false; 
} 
}); 
} 
});

Je travaille actuellement sur un site e-commerce, la page qui affiche vos futures commandes a la possibilité de modifier les quantités d'articles commandés à l'aide des boutons +/-. En changeant les quantités de cette façon, cela ne change pas réellement la commande elle-même, ils doivent appuyer sur confirmer et donc commettre une action positive pour modifier la commande.

Cependant, s'ils ont changé les quantités et s'éloignent de la page, je voudrais les avertir qu'ils le font en cas d'accident, car les quantités modifiées seront perdues s'ils naviguent ou rafraîchissent la page.

Dans le code ci-dessus, j'utilise une variable globale qui sera fausse par défaut (c'est vrai uniquement pour les tests), quand une quantité est modifiée, je mettrai à jour cette variable pour être vraie, et quand ils confirmeront les changements je la mettrai sur faux .

Si l'avertissement est vrai et que la page est déchargée, je leur propose une boîte de confirmation, s'ils disent non, ils souhaitent rester sur cette page, je dois l'empêcher de se décharger. return false ne fonctionne pas, il permet toujours à l'utilisateur de s'éloigner (les alertes sont là pour le débogage uniquement)

Des idées?

javascriptjqueryevents
67
Natalie Downe

onbeforeunload est celui que vous voulez; votre fonction "doit affecter une valeur de chaîne à la propriété returnValue de l'objet Event et renvoyer la même chaîne" . Consultez les documents de Microsoft et Mozilla pour plus de détails.

La chaîne que vous retournez sera utilisée par le navigateur pour présenter à l'utilisateur une boîte de confirmation personnalisée, lui permettant de refuser d'y rester s'il le souhaite. Cela doit être fait de cette façon pour empêcher les scripts malveillants de provoquer une attaque par déni de navigateur.

83
NickFitz

Ce code avertit selon la suggestion de Natalie, mais désactive l'avertissement si un formulaire sur la page a été soumis. Utilise JQuery.

var warning = true;
window.onbeforeunload = function() { 
  if (warning) {
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
  }
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
66
crafter

vous souhaitez utiliser l'événement onbeforeunload.

19
scunliffe
window.onbeforeunload = confirmExit;
function confirmExit()
{
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}
5
VIKRANT SHARMA
window.onbeforeunload = function() { 
  if (warning) {
    return 'You have made changes on this page that you have not yet confirmed. 
    If you navigate away from this page you will loose your unsaved changes';
  }
}

n'est pas pris en charge dans Chrome, Safari et Opera

4
Ritesh S