web-dev-qa-db-fra.com

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

Comment empêcher une page Web de naviguer en utilisant JavaScript?

javascriptonbeforeunload
111
Software Enthusiastic

Utiliser onunload vous permet uniquement d’afficher des messages, mais cela n’interrompra pas la navigation (car il est trop tard). Cependant, vous pouvez utiliser onbeforeunload et cela interrompra la navigation:

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

Edit: Suppression de confirm() dans l'instruction return car cela a provoqué une fenêtre de confirmation comme prévu, mais affiche également une seconde confirmation avec le résultat de la première confirmation.

136
Jimmie R. Houts

Contrairement aux autres méthodes présentées ici, ce bit de code ne provoquera pas le navigateur à afficher un avertissement demandant à l'utilisateur s'il souhaite partir; au lieu de cela, il exploite la nature événementielle du DOM pour rediriger vers la page actuelle (et donc annuler la navigation) avant que le navigateur ne puisse le décharger de la mémoire.

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

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

Disclaimer: Vous ne devriez jamais faire cela. Si une page comporte un code qui casse l'image, veuillez respecter les souhaits de l'auteur.

23
anarchocurious

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 mets le drapeau sale à vrai lorsque le formulaire est sale (ou je veux autrement empêcher la navigation). Cela me permet de contrôler facilement si l'utilisateur reçoit ou non l'invite de confirmation de navigation.

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

enter image description here

14
Danger

Dans l'exemple d'Ayman en renvoyant la valeur false, vous empêchez la fermeture de la fenêtre/onglet du navigateur.

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

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

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

5
Paul Weber

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

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

exemple JSFiddle

la réponse de altCognito a utilisé l'événement unload, qui arrive trop tard pour que JavaScript annule la navigation.

4
BoffinbraiN

Utilisez onunload .

Pour jQuery, je pense que cela fonctionne comme suit:

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

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 sont affichés l'un après l'autre dans la même fenêtre.

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

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

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

Ou style stackoverflow: "Vous avez commencé à écrire ou à éditer un article."

2
Curtis Yallop

Si vous attrapez un bouton précédent/suivant du navigateur et que vous ne voulez pas vous échapper, vous pouvez utiliser:

window.addEventListener('popstate', function() {
    if (window.location.Origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

Sinon, vous pouvez utiliser l'événement beforeunload , mais le message peut ne pas fonctionner sur plusieurs navigateurs et nécessite le renvoi de quelque chose qui force un invite intégré.

1
bit-less