Trigger an event when the browser back button is clicked

Question

I am trying to run some code when the browser back button is clicked.

How can i found out browser's back button with out changing the browser history?

I tried the code below. I got an exception in the else block saying: "event is not defined".

window.onunload = HandleBackFunctionality();
  function HandleBackFunctionality()
  {
    if(window.event)
    {
      if(window.event.clientX < 40 && window.event.clientY < 0)
      {
        alert("Browser back button is clicked…");
      } else {
        alert("Browser refresh button is clicked…");
      }
    } else {
      if(event.currentTarget.performance.navigation.type == 1)
      {
        alert("Browser refresh button is clicked…");
      }
      if(event.currentTarget.performance.navigation.type == 2)
      {
        alert("Browser back button is clicked…");
      }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Sorry for half question ..... Below are the extension with out changing the browser history(My project need browser history as tease). — user3915009, Nov 12 '14 at 09:41

score 2 · Answer 1 · answered Nov 12 '14 at 08:36

2

use

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // do something
  }
  if (direction == 'forward') {
    // do something else
  }
});

answered Nov 12 '14 at 08:36

Pratik Joshi

11,485
7
41
73

Hi thanks for quick respond.... Your code is working fine after me after i added the JqueryMobile.js file. is it possible to do this with out adding that JqueryMobile.js file, only adding the jquery.1.11.1 .js file... – user3915009 Nov 12 '14 at 09:31
It needs jqueryMobile Check here http://fiddle.jshell.net/Palestinian/UKJRM/ .Any issue while including it ?Its small js anyway ,its not at all heavy. – Pratik Joshi Nov 12 '14 at 09:44
Some class added to my html pages after i added the jquerymobile.js my total view is disturbed.That's y i will ask.... – user3915009 Nov 12 '14 at 09:51
@user3915009 Some classes are added OK ? See as long as you dont use jquerymobile CSS , styling will not be added to your html.Check which classes are added .And which are giving Css.So in your native HTML use OTHER classes like `sampleClass` To `sampleClass1` Like this,And use these classes in CSS Like `sampleClass1{ADD_HERE_STYLING}` – Pratik Joshi Nov 12 '14 at 10:07

androidavid · Answer 2 · 2014-11-12T08:35:17.257

1

Okay. Besides the fact that you should not initially trigger the event and to .unload = FunctionName and not .unload=FunctionName() and that you need to pass the event-argument I checked the code in the browser.

currentTarget is empty - this totally makes sense as there is no event-target like onclick but it is just the site reloading/unloading.

Please debug the code by yourself by using this and fit it to your needs: window.onunload = HandleBackFunctionality;

function HandleBackFunctionality(event)
{
  console.log(event, window.event);
}

You will see that currentTarget is not set (while event is).

edited Nov 12 '14 at 08:35

answered Nov 12 '14 at 07:43

androidavid

1,258
1
11
20

Hi thank's for respond . window.onunload = HandleBackFunctionality; window.onunload(); i write like this in header part ... even though i got the same exception – user3915009 Nov 12 '14 at 08:04
Yes you says right currentTarget is empty .... How to i found out the browser back button... i already try many ways no use.... – user3915009 Nov 12 '14 at 09:33

score 0 · Answer 3 · answered Apr 15 '21 at 05:12

This is the only solution that works for me with IOS safari.

  <script>
     window.addEventListener( "pageshow", function ( event ) {
     var pagehistory = event.persisted || 
                     ( typeof window.performance != "undefined" && 
                          window.performance.navigation.type === 2 );
     if ( pagehistory ) {
    // back button event - Do whatever.   
      }
      });
  </script>

Trigger an event when the browser back button is clicked

3 Answers3