comment arrêter le bouton de retour du navigateur en utilisant javascript

156

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

J'ai inclus le code source. Le minuteur est stocké 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 le minuteur d'examen qui prend une durée pour l'examen à partir d'une valeur mysql . Le minuteur démarre en conséquence, mais il s'arrête lorsque je mets le code pour désactiver le bouton de retour. Quel est mon problème?

javascript browser Sawant Akshay
la source

pour nodeJS détecter et arrêter l'événement du bouton de retour du navigateur

Darshan Dixit

158

Il existe de nombreuses raisons pour lesquelles la désactivation du bouton de retour 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 façons dont vous pouvez essayer de désactiver le bouton de retour, mais aucune n'est garantie:

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

Coline
la source

Vous devez vérifier votre code PHP si la réponse a déjà été soumise et si c'est le cas, la rejeter.

Sela Yair

4

Il convient de mentionner que les choses ont maintenant changé dans les navigateurs modernes: voir stackoverflow.com/questions/19926641

...

129

C'est généralement une mauvaise idée de remplacer le comportement par défaut du navigateur Web. Le script côté client ne dispose pas des privilèges suffisants pour effectuer cette opération pour des raisons de sécurité.

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

Vous ne pouvez pas réellement désactiver le bouton de retour 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éera une impression comme si elle était désactivée. Voici comment consulter l'extrait de code 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, donc cela fonctionnerait dans la plupart des navigateurs. Cela désactiverait également la touche de retour arrière, mais la clé fonctionnera normalement dans les inputchamps et textarea.

Configuration recommandée:

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

DEMO fonctionnant!

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

Chrome.
Firefox.
IE (8-11) et Edge.
Safari.

Rohit416
la source

1

Je ne comprends pas pourquoi le setTimeout. Si j'ajoute simplement #! à l'emplacement et supprimer le setTimeout, cela fonctionne toujours.

baraber

oui c'est vrai, cela fonctionnera, mais si je dois me rappeler quelque chose de la mémoire quand j'ai eu cela à la première place ... le flux ne fonctionnait pas correctement dans chrome comme dans d'autres navigateurs. Chrome a renvoyé le vide au location.hashdépart, ce qui m'a obligé à le faire comme ça. Il pourrait y avoir plus d'amélioration à cela, mais 50 ms une seule fois ne m'a pas coûté beaucoup, alors je m'en tiens là.

Rohit416

Oh, c'était un défi de mémoire, merci :) J'ai utilisé votre solution, mais j'ai remplacé le setInterval par le gestionnaire .onhashchange. Fonctionne parfaitement. Mais j'ai une autre question cependant: pourquoi faire "if (global.location.hash! = _Hash)"? Je pense que cette condition ne peut être vraie que tout le temps car window.location.hash devrait toujours renvoyer le hachage avec le caractère «#» et _hash ne contiendra jamais le caractère «#». Vous souvenez-vous de quelque chose à ce sujet? Est-ce juste une protection au cas où le navigateur ne renvoie pas le caractère «#» dans location.hash?

baraber

J'ai créé un fichier .js comme recommandé et inclus le fichier js dans mon code en utilisant ce qui suit: <script src = "./ javascript / noback.js"> </script> Mais je peux toujours effectuer un retour (en utilisant Safari). Qu'est-ce que je rate? Cette bibliothèque a été ajoutée de la même manière que les autres bibliothèques que j'utilise, donc l'inclusion est bonne.

Tim

1

Bloque le bouton de retour sur iPad Air, iOS 8

plugincontainer

75

Je suis tombé sur cela, ayant besoin d'une solution qui fonctionnait correctement et "bien" sur une variété de navigateurs, y compris Mobile Safari (iOS9 au moment de la publication). Aucune des solutions n'était tout à fait correcte. 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 ce qui suit:

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 une URL . Solutions qui transmettent une chaîne comme 'no-back-button'ou 'pagename'semblent fonctionner correctement, jusqu'à ce que vous essayiez ensuite une actualisation / rechargement sur la page, à quel point une erreur «Page non trouvée» est générée lorsque le navigateur essaie de localiser une page avec cette comme URL. (Le navigateur est également susceptible d'inclure cette chaîne dans la barre d'adresse lorsqu'il est sur la page, ce qui est moche.) location.hrefDoit être utilisé pour l'URL.
le 2ème argument history.pushState()est un titre . En regardant autour du Web, la plupart des endroits disent qu'il n'est "pas utilisé", et toutes les solutions ici passent nullpour cela. Cependant, dans Mobile Safari au moins, cela place l'URL de la page dans le menu déroulant de l'historique auquel l'utilisateur peut accéder. Mais lorsqu'il ajoute normalement une entrée pour une page visitée, il met son titre , ce qui est préférable. Donc, passer document.titlepour cela entraîne le même comportement.

JonBrave
la source

3

C'est la bonne réponse. Fonctionne parfaitement sur Chrome, IE 11, Firefox et Edge.

Concept211

3

Cela devrait être la réponse acceptée, c'est multiplateforme et fonctionne très bien.

calbertts

dans jsp sevlet Après avoir soumis, je rafraîchis la page. page non affichée (erreur)

Madhuka Dilhan

Meilleure solution jusqu'à présent, mais ne fonctionne probablement pas dans les navigateurs plus anciens

j4n7

2

Solution parfaite pour les navigateurs modernes. J'ai combiné avec la réponse @ Rohit416 pour prendre en charge un navigateur plus ancien en utilisant simplement la condition typeof (history.pushState) === "fonction" fonctionne bien.

Miklos Krivan

74

<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>

vrfvr
la source

3

Génie! Je l'ai utilisé pour éviter le déclenchement accidentel du bouton Retour lorsque l'utilisateur frappe Retour arrière (sur les champs désactivés / en lecture seule, par exemple) dans une application Web où le retour / l'avant n'avait pas vraiment de sens de toute façon. Confirmé désactive la fonctionnalité de retour et de retour (mais pas les boutons eux-mêmes), y compris l'option de menu contextuel; vérifié dans IE8 à IE11, Chrome et FF.

rien n'est nécessaire

1

Cela fonctionne, mais réinitialise toutes les données entrées dans les zones de texte. Est-il possible d'empêcher le défrichage?

Somnium

6

Cela a fonctionné pour moi sur Firefox, mais pas sur Chrome (version 36.0.1985.143)

baraber

Cela a fonctionné pour moi aussi, mais sur Firefox, cela semble casser la window.history.back()fonction. Nous voulons empêcher les utilisateurs de cliquer sur le bouton de retour du navigateur, mais dans certains cas, nous fournissons notre propre bouton de retour sur la page. Y a-t-il un moyen de le faire fonctionner?

AsGoodAsIt Obtient

1

Cela ne fonctionne pas pour moi. J'utilise la version 55 de Chrome sur Windows 10. Je place le script à plusieurs endroits (début d'en-tête, fin de corps, etc.) et je peux toujours utiliser le bouton retour pour revenir à la page précédente.

Victor Stoddard

28

Ce code désactivera le bouton de retour pour les navigateurs modernes qui prennent en charge l'API HTML5 History. Dans des circonstances normales, le fait d'appuyer sur le bouton retour permet de revenir d'une étape à la page précédente. Si vous utilisez history.pushState (), vous commencez à ajouter des sous-étapes supplémentaires à la page actuelle. La façon dont cela fonctionne est, si vous deviez utiliser history.pushState () trois fois, puis commencez à appuyer sur le bouton de retour, les trois premières fois, 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' popstateévénement, 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 de retour, qui fait apparaître un sous-état et en pousse également un autre, donc si vous appuyez à nouveau sur le bouton de retour, il ne manquera jamais de sous-états pour appuyer . Si vous pensez qu'il est nécessaire de désactiver le bouton de retour, cela vous y mènera.

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

Jeremy Warne
la source

2

