web-dev-qa-db-fra.com

Désactiver le bouton Précédent du navigateur

Comment désactiver le bouton RETOUR du navigateur (entre navigateurs)?

asp.netjavascript
95
priyanka.sarkar

Cette question est très similaire à celle-ci one ...

Vous devez forcer le cache à expirer pour que cela fonctionne. Placez le code suivant sur votre code de page derrière.

Page.Response.Cache.SetCacheability(HttpCacheability.NoCache)
24
RSolberg

Ne désactivez pas le comportement attendu du navigateur. 

Assurez-vous que vos pages gèrent la possibilité que les utilisateurs reviennent d'une page ou deux; n'essayez pas de paralyser leur logiciel.

59
Jonathan Fingland

Je suis venu avec un petit bidouillage qui désactive le bouton retour en utilisant JavaScript. Je l'ai vérifié sur Chrome 10, Firefox 3.6 et IE9:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit the back button!
</body>
</html>

Qu'est-ce que ça fait?

De Commentaires:

Ce script exploite le fait que les navigateurs considèrent ce qui vient après le signe "#" dans l'URL dans l'historique de navigation. Voici ce qu'il fait: lorsque la page est chargée, "# 1" est ajouté à l'URL. Après 50ms, le "1" est supprimé. Lorsque l'utilisateur clique sur "retour", le navigateur modifie l'URL comme avant la suppression du "1", MAIS - c'est la même page Web, le navigateur n'a donc pas besoin de recharger la page. - Yossi Shasho

45
Yossi Shasho

D'autres ont pris l'approche de dire "ne fais pas ça" mais cela ne répond pas vraiment à la question de l'affiche. Supposons simplement que tout le monde sait que c'est une mauvaise idée, mais nous sommes curieux de savoir comment cela se passe quand même ...

Vous ne pouvez pas désactiver le bouton Précédent sur le navigateur d'un utilisateur, mais vous pouvez faire en sorte que votre application se casse (affiche un message d'erreur, obligeant l'utilisateur à recommencer) si l'utilisateur revient en arrière.

Pour ce faire, une approche consiste à transmettre un jeton à chaque URL de l'application et à chaque formulaire. Le jeton est régénéré sur chaque page et une fois que l'utilisateur charge une nouvelle page, tous les jetons des pages précédentes sont invalidés.

Lorsque l'utilisateur charge une page, celle-ci n'affiche que si le jeton correct (attribué à tous les liens/formulaires de la page précédente) lui a été transmis.

L'application bancaire en ligne fournie par ma banque est la suivante. Si vous utilisez le bouton Précédent, plus aucun lien ne fonctionnera et plus aucun rechargement de page ne pourra être effectué. Au lieu de cela, vous verrez une notification vous indiquant que vous ne pouvez pas revenir en arrière et vous devez recommencer.

34
thomasrutter

Pendant que je cherche moi-même la réponse, "Les meilleures pratiques" sont ... obsolètes ... Tout comme les navigateurs.

La solution la meilleure/la plus sûre serait que les navigateurs implémentent une méthode/demande dans laquelle l’utilisateur peut accorder à la page la possibilité de contrôler l’interface.

Pourquoi? Parce que pour mon projet actuel, je construis une interface 100% construite et contrôlée par JavaScript. (C'est-à-dire très vite et sans page-flash à cause d'un rafraîchissement .. Juste comme une vraie application!)

Je sais pourquoi la possibilité de "détourner" l'interface n'est pas là, et je le comprends. Mais au moins nous devrions avoir la possibilité de le demander à partir du navigateur! Maintenant, ce serait vraiment la "meilleure pratique" sans les dangers du highjack.

Mais les navigateurs étant des navigateurs .. Je ne m'attends pas à quoi que ce soit qui se passe à cet égard.

10
StellarDevil

Je cherchais la même question et j'ai trouvé le code suivant sur un site. Pensé pour le partager ici:

function noBack()
{
   window.history.forward()
}
noBack();
window.onload = noBack;
window.onpageshow = function(evt){ if(evt.persisted) noBack(); }
window.onunload = function(){ void(0); }

Cependant, comme indiqué par les utilisateurs ci-dessus, ceci n'est jamais une bonne pratique et doit être évité pour toutes les raisons.

4
user704988

J'ai également eu le même problème, utiliser cette fonction de script Java sur la balise head ou dans son, il fonctionne à 100%, ne vous laisse pas revenir.

 <script type = "text/javascript" >
      function preventBack(){window.history.forward();}
        setTimeout("preventBack()", 0);
        window.onunload=function(){null};
    </script>
2
Ayaat Shifa
<body onLoad="if(history.length>0)history.go(+1)">
2
London

Il y a eu quelques implémentations différentes. Il existe une solution flash et certaines solutions iframe/frame pour IE. Regarde ça 

http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

BTW: Il existe une foule de raisons valables pour désactiver (ou au moins empêcher une étape à la fois) de retourner à un bouton - regardez gmail comme exemple mettant en œuvre la solution de hachage décrite dans l'article ci-dessus.

Google "ajax a cassé le bouton Précédent" et vous trouverez de nombreux articles sur les tests utilisateur et la validité de la désactivation du bouton Retour.

2
DallinDyer

Si vous utilisez la technologie côté client, vous pouvez la contourner. Javascript peut être désactivé, par exemple. Ou l'utilisateur peut exécuter un script JS pour contourner vos restrictions.

Mon hypothèse est que vous ne pouvez le faire que par un suivi côté serveur de la session utilisateur et en redirigeant (comme dans Server.Transfer, pas Response.Redirect) l'utilisateur/navigateur vers la page requise.

2
devio

Essayez ce code. Travaillé pour moi Il change fondamentalement le hachage dès le chargement de la page, ce qui change la page d'historique récente en ajoutant "1" à l'URL. Ainsi, lorsque vous appuyez sur le bouton de retour, il redirige à chaque fois la même page.

 <script type="text/javascript">
    var storedHash = window.location.hash;
    function changeHashOnLoad() { window.location.hash = "1";}
    window.onhashchange = function () {
        window.location.hash = storedHash;
    }
</script>

<body onload="changeHashOnLoad(); ">

</bod>
0
P Shrestha

Cela semble avoir fonctionné pour nous.

history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
    history.pushState(null, null, $(location).attr('href'));
});
0
jgabb

Au lieu d'essayer de désactiver le bouton Précédent du navigateur, il est préférable de le prendre en charge. NET .. 3.5 peut très bien gérer les boutons Précédent (Suivant) du navigateur. Recherche avec Google: "Scriptmanager EnableHistory". Vous pouvez contrôler les actions utilisateur qui ajouteront une entrée à l'historique du navigateur (ScriptManager -> AddHistoryPoint) et votre application ASP.NET recevra un événement chaque fois que l'utilisateur cliquera sur les boutons Précédent/Suivant du navigateur. Cela fonctionnera pour tous les navigateurs connus

0
Corne

SI vous devez supprimer doucement les touches de suppression et de retour arrière de votre application Web afin que la page ne soit pas redirigée de manière inattendue, vous pouvez utiliser ce code:

window.addEventListener('keydown', function(e) {
  var key = e.keyCode || e.which;
  if (key == 8 /*BACKSPACE*/ || key == 46/*DELETE*/) {
    var len=window.location.href.length;
    if(window.location.href[len-1]!='#') window.location.href += "#";
  }
},false);
0
nvd_ai

Essayez ce code . Il vous suffit d’implémenter ce code dans la page maître et cela fonctionnera pour vous sur toutes les pages.

<script type="text/javascript">
    window.onload = function () {
        noBack();
    }
    function noBack() {
        window.history.forward();
    }
</script>
<body  onpageshow="if (event.persisted) noBack();">
</body>
0
Suhaib Janjua

Même j’avais fait face à la même situation auparavant… et je n’avais aucune aide… __. Essayez ces choses, peut-être que cela fonctionnera pour vous

dans la page de connexion <head> tag:

<script type="text/javascript">
    window.history.forward();
</script>

dans le bouton de déconnexion, j'ai fait ceci:

protected void Btn_Logout_Click(object sender, EventArgs e)      
{
    connObj.Close();
    Session.Abandon();
    Session.RemoveAll();
    Session.Clear();
    HttpContext.Current.Session.Abandon();
}

et sur la page de connexion, j'ai mis le focus sur la zone de texte Nom d'utilisateur comme ceci:

protected void Page_Load(object sender, EventArgs e)
{
    _txtUsername.Focus();
}

j'espère que cela vous aidera ....__:) quelqu'un m'apprendra comment éditer cette page ...

0
Robin
<script>
    $(document).ready(function() {
        function disableBack() { window.history.forward() }

        window.onload = disableBack();
        window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
    });
</script>
0
chetan

Le problème avec Code de Yossi Shasho est que la page défile vers le haut toutes les 50 ms. J'ai donc modifié ce code. Maintenant, cela fonctionne très bien sur tous les navigateurs modernes, IE8 et supérieur

var storedHash = window.location.hash;
function changeHashOnLoad() {
    window.location.href += "#";
    setTimeout("changeHashAgain()", "50");
}

function changeHashAgain() {
    window.location.href += "1";
}

function restoreHash() {
    if (window.location.hash != storedHash) {
        window.location.hash = storedHash;
    }
}

if (window.addEventListener) {
    window.addEventListener("hashchange", function () {
        restoreHash();
    }, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", function () {
        restoreHash();
    });
}
$(window).load(function () { changeHashOnLoad(); });
0
Vishnu T S

Vous devriez utiliser des publications avec les bons expires et la mise en cache des en-têtes.

0
epascarello

Globalement, la désactivation du bouton Retour est en effet une mauvaise pratique. Mais, dans certaines situations, la fonctionnalité du bouton de retour n'a pas de sens. 

Voici un moyen d'éviter la navigation indésirable entre les pages:

Première page (fichier top.php): 

<?php
    session_start();
    $_SESSION[pid]++;
    echo "top page $_SESSION[pid]";
    echo "<BR><a href='secondary.php?pid=$_SESSION[pid]'>secondary page</a>";
?>

Page secondaire (fichier secondary.php): 

<?php
    session_start();
    if ($_SESSION[pid] != $_GET[pid]) 
        header("location: top.php");
    else {
        echo "secondary page $_SESSION[pid]";
        echo "<BR><a href='top.php'>top</a>";
    }
?>

L’effet est d’autoriser la navigation de la page supérieure vers la page secondaire et vers l’arrière (par exemple, Annuler) à l’aide de vos propres liens. Cependant, une fois revenu à la page d'accueil, le bouton Précédent du navigateur ne peut pas accéder à la page secondaire.

0
Anono Mouser