Empêcher une page Web de naviguer à l'aide de JavaScript

Question

Comment empêcher une page Web de naviguer à l'aide de JavaScript?

Answer 1

En utilisant onunload ne vous permet d'afficher des messages, mais il ne sera pas interrompre la navigation (car il est trop tard). Cependant, vous pouvez utiliser onbeforeunload et interromprez navigation:

window.onbeforeunload = function() { 
    return "Are you sure you want to navigate away?"; 
} 

Modifier: Suppression confirm() dans la déclaration de retour comme cela a causé une fenêtre de confirmation comme prévu, mais a également montré une seconde confirmation du résultat de la première confirmation .

Answer 2

Utilisez onunload.

Pour jQuery, je pense que cela fonctionne comme ceci:

$(window).unload(function() { 
    alert("Unloading"); 
    return falseIfYouWantToButBeCareful(); 
}); 

Answer 3

Dans l'exemple de Ayman en retournant faux vous empêchez la fenêtre du navigateur/onglet de fermeture.

window.onunload = function() { 
    alert('You are trying to leave.'); 
    return false; 
} 

Answer 4

Ce message d'erreur suggéré peut dupliquer le message d'erreur déjà affiché par le navigateur. En chrome, les 2 messages d'erreur similaires s'affichent les uns après les autres dans la même fenêtre.

En chrome, le texte affiché après le message personnalisé est: "Êtes-vous sûr de vouloir quitter cette page?". Dans Firefox, il n'affiche pas du tout notre message d'erreur personnalisé (mais affiche toujours la boîte de dialogue).

Un message d'erreur plus appropriée pourrait être:

window.onbeforeunload = function() { 
    return "If you leave this page, you will lose any unsaved changes."; 
} 

ou le style stackoverflow: "Vous avez commencé à écrire ou éditer un message."

Answer 5

Contrairement aux autres méthodes présentées ici, ce bit de code pas provoque l'affichage d'un avertissement par le navigateur demandant à l'utilisateur s'il veut partir; à la place, il exploite la nature événementielle du DOM pour rediriger vers la page en cours (et ainsi annuler la navigation) avant que le navigateur ait la possibilité de le décharger de la mémoire.

Comme il fonctionne en court-circuitant la navigation directement, il ne peut pas être utilisé pour empêcher la fermeture de la page; Cependant, il peut être utilisé pour désactiver le contournement des images.

(function() { 
    var location = window.document.location; 

    var preventNavigation = function() { 
     var originalHashValue = location.hash; 

     window.setTimeout(function() { 
      location.hash = 'preventNavigation' + ~~ (9999 * Math.random()); 
      location.hash = originalHashValue; 
     }, 0); 
    }; 

    window.addEventListener('beforeunload', preventNavigation, false); 
    window.addEventListener('unload', preventNavigation, false); 
})(); 

Avertissement: Vous ne devriez jamais faire cela. Si une page comporte un code de suppression de trame, veuillez respecter les souhaits de l'auteur.

Answer 6

J'ai fini avec cette version légèrement différente:

var dirty = false; 
window.onbeforeunload = function() { 
    return dirty ? "If you leave this page you will lose your unsaved changes." : null; 
} 

Ailleurs, je mis le drapeau sale vrai lorsque le formulaire est salie (ou je veux autrement pour empêcher la navigation loin). Cela me permet de contrôler facilement si l'utilisateur reçoit ou non l'invite Confirmer la navigation.

Avec le texte de la réponse sélectionnée vous voyez les invites redondantes:

Answer 7

L'équivalent à la réponse acceptée dans jQuery 1.11:

$(window).on("beforeunload", function() { 
    return "Please don't leave me!"; 
}); 

JSFiddle example

réponse de altCognito utilisée l'événement unload, qui arrive trop tard pour que JavaScript arrête la navigation tion.

Answer 8

L'équivalent d'une manière plus moderne et compatible avec le navigateur, en utilisant les API addEventListener modernes.

window.addEventListener("beforeunload", function (e) { 
    var confirmationMessage = "\o/"; 

    e.returnValue = confirmationMessage;  // Gecko and Trident 
    return confirmationMessage;    // Gecko and WebKit 
}); 

Source: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload