web-dev-qa-db-fra.com

Comment arrêter le bouton Précédent du navigateur à l'aide de javascript

Je fais une application de quiz en ligne en php. Je veux empêcher l'utilisateur de revenir à un examen. J'ai essayé le script suivant mais il arrête mon chronomètre. Que devrais-je faire?

J'ai inclus le code source. La minuterie est stockée dans cdtimer.js

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

J'ai la minuterie d'examen qui prend une durée pour l'examen à partir d'une valeur mysql. La minuterie démarre en conséquence, mais elle s’arrête lorsque je mets le code pour désactiver le bouton Précédent. Quel est mon problème?

127
Sawant Akshay

Il y a de nombreuses raisons pour lesquelles la désactivation du bouton Précédent ne fonctionnera pas vraiment. Votre meilleur pari est d'avertir l'utilisateur:

window.onbeforeunload = function() { return "Your work will be lost."; };

Cette page répertorie un certain nombre de manières que vous pouvez essayer de désactiver le bouton Précédent, mais aucune n'est garantie:

http://www.irt.org/script/311.htm

146
ColinE

Il est généralement déconseillé de remplacer le comportement par défaut du navigateur Web. Le script côté client ne dispose pas du privilège suffisant pour le faire pour des raisons de sécurité.

Il y a aussi peu de questions similaires posées,

Vous ne pouvez pas désactiver le bouton Précédent du navigateur. Cependant, vous pouvez faire de la magie en utilisant votre logique pour empêcher l'utilisateur de revenir en arrière, ce qui créerait une impression comme si elle était désactivée. Voici comment, consultez l'extrait suivant.

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var Elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (Elm !== 'input' && Elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

Ceci est en JavaScript pur afin que cela fonctionne dans la plupart des navigateurs. Cela désactiverait également la touche retour arrière , mais la touche fonctionnerait normalement dans les champs input et textarea.

Configuration recommandée:

Placez cet extrait dans un script séparé et incluez-le sur une page où vous souhaitez ce comportement. Dans la configuration actuelle, il exécutera l'événement onload de DOM, qui constitue le point d'entrée idéal pour ce code.

Fonctionne avec DEMO!

Testé et vérifié dans les navigateurs suivants,

  • Chrome.
  • Firefox.
  • IE (8-11) et Edge.
  • Safari.
115
Rohit416
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script> 
66
vrfvr

Je suis tombé sur ce problème et recherchais une solution qui fonctionnait correctement et "bien" sur divers navigateurs, y compris Mobile Safari (iOS9 au moment de la publication). Aucune des solutions n'était tout à fait juste. Je propose ce qui suit (testé sur IE11, FireFox, Chrome et Safari):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

Notez les points suivants:

  • history.forward() (mon ancienne solution) ne fonctionne pas sur Mobile Safari - il semble ne rien faire (c'est-à-dire que l'utilisateur peut toujours revenir en arrière). history.pushState() fonctionne sur tous.
  • le 3ème argument de history.pushState() est un rl. Les solutions qui passent une chaîne telle que 'no-back-button' ou 'pagename' semblent fonctionner correctement, jusqu'à ce que vous essayiez ensuite d'actualiser/recharger sur la page. Une erreur "Page introuvable" est alors générée lorsque le navigateur tente de générer une erreur. pour localiser une page avec cela comme URL. (Le navigateur est également susceptible d'inclure cette chaîne dans la barre d'adresse lorsque la page est moche.) location.href doit être utilisé pour l'URL.
  • le 2e argument de history.pushState() est un titre. En regardant autour du Web, la plupart des sites disent qu'il n'est "pas utilisé", et toutes les solutions proposées ici passent null pour cela. Cependant, dans Mobile Safari au moins, cela place l’URL de la page dans la liste déroulante historique à laquelle l’utilisateur peut accéder. Mais quand il ajoute normalement une entrée pour une visite de page, il insère son titre, ce qui est préférable. Donc, passer document.title pour cela entraîne le même comportement.
57
JonBrave

Ce code désactivera le bouton Précédent pour les navigateurs modernes prenant en charge l’API d’historique HTML5. Dans des circonstances normales, appuyer sur le bouton Précédent ramène à la page précédente. Si vous utilisez history.pushState (), vous commencez à ajouter des sous-étapes supplémentaires à la page en cours. La façon dont cela fonctionne est la suivante: si vous utilisiez history.pushState () trois fois, puis appuyez sur le bouton Précédent, les trois premières fois qu'il reviendrait dans ces sous-étapes, puis la quatrième fois, il reviendrait à la page précédente.

Si vous combinez ce comportement avec un écouteur d'événement sur l'événement popstate, vous pouvez essentiellement configurer une boucle infinie de sous-états. Donc, vous chargez la page, appuyez sur un sous-état, puis appuyez sur le bouton retour, ce qui ouvre un sous-état et en pousse un autre, de sorte que si vous appuyez à nouveau sur le bouton Retour, il ne manquera jamais de sous-états pour pousser . Si vous estimez qu'il est nécessaire de désactiver le bouton Précédent, vous y arriverez.

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
25
Jeremy Warne

C'est comme ça que je pourrais le faire. Changer bizarrement la fenêtre. La localisation n’a pas fonctionné correctement dans chrome et safari. Il arrive que location.hash ne crée pas d'entrée dans l'historique pour chrome et safari. Donc, vous devrez utiliser le pushstate. Cela fonctionne pour moi dans tous les navigateurs.

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };
12
Sanchitos
<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
9
Ashwin Patil
    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };
9

