How can I stop the browser back button using JavaScript

Question

I am doing an online quiz application in PHP  I want to restrict the user from going back in an exam  I have tried the following script  but it stops my timer  What should I do  The timer is stored in file cdtimer js   lt script type  quot text javascript quot  gt      window history forward        function noBack                 window history forward           lt  script gt    lt body onLoad  quot noBack    quot  onpageshow  quot if  event persisted  noBack    quot  onUnload  quot  quot  gt   I have the exam timer which takes a duration for the exam from a MySQL value  The timer starts accordingly  but it stops when I put the code in for disabling the back button  What is my problem

User · Answer

You can just put a small script and then check. It won't allow you to visit previous page.

This is done in JavaScript.

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

The window.onunload function fires when you try to visit back or previous page through browser.

User · Answer

I create one HTML page  index html   I also create a one  mechanism js  inside a script folder   directory  Then  I lay all my content inside of  index html  using form  table  span  and div tags as needed  Now  here s the trick that will make back   forward do nothing  First  the fact that you have only one page  Second  the use of JavaScript with span   div tags to hide and display content on the same page when needed via regular links  Inside  index html    lt td width  quot 89px quot  align  quot right quot  valign  quot top quot  style  quot letter-spacing 1px  quot  gt       lt small gt           lt b gt               lt a href  quot   quot  class  quot traff quot  onClick  quot DisplayInTrafficTable    quot  gt IN lt  a gt  amp nbsp           lt  b gt       lt  small gt        amp nbsp  lt span id  quot inCountSPN quot  gt 0 lt  span gt  amp nbsp    lt  td gt   Inside  mechanism js   function DisplayInTrafficTable         var itmsCNT   0      var dsplyIn    quot  quot       for  i 0  i lt inTraffic length  i                  dsplyIn     quot  lt tr gt  lt td width  11  gt  lt  td gt  lt td align  right  gt  quot       itmsCNT     quot  lt  td gt  lt td width  11  gt  lt  td gt  lt td gt  lt b gt  quot    inTraffic i     quot  lt  b gt  lt  td gt  lt td width  11  gt  lt  td gt  lt td gt  quot    entryTimeArray i     quot  lt  td gt  lt td width  11  gt  lt  td gt  lt td gt  quot    entryDateArray i     quot  lt  td gt  lt td width  11  gt  lt  td gt  lt  tr gt  quot             document getElementById  inOutSPN   innerHTML            quot  quot             quot  lt table border  0  style  background  fff   gt  lt tr gt  lt th colspan  21  style  background  feb padding 11px   gt  lt h3 style  margin-bottom -1px   gt INCOMING TRAFFIC REPORT lt  h3 gt  quot            DateStamp              quot  amp nbsp  amp nbsp - amp nbsp  amp nbsp  lt small gt  lt a href     style  letter-spacing 1px   onclick  OpenPrintableIn     gt PRINT lt  a gt  lt  small gt  lt  th gt  lt  tr gt  lt tr style  background  eee   gt  lt td gt  lt  td gt  lt td gt  lt b gt     lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt ID   lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td width  79  gt  lt b gt TYPE lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt FIRST lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt LAST lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt PLATE   lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt COMPANY lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt TIME lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt DATE lt  b gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt b gt IN   OUT lt  b gt  lt  td gt  lt td gt  lt  td gt  lt  tr gt  quot            dsplyIn toUpperCase              quot  lt  table gt  quot             quot  quot       return document getElementById  inOutSPN   innerHTML     It looks hairy  but note the function names and calls  embedded HTML  and the span tag id calls  This was to show how you can inject different HTML into same span tag on same page  How can Back Forward affect this design  It cannot  because you are hiding objects and replacing others all on the same page  How can we hide and display  Here goes  Inside functions in   mechanism js   as needed  use  document getElementById  textOverPic   style display    quot none quot     hide document getElementById  textOverPic   style display    quot  quot         display  Inside   index html   call functions through links   lt img src  quot images someimage jpg quot  alt  quot  quot    gt   lt span class  quot textOverPic quot  id  quot textOverPic quot  gt  lt  span gt   and  lt a href  quot   quot  style  quot color  119 font-size 11px text-decoration none letter-spacing 1px  quot  onclick  quot HiddenTextsManager 1   quot  gt Introduction lt  a gt

User · Answer

Just run code snippet right away and try going back  x000D   x000D  history pushState null  null  window location href   history back    window onpopstate        gt  history forward    x000D   x000D   x000D

User · Answer

Try it with ease  history pushState null  null  document title   window addEventListener  popstate   function          history pushState null  null  document title

User · Answer

