JavaScript or jQuery browser back button click detector

Question

Could someone please share experience   code how we can detect the browser back button click  for any type of browsers    We need to cater all browser that doesn t support HTML5

User · Answer

In javascript  navigation type 2 means browser s back or forward button clicked and the browser is actually taking content from cache   if performance navigation type    2          Do your code here

User · Answer

It s available in the HTML5 History API  The event is called  popstate

User · Answer

Hasan Badshah s answer worked for me  but the method is slated to be deprecated and may be problematic for others going forward   Following the MDN web docs on alternative methods  I landed here  PerformanceNavigationTiming type  if  performance getEntriesByType  navigation   0  type      back forward          back or forward button functionality     This doesn t directly solve for back button over the forward button  but was good enough for what I needed  In the docs they detail the available event data that may be helpful with solving your specific needs    function print nav timing data          Use getEntriesByType   to just get the  navigation  events   var perfEntries   performance getEntriesByType  navigation       for  var i 0  i  lt  perfEntries length  i          console log    Navigation entry     i             var p   perfEntries i          dom Properties     console log  DOM content loaded        p domContentLoadedEventEnd -      p domContentLoadedEventStart        console log  DOM complete       p domComplete       console log  DOM interactive       p interactive           document load and unload time     console log  document load        p loadEventEnd - p loadEventStart        console log  document unload        p unloadEventEnd -      p unloadEventStart            other properties     console log  type       p type       console log  redirectCount       p redirectCount           According to the Docs at the time of this post it is still in a working draft state and is not supported in IE or Safari  but that may change by the time it is finished   Check the Docs for updates

User · Answer

Found this to work well cross browser and mobile back button override js     Added a timer for safari 5 0      managage back button click  and backspace  var count   0     needed for safari window onload   function           if  typeof history pushState      function              history pushState  back   null  null                     window onpopstate   function                   history pushState  back   null  null                             if count    1  window location    your url                             setTimeout function   count   1   200

User · Answer

suppose you have a button    lt button onclick  backBtn     gt Back    lt  button gt    Here the code of the backBtn method     function backBtn                        parent history back                        return false

User · Answer

The  popstate  event only works when you push something before  So you have to do something like this   jQuery document  ready function         if  window history  amp  amp  window history pushState         window history pushState  forward   null      forward           window  on  popstate   function           alert  Back button was pressed                        For browser backward compatibility I recommend  history js

User · Answer

In my case I am using jQuery  load   to update DIVs in a SPA  single page  web  app       Being new to working with   window  on  hashchange       event listener   this one proved challenging and took a bit to hack on   Thanks to reading a lot of answers and trying different variations   finally figured out how to make it work in the following manner   Far as I can tell  it is looking stable so far      In summary - there is the variable globalCurrentHash that should be set each time you load a view       Then when   window  on  hashchange       event listener runs  it checks the following          If location hash has the same value  it means Going Forward   If location hash has different value  it means Going Back      I realize using global vars isn t the most elegant solution  but doing things OO in JS seems tricky to me so far   Suggestions for improvement refinement certainly appreciated    Set Up    Define a global var           var globalCurrentHash   null     When calling  load   to update the DIV  update the global var as well    function loadMenuSelection hrefVal          layout main   load nextView     globalCurrentHash   hrefVal     On page ready  set up the listener to check the global var to see if Back Button is being pressed     document  ready function        window  on  hashchange   function          console log   location hash      location hash          console log   globalCurrentHash      globalCurrentHash           if  location hash    globalCurrentHash              console log   Going fwd                   else              console log   Going Back               loadMenuSelection location hash

User · Answer

You can use this awesome plugin  https   github com ianrogren jquery-backDetect  All you need to do is to write this code      window  load function           body   backDetect function             Callback function       alert  Look forward to the future  not the past                     Best

User · Answer

Disable the url button by following function  window onload   function          if  typeof history pushState      function             history pushState  jibberish   null  null           window onpopstate   function                  history pushState  newjibberish   null  null                  Handle the back  or forward  buttons here                Will NOT handle refresh  use onbeforeunload for this                       else           var ignoreHashChange   true          window onhashchange   function                  if   ignoreHashChange                    ignoreHashChange   true                  window location hash   Math random                       Detect and redirect change here                    Works in older FF and IE9                      it does mess with your hash symbol  anchor   pound sign                    delimiter on the end of the URL                           else                   ignoreHashChange   false

User · Answer

there are a lot of ways how you can detect if user has clicked on the Back button  But everything depends on what your needs  Try to explore links below  they should help you   Detect if user pressed  Back  button on current page    Is there a way using Jquery to detect the back button being pressed cross browsers detect back button click in browser   Detect if current page is visited after pressing  Back  button on previous  Forward   page    Is there a cross-browser onload event when clicking the back button  trigger event on browser back button click

User · Answer

In case of HTML5 this will do the trick  window onpopstate   function        alert  clicked back button       history pushState

[javascript] JavaScript or jQuery browser back button click detector

Examples related to javascript

Examples related to jquery

Examples related to back-button