Cet article sur jordanhollinger.com est la meilleure option que je ressens. Semblable à la réponse de Razor mais un peu plus clair. Code ci-dessous; crédits complets à Jordan Hollinger:

Page précédente:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

Page de non-retour JavaScript:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}
8
dav_i
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

Ce javascript ne permet à aucun utilisateur de revenir en arrière (fonctionne sous Chrome, FF, IE, Edge)

7
Surajit Mitra

Pour limiter l'événement arrière du navigateur

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
7
Fezal halai

Essayez-le facilement:

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
5
Lakhan

Fonction très simple et propre pour casser la flèche arrière sans interférer avec la page par la suite.

Avantages:

  • Charge instantanément et restaure le hachage d'origine, de sorte que l'utilisateur ne soit pas distrait par l'URL qui change visiblement.
  • L’utilisateur peut toujours quitter en appuyant 10 fois sur la touche (c’est une bonne chose), mais pas accidentellement.
  • Aucune interférence utilisateur comme les autres solutions utilisant onbeforeunload
  • Il ne fonctionne qu'une fois et n'interfère pas avec d'autres manipulations de hachage au cas où vous l'utiliseriez pour suivre l'état
  • Restaure le hachage d'origine, donc presque invisible.
  • Utilise setInterval pour ne pas briser les navigateurs lents et fonctionne toujours.
  • Javascript pur ne nécessite pas d’historique HTML5, fonctionne partout.
  • Unobrusive, simple, et joue bien avec les autres codes.
  • N'utilise pas unbeforeunload qui interrompt l'utilisateur avec le dialogue modal.
  • Cela fonctionne sans problème.

Remarque: certaines des autres solutions utilisent onbeforeunload. Veuillez ne pas le faire utilisez onbeforeunload à cette fin. Une boîte de dialogue s'affiche chaque fois que les utilisateurs tentent de fermer la fenêtre, de cliquer sur la touche Retour, etc. Des modaux tels que onbeforeunload ne conviennent généralement que dans des circonstances rares, par exemple quand ils ont réellement apporté des modifications à l'écran et ne les ont pas sauvegardées, pas à cette fin.

Comment ça marche

  1. Exécute au chargement de la page
  2. Enregistre votre hachage d'origine (s'il en existe un dans l'URL).
  3. Ajoute séquentiellement #/noop/{1..10} au hachage
  4. Restaure le hachage d'origine

C'est ça. Pas plus de déconner, pas de surveillance des événements en arrière-plan, rien d'autre.

tilisez-le en une seconde

Pour le déployer, ajoutez simplement ceci n'importe où sur votre page ou dans votre JS:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>
3
Jamieson Becker

Cela semble avoir fonctionné pour nous en désactivant le bouton Précédent du navigateur, ainsi que le bouton de retour arrière qui vous ramène en arrière.

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

Dans un navigateur moderne, cela semble fonctionner:

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)
1

Je crois que la solution parfaite et pourtant est en fait assez simple, que j'ai utilisée pendant de nombreuses années maintenant.

Il s'agit essentiellement d'affecter l'événement "onbeforeunload" de la fenêtre ainsi que les événements "mouseenter"/"mouseleave" du document en cours, de sorte que l'alerte ne se déclenche que lorsque les clics sont en dehors de la portée du document (ce qui pourrait alors être le bouton Précédent ou Suivant du navigateur).

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
1
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
1
user3789888

Vous ne pouvez tout simplement pas et ne devriez pas faire cela. Cependant, mais cela pourrait être utile

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

Fonctionne dans mon chrome et firefox

1
Shailendra Sharma

Essayez ceci pour empêcher le bouton de retour arrière dans IE qui agit par défaut comme "Retour":

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>
1
Ajit Kamble

Je crée une page HTML (index.html). Je crée également un un (mécanisme.js) dans un dossier/répertoire (script). Ensuite, je dépose tout mon contenu dans (index.html) en utilisant les balises form, table, span et div en fonction des besoins. Maintenant, voici le truc qui va faire en arrière/en avant ne rien faire!

Tout d'abord, le fait que vous n'ayez qu'une seule page! Deuxièmement, l'utilisation de JavaScript avec les balises span/div pour masquer et afficher du contenu sur la même page lorsque cela est nécessaire via des liens normaux!

Dans 'index.html':

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

À l'intérieur de 'mécanisme.js':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

Il a l'air poilu, mais notez les noms de fonction et les appels, le code HTML incorporé et les appels d'id de balise span. C'était pour montrer comment vous pouvez injecter du code HTML différent dans la même balise span sur la même page! Comment Back/Forward peut-il affecter cette conception? Cela ne peut pas, parce que vous cachez des objets et que vous en remplacez d'autres sur la même page!

Comment cacher et afficher? Va ici: Dans les fonctions internes de 'mécanisme.js' selon les besoins, utilisez:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

À l'intérieur des fonctions d'appel 'index.html' via des liens:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

et

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

J'espère que je ne vous ai pas donné mal à la tête. Désolé si je l'ai fait :-)

0
hacker1033

Dans mon cas, c'était une commande d'achat. Donc, ce que j'ai fait était de désactiver le bouton. Lorsque l'utilisateur a cliqué en arrière, le bouton était toujours désactivé. Quand ils ont cliqué une dernière fois en arrière, puis sur un bouton de page pour avancer. Je savais que leur commande avait été soumise et passée à une autre page.

Dans le cas où la page serait réellement actualisée, ce qui rendrait le bouton (théoriquement) disponible; J'ai alors pu réagir dans le chargement de page que la commande est déjà soumise et rediriger ensuite.

0
Valamas
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
0
Kamlesh