It is generally a bad idea overriding the default behavior of the web browser  A client-side script does not have the sufficient privilege to do this for security reasons  There are a few similar questions asked as well   How can I prevent the backspace key from navigating back   How can I prevent the browser s default history back action for the backspace button with JavaScript    You can-not actually disable the browser back button  However  you can do magic using your logic to prevent the user from navigating back which will create an impression like it is disabled  Here is how - check out the following snippet   function  global         if typeof  global       quot undefined quot             throw new Error  quot window is undefined quot               var  hash    quot   quot       var noBackPlease   function              global location href     quot   quot               Making sure we have the fruit available for juice                global setTimeout function                  global location href     quot   quot              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  amp  amp   elm      input   amp  amp  elm       textarea                      e preventDefault                                 Stopping the event bubbling up the DOM tree                e stopPropagation                        window    This is in pure JavaScript  so it would work in most of the browsers  It would also disable the backspace key  but that key will work normally inside input fields and textarea  Recommended Setup  Place this snippet in a separate script and include it on a page where you want this behavior  In the current setup it will execute the onload event of the DOM which is the ideal entry point for this code  Working DEMO  It was tested and verified in the following browsers   Chrome  Firefox  Internet  Explorer  8-11  and Edge  Safari

User · Answer

This code will disable the back button for modern browsers which support the HTML5 History API  Under normal circumstances  pushing the back button goes back one step  to the previous page  If you use history pushState    you start adding extra sub-steps to the current page  The way it works is  if you were to use history pushState   three times  then start pushing the back button  the first three times it would navigate back in these sub-steps  and then the fourth time it would go back to the previous page    If you combine this behaviour with an event listener on the popstate event  you can essentially set up an infinite loop of sub-states  So  you load the page  push a sub-state  then hit the back button  which pops a sub-state and also pushes another one  so if you push the back button again it will never run out of sub-states to push  If you feel that it s necessary to disable the back button  this will get you there   history pushState null  null   no-back-button    window addEventListener  popstate   function event      history pushState null  null   no-back-button

User · Answer

Very simple and clean function to break the back arrow without interfering with the page afterward  Benefits   Loads instantaneously and restores original hash  so the user isn t distracted by URL visibly changing  The user can still exit by pressing back 10 times  that s a good thing   but not accidentally No user interference like other solutions using onbeforeunload It only runs once and doesn t interfere with further hash manipulations in case you use that to track state Restores original hash  so almost invisible  Uses setInterval  so it doesn t break slow browsers and always works  Pure JavaScript  does not require HTML5 history  works everywhere  Unobtrusive  simple  and plays well with other code  Does not use unbeforeunload which interrupts user with modal dialog  It just works without fuss   Note  some of the other solutions use onbeforeunload  Please do not use onbeforeunload for this purpose  which pops up a dialog whenever users try to close the window  hit backarrow  etc  Modals like onbeforeunload are usually only appropriate in rare circumstances  such as when they ve actually made changes on screen and haven t saved them  not for this purpose  How It Works  Executes on page load Saves your original hash  if one is in the URL   Sequentially appends   noop  1  10  to the hash Restores the original hash  That s it  No further messing around  no background event monitoring  nothing else  Use It In One Second To deploy  just add this anywhere on your page or in your JavaScript code   lt script gt         Break back button        window onload   function          var i   0        var previous hash   window location hash        var x   setInterval function            i            window location hash    quot  noop  quot    i          if  i  10             clearInterval x             window location hash   previous hash                     10          lt  script gt

User · Answer

lt html gt   lt head gt       lt title gt Disable Back Button in Browser - Online Demo lt  title gt       lt style type  text css  gt          body  input               font-family  Calibri  Arial                 lt  style gt       lt script type  text javascript  gt          window history forward            function noBack                 window history forward                   lt  script gt   lt  head gt   lt body onload  noBack     onpageshow  if  event persisted  noBack     onunload    gt       lt H2 gt Demo lt  H2 gt       lt p gt This page contains the code to avoid Back button  lt  p gt       lt p gt Click here to Goto  lt a href  noback html  gt NoBack Page lt  a gt  lt  p gt   lt  body gt   lt  html gt

User · Answer

Try this to prevent the backspace button in Internet  Explorer which by default acts as  quot Back quot    lt script language  quot JavaScript quot  gt        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   amp  amp                                          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                                       lt  script gt

User · Answer

lt script src  quot   main js quot  type  quot text javascript quot  gt  lt  script gt    lt script type  quot text javascript quot  gt      window history forward         function noBack             window history forward           lt  script gt

User · Answer

This seems to have worked for us in disabling the back button on the browser  as well as the backspace button taking you back  history pushState null  null    location  attr  href     window addEventListener  popstate   function          history pushState null  null    location  attr  href

User · Answer