Sur n'importe quel navigateur, essayez une page Actualiser / Recharger après cela, et vous serez bloqué sur une erreur "Page non trouvée", car il essaie de trouver une page nommée no-back-button... (Le navigateur est également susceptible de s'afficher no-back-buttondans l'adresse bar aussi, qui semble moche.) Pour être juste, ce n'est pas la seule solution ici qui en souffre. Le 3ème argument de history.pushState()est une url , et doit être l'url de votre page actuelle: utilisez à la location.hrefplace.

JonBrave

4

Cela a fonctionné pour moi. Changez simplement "no-back-button" en "window.top.location.pathname + window.top.location.search" et il restera le nom de la page sur laquelle vous vous trouvez, même en cours d'actualisation

Steve

Entre autres, cela a fonctionné pour moi, upvote. Reportez-vous à stackoverflow.com/questions/19926641/… .

user2171669

J'ai exploré de nombreux cas, et c'est la meilleure solution pour un site d'une page

djdance

C'est une très mauvaise solution car vous modifiez l'URL, donc si vous appuyez plusieurs fois en arrière et en avant, Chrome redirigera vers un chemin qui n'existe pas

Tallboy

21

Pour l'événement de retour de restriction du navigateur

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

Fezal halai
la source

1

Cela fonctionne très bien sur chrome !, pourquoi les gens ne votent pas car c'est la meilleure réponse?

Tarık Seyceri le

1

Je viens de le tester avec le système d'exploitation Windows 10 sur les navigateurs suivants (fonctionne très bien) Chrome Version 74.0.3729.108 (version officielle) (64 bits) Chrome Canary Version 76.0.3780.0 (version officielle) canary (32 bits) Chromium Version 66.0. 3355.0 (version développeur) (64 bits) Firefox 66.0.3 (64 bits) EDGE IE 11 Safari 5.1.7

Tarık Seyceri

2

@ TarıkSeyceri parce que cela ne fonctionne que sur les navigateurs qui a) prennent en charge l'API d'historique b) la page utilise en fait l'API d'historique pour gérer l'état

givanse

Ne fonctionne plus dans Chrome après la version 75. Voir: support.google.com/chrome/thread/8721521?hl=en

gene b.

13

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

Eng Mahmoud El Torri
la source

12

Bien que cela puisse être une réponse valable, vous êtes beaucoup plus susceptible d'aider les autres en expliquant ce que fait le code et comment il fonctionne. Les réponses basées uniquement sur le code ont tendance à recevoir une attention moins positive et ne sont pas aussi utiles que les autres réponses.

Aurora0001

Testé sur Chrome, Firefox, IE et Edge. Ça marche bien. Tu m'as sauvé.

Nooovice Boooy

12

C'est ainsi que j'ai pu l'accomplir. Étrangement, changer l'emplacement de la fenêtre n'a pas fonctionné correctement dans Chrome et Safari. Il arrive que l'emplacement.hash ne crée pas d'entrée dans l'historique pour Chrome et Safari. Vous devrez donc 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";

    };

Sanchitos
la source

1

Cela ne fonctionne pas dans IE9 et les versions antérieures, pushState n'est pas pris en charge.

Alex

Génial. C'est une bonne approche et fonctionne dans presque tous les derniers navigateurs.

Venugopal M

1

Fonctionne très bien dans les IE ultérieurs. Il suffit de mettre directement dans le document.ready: $(document).ready(function () { .... });

Oppa Gingham Style

Gardez à l'esprit que vous devez ajouter votre uri actuel avant "#nbb". ie "account # nbb"

Mladen Janjetovic

9

<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>

Ashwin Patil
la source

Y a-t-il de la documentation quelque part event.persisted?

Muhd

1

Voici le lien trouvé pour votre question. Trouvez-le ici @Muhd

rbashish

Je viens d'essayer celui-ci, ne fonctionne pas

Pedro Joaquín

8

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

Page avant:

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

Page de JavaScript sans retour:

// 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'
    }
  }
}

dav_i
la source

