C# Programming Tutorial(8920128728): Solution to browser back button click event handling

In Javascript, onbeforeunload event is fired when the page is about to unload and there can be multiple reasons for this unload. For instance, back or forward or refresh button is clicked or a link on the page is clicked etc.

Normally, onbeforeunload event is used in order to handle browser back button functionality as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

<body onbeforeunload=”HandleBackFunctionality()”>

function HandleBackFunctionality()

{

    if(window.event) //Internet Explorer

    {

           alert("Browser back button is clicked on Internet Explorer...");

    }

    else //Other browsers e.g. Chrome

    {

           alert("Browser back button is clicked on other browser...");

    }

}

But there is a problem that identical event occurs once a user clicks on refresh button of a browser. So, to grasp whether or not refresh button or back button is clicked, we will use the subsequent code.

1

2

3

4

5

6

7

8

if(window.event.clientX < 40 && window.event.clientY < 0)

{

     alert("Browser back button is clicked...");

}

else

{

     alert("Browser refresh button is clicked...");

}

Above code snippet works well in browsers aside from FireFox, In case of FireFox, we need to apply the following check.

1

2

3

4

5

6

7

8

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...");

}

So, consolidated code snippet will look as:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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...");

      }

   }

}

Above code snippet is beneficial in many scenarios however there are some issues with it. For instance, navigation can be done using keyboard keys and refresh can also be done using F5 or CTRL+R which can not be handled using above code.

C# Programming Tutorial(8920128728)

Thursday, 12 July 2018

Solution to browser back button click event handling

No comments:

Post a Comment