None of the most-upvoted answers worked for me in Chrome 79  It looks like Chrome changed its behavior with respect to the Back button after version 75  See here  https   support google com chrome thread 8721521 hl en However  in that Google thread  the answer provided by Azrulmukmin Azmi at the very end did work  This is his solution   lt script gt      history pushState null  document title  location href       history back        history forward        window onpopstate   function              history go 1           lt  script gt    The problem with Chrome is that it doesn t trigger onpopstate event unless you make browser action   i e  call history back   That s why I ve added those to script   I don t entirely understand what he wrote  but apparently an additional history back     history forward   is now required for blocking Back in Chrome 75

User · Answer

This is the way I could it accomplish it  Weirdly  changing window location didn t work out fine in Google Chrome and Safari  It happens that location hash doesn t create an entry in the history for Chrome and Safari  So you will have to use the pushstate  This is working for me in all browsers  history pushState   page  1     quot title 1 quot    quot  nbb quot    window onhashchange   function  event        window location hash    quot nbb quot

User · Answer

Just set location hash  quot Something quot   On pressing the back button  the hash will get removed from the URL  but the page won t go back  This method is good for preventing going back accidentally  but for security purposes you should design your backend for preventing reanswering

User · Answer

In a modern browser this seems to work      https   developer mozilla org en-US docs Web API History API let popHandler        gt      if  confirm  Go back           window history back        else       window history forward       setTimeout      gt          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

User · Answer

Here is another way to proceed  Instead of just trying to avoid the Back button functionality  which doesn t work reliably  we can add short SessionStorage conditions  Say we have three different pages  page1  page2  and page3   On each page we got a link to click to acceed to the next one and we don t want the user to be able to go back to the previous page  On the first page  page1 html  we create an SI  sessionStorage Item  with a dummy  quot prev quot  code and another one with  quot page1 quot  code  SI  quot now quot      PAGE 1   lt button onclick  quot goto   quot  gt PAGE 2 lt  button gt     -------------------    let thispage    1     Or 123456 if preferred or make sense       You can replace this fixed  thispage  value on each page with a script counting the clicks      or any other way to increase its value  i e   thispage        or what you want  even counting the url length  lol     sessionStorage setItem  prev    0      Dummy code   sessionStorage setItem  now   thispage        You can here make this page unreachable with page2 page3 SI same conditions    function goto          window location    quot page2 html quot       On page2 html we use the usual NoBack script  if it works  and update SIs only if we re coming from page1    PAGE 2   lt button onclick  quot goto   quot  gt PAGE 3 lt  button gt     -------------------       If it works  let it work  -     history pushState null  null  location href     history back      history forward      window onpopstate   function            history go 1              else    let thispage    2     456789   let thisprev   sessionStorage getItem  now     if sessionStorage getItem  prev    thispage          console log  USER is back on PAGE 2         setTimeout function     goto      1000      Remove log   setTimeout       if thisprev     thispage          if thisprev  lt  thispage              console log  USER is coming from PAGE 1             sessionStorage setItem  prev   thisprev            sessionStorage setItem  now   thispage                else             console log  USER try to reload this page             setTimeout function     goto      1000                  function goto          window location    quot page3 html quot       And on page3 html    PAGE 3   lt button onclick  quot goto   quot  gt BACK TO PAGE 1 lt  button gt     -------------------    history pushState null  null  location href     history back      history forward      window onpopstate   function            history go 1           let thispage    3     999999   let thisprev   sessionStorage getItem  now     if sessionStorage getItem  prev      thispage          goto         if thisprev     thispage          if thisprev  lt  thispage              sessionStorage setItem  prev   thisprev            sessionStorage setItem  now   thispage                else             goto                 function goto          window location    quot page1 html quot     Reinit test      The advantage is that even if the user manually reloads the previous page  if he had time to see and remember the URL  it still works  It was not tested on all devices  but seems to work fine on Firefox   Chrome   Edge Windows  10 and Firefox   Chrome on OS  X

User · Answer

This article on jordanhollinger com is the best option I feel  Similar to Razor s answer but a bit clearer  Code below  full credits to Jordan Hollinger   Page before    lt a href   page-of-no-return htm no-back gt You can t go back from the next page lt  a gt    Page of no return s 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

User · Answer

I had this problem with React  class component   And I solved it easily  componentDidMount         window addEventListener  quot popstate quot   e   gt            this props history goForward             I ve used HashRouter from react-router-dom

User · Answer

history pushState null  null  document URL   window addEventListener  popstate   function          history pushState null  null  document URL        This JavaScript code does not allow any user to go back  works in Chrome  Firefox  Internet  Explorer  and Edge

User · Answer

Some of the solutions here will not prevent a back event from occurring - they let a back event happen  and data held about the page in the browsers memory is lost  and then they play a forward event to try and hide the fact that a back event just happened  Which is unsuccessful if the page held transient state  I wrote this solution for React  when react router is not being used   which is based on vrfvr s answer  It will truly stop the back button from doing anything unless the user confirms a popup    const onHashChange   useCallback      gt        const confirm   window confirm         Warning - going back will cause you to loose unsaved data  Really go back               window removeEventListener  hashchange   onHashChange       if  confirm          setTimeout      gt            window history go -1            1         else         window location hash    no-back         setTimeout      gt            window addEventListener  hashchange   onHashChange            1                      useEffect      gt        window location hash    no-back       setTimeout      gt          window addEventListener  hashchange   onHashChange          1       return      gt          window removeEventListener  hashchange   onHashChange

User · Answer

I believe the perfect yet solution is actually pretty straightforward  which I used for many years now   It s basically assigning the window s  onbeforeunload  event along with the ongoing document  mouseenter     mouseleave  events so the alert only triggers when clicks are outside the document scope  which then could be either the back or forward button of the browser     document  on  mouseenter   function e             window onbeforeunload   null               document  on  mouseleave   function e             window onbeforeunload   function     return  You work will be lost

User · Answer

You simply cannot and should not do this  However  this might be helpful   lt script type    quot text javascript quot   gt      history pushState null  null   pagename        window addEventListener  popstate   function event            history pushState null  null   pagename             lt  script gt   This works in my Google Chrome and Firefox

User · Answer

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    amp  amp    vReadOnly    true    vReadOnly     readonly      vEnabled    true     true   false       var flag2    t     password   amp  amp  t     text   amp  amp  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

User · Answer

history pushState null  null  location href       window onpopstate   function              history go 1

User · Answer

This code was tested with the latest Chrome and Firefox browsers   lt script type  quot text javascript quot  gt      history pushState null  null  location href       history back        history forward        window onpopstate   function      history go 1       lt  script gt

User · Answer

For restricting the browser back event  window history pushState null   quot  quot   window location href   window onpopstate   function          window history pushState null   quot  quot   window location href

User · Answer

There are numerous reasons why disabling the back button will not really work  Your best bet is to warn the user   window onbeforeunload   function     return  Your work will be lost         This page does list a number of ways you could try to disable the back button  but none are guaranteed   http   www irt org script 311 htm

User · Answer

I came across this  needing a solution which worked correctly and  quot nicely quot  on a variety of browsers  including Mobile Safari  iOS  9 at time of posting   None of the solutions were quite right  I offer the following  tested on Internet  Explorer  11  Firefox  Chrome  and Safari   history pushState null  document title  location href   window addEventListener  popstate   function  event      history pushState null  document title  location href        Note the following   history forward    my old solution  does not work on Mobile Safari --- it seems to do nothing  i e   the user can still go back   history pushState   does work on all of them  the third argument to history pushState   is a url  Solutions which pass a string like  no-back-button  or  pagename  seem to work OK  until you then try a Refresh Reload on the page  at which point a  quot Page not found quot  error is generated when the browser tries to locate a page with that as its URL   The browser is also likely to include that string in the address bar when on the page  which is ugly   location href should be used for the URL  the second argument to history pushState   is a title  Looking around the web most places say it is  quot not used quot   and all the solutions here pass null for that  However  in Mobile Safari at least  that puts the page s URL into the history dropdown the user can access  But when it adds an entry for a page visit normally  it puts in its title  which is preferable  So passing document title for that results in the same behaviour

User · Answer

React For modal component in React project  the open or close of the modal  controlling browser back is a necessary action   The stopBrowserBack  the stop of the browser back button functionality  also get a callback function  This callback function is what you want to do  const stopBrowserBack   callback   gt      window history pushState null   quot  quot   window location href     window onpopstate        gt        window history pushState null   quot  quot   window location href       callback              The startBrowserBack  the revival of the browser back button functionality  const startBrowserBack        gt      window onpopstate   undefined    window history back          The usage in your project  handleOpenModal        gt    this setState        modalOpen  true             gt  stopBrowserBack this handleCloseModal        handleCloseModal        gt    this setState        modalOpen  false        startBrowserBack

User · Answer

lt script gt      window location hash    quot no-back-button quot           Again because Google Chrome doesn t insert        the first hash into the history     window location hash    quot Again-No-back-button quot         window onhashchange   function            window location hash    quot no-back-button quot          lt  script gt

User · Answer

In my case this was a shopping order  So I disabled the button  When the user clicked back  the button was disabled still  When they clicked back one more time  and then clicked a page button to go forward  I knew their order was submitted and skipped to another page  In the case when the page actually refreshed which would make the button  theoretically   available  I was then able to react in the page load that the order was already submitted and redirected then too

[javascript] How can I stop the browser back button using JavaScript?

Examples related to javascript

Examples related to browser