8

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 dans Chrome, FF, IE, Edge)

Surajit Mitra
la source

5

Essayez-le facilement:

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

Lakhan
la source

5

Ce code a été testé avec les derniers navigateurs Chrome et Firefox.

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>

Franklin Innocent F
la source

Bienvenue huyhoang.

Franklin Innocent F

3

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

Avantages:

Se 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 sortir en appuyant 10 fois (c'est une bonne chose) mais pas par accident
Aucune interférence de l'utilisateur comme les autres solutions utilisant onbeforeunload
Il ne s'exécute qu'une seule fois et n'interfère pas avec d'autres manipulations de hachage au cas où vous l'utiliseriez pour suivre l'état
Restaure le hash original, donc presque invisible.
Utilisé setIntervalpour ne pas casser les navigateurs lents et fonctionne toujours.
Javascript pur, ne nécessite pas d'historique HTML5, fonctionne partout.
Unobrusive, simple et joue bien avec d'autres codes.
N'utilise pas unbeforeunload ce qui interrompt l'utilisateur avec le dialogue modal.
Cela fonctionne sans problème.

Remarque: certaines des autres solutions utilisent onbeforeunload. Veuillez ne pas utiliser onbeforeunloadà cette fin, qui ouvre une boîte de dialogue chaque fois que les utilisateurs essaient de fermer la fenêtre, appuyez sur la flèche arrière, etc.onbeforeunload habituellement que dans des circonstances rares appropriés, comme quand ils ont effectivement apporté des modifications à l' écran et havre de paix » t les a sauvés, pas dans ce but.

Comment ça fonctionne

S'exécute au chargement de la page
Enregistre votre hachage d'origine (s'il y en a un dans l'URL).
Ajoute séquentiellement # / noop / {1..10} au hachage
Restaure le hachage d'origine

C'est tout. Plus de déconner, pas de surveillance des événements en arrière-plan, rien d'autre.

Utilisez-le en une seconde

Pour 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>

erreur fatale
la source

2

Cela semble avoir fonctionné pour nous en désactivant le bouton de retour sur le navigateur, ainsi que le bouton de retour arrière vous ramenant.

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

jgabb
la source

1

   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>

user3789888
la source

1

Vous ne pouvez et ne devez tout simplement 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

Shailendra Sharma
la source

1

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>

Ajit Kamble
la source

1

Je pense que la solution parfaite est en fait assez simple, que j'utilise depuis de nombreuses années maintenant.

Il s'agit essentiellement d'attribuer l'événement "onbeforeunload" de la fenêtre avec 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 (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."; };
    }
);

Abdelqoddous Rifai
la source

1

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)

Joakim L. Christiansen
la source

1

Je ne sais pas ce qui s'est passé, mais pour une raison quelconque, j'ai refusé cette réponse sur une autre machine. Juste vous faire savoir que ce n'était pas mon intention, mais je ne peux plus annuler le vote: /

Lennard Fonteijn

Aucun sentiment ne fait mal @LennardFonteijn :)

Joakim L. Christiansen

1

Aucune des réponses les plus votées n'a fonctionné pour moi dans Chrome 79 . Il semble que Chrome ait changé son comportement par rapport au bouton Retour après la version 75, voir ici:

https://support.google.com/chrome/thread/8721521?hl=en

Cependant, dans ce fil de discussion Google, la réponse fournie par Azrulmukmin Azmi à la toute fin a fonctionné. C'est sa solution.

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

Le problème avec Chrome est qu'il ne déclenche pas d'événement onpopstate sauf si vous effectuez une action du navigateur (par exemple, appelez history.back). C'est pourquoi je les ai ajoutés au script.

Je ne comprends pas tout à fait ce qu'il a écrit, mais apparemment, un supplément history.back() / history.forward()est maintenant nécessaire pour bloquer Back dans Chrome 75+.

gène b.
la source

Après avoir recherché haut et bas, cela a finalement fonctionné sur les navigateurs Android, où, pour une raison quelconque, l'événement du bouton de retour du navigateur n'a été détecté avec aucun autre script que j'ai essayé. Merci, merci, merci encore! Testé et fonctionne correctement sous Chrome 83 à la fois sur ordinateur et sur mobile! Gene, tu es une bouée de sauvetage!

Ivan le

0

Je crée une page HTML (index.html). Je crée également un (mécanisme.js) dans un dossier / répertoire (script). Ensuite, je place tout mon contenu à l'intérieur de (index.html) en utilisant les balises form, table, span et div selon les besoins. Maintenant, voici le truc qui fera en sorte que le dos / l'avant ne fasse rien!

Tout d'abord, le fait que vous n'ayez qu'une seule page! Deuxièmement, l'utilisation de JavaScript avec des balises span / div pour masquer et afficher le contenu sur la même page en cas de besoin via des liens réguliers!

À l'intérieur de '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;
    }

Cela semble poilu, mais notez les noms et les appels de fonction, le code HTML intégré et les appels d'identifiant de balise span. C'était pour montrer comment vous pouvez injecter différents HTML dans la même balise span sur la même page! Comment l'arrière / l'avant peut-il affecter cette conception? Ce n'est pas possible, car vous cachez des objets et en remplacez d'autres sur la même page!

Comment cacher et afficher? Voici: À l'intérieur des fonctions dans 'mécanisme.js' si nécessaire, 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 :-)

pirate informatique1033
la source

0

Dans mon cas, c'était une commande. J'ai donc désactivé le bouton. Lorsque l'utilisateur a cliqué en arrière, le bouton était toujours désactivé. Lorsqu'ils ont cliqué une fois de plus en arrière, puis ont cliqué sur un bouton de page pour avancer. Je savais que leur commande avait été soumise et je suis 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 lors du chargement de la page que la commande est déjà soumise et rediriger ensuite aussi.

Valamas
la source

0

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

Kamlesh
la source

3

1. Le que javascript:vous avez écrit définit une étiquette JavaScript nommée "javascript". Je doute fort que vous ayez voulu cela; Je soupçonne que vous mélangez href=javascript:...avec des <script>blocs JavaScript . 2. language="JavaScript"cessé d'être un <script>attribut valide en HTML5. 3. Les 2 points ci-dessus n'ont pas beaucoup d'importance; ce qui compte, c'est que history.forward(1)cela ne fonctionne pas dans Mobile Safari (du moins). Utilisez history.pushState()plutôt l' une des réponses.

JonBrave

0

Vous pouvez simplement mettre un petit script puis vérifier. Cela ne vous permettra pas de visiter la page précédente. Cela se fait en javascript.

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

La fonction window.onunload se déclenche lorsque vous essayez de visiter la page précédente ou précédente via le navigateur.

J'espère que cela t'aides.

noobprogrammer
la source

0

J'ai eu ce problème avec React.JS. (composant de classe)

Et résoudre facilement

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

J'ai utilisé HashRouterde react-router-dom.

Oo
la source

0

Il suffit de définir location.hash="Something", en appuyant sur le bouton de retour, le hachage sera supprimé de l'url mais la page ne reviendra pas.Cette méthode est bonne pour éviter tout retour accidentel, mais pour des raisons de sécurité, vous devez concevoir votre backend pour éviter de répondre à nouveau

Abhishek
la source

-1

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

Chauncey.Zhong
la source

1 obtenir l'objet événement 2. pour déterminer le type de source d'événement, comme condition de jugement. 3.Lorsque le hit Backspace, le type de source d'événement pour le mot de passe ou le single, et la propriété readonly sur true ou enabled est false, la clé de retour arrière échoue. Lorsque vous appuyez sur Retour arrière, la source de l'événement tape le mot de passe ou unique, est l'échec de la touche de retour arrière

Chauncey.Zhong

La question concerne l'utilisation du bouton de navigation arrière et non la touche de retour arrière.

Quentin

comment arrêter le bouton de retour du navigateur en utilisant javascript

Réponses:

Configuration recommandée: