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:

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

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.

if(window.event.clientX < 40 && window.event.clientY < 0)
{
     alert("Browser back button is clicked...");
}
else
{
     alert("Browser refresh button is clicked...");
}

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.

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

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:

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

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.

The Full JavaScript & ES6 Tutorial – (including ES7 & React)

In order to handle back button functionality, we need to come up with a solution that requires server-side effort together with client side Javascript code.
So, what’s the concept is…?
We will store the current page URL in session variable (say CurrentPageURL) on a page. When moved to another page, we will get that variable value and store in a second session variable (say PreviousPageURL) and update CurrentPageURL session variable with new page URL. ASP.NET straightforward code implementation is as follows:

//ASP.NET/C# code
if (Session["CurrentPageURL"] != null)
{
   Session["PreviousPageURL"] = Session["CurrentPageURL"];
}

Session["CurrentPageURL"] = Request.Url;

//ASP.NET/C# code

if (Session["CurrentPageURL"] != null)

{

Session["PreviousPageURL"] = Session["CurrentPageURL"];

}

Session["CurrentPageURL"] = Request.Url;

On client side, when onbeforeunload event is fired, we will verify that whether or not Javascript document.referrer value is same as that of the session variable? If the value is same, means back button is clicked, so will act accordingly.

function HandleBackFunctionality()
{
    var previousPageURL = "<%= Session["PreviousPageURL"] %>";
    if (document.referrer == previousPageURL)
    {
        alert("Its a back button click...");
        //Specific code here...
    }
}

function HandleBackFunctionality()

{

var previousPageURL = "<%= Session["PreviousPageURL"] %>";

if (document.referrer == previousPageURL)

{

alert("Its a back button click...");

//Specific code here...

}

This solution works well regardless of the browser type and simple to implement. Server-side implementation in other languages is also straightforward. Please feel free to comment and suggest a better idea (if any).

Are you really comfortable with client-side validations? Answer this simple question.

You are developing a Students web form that includes the following HTML input field.

<input id=”txtValue”/>

1	<input id=”txtValue”/>

If a Student enters a value in the input field, then it must be a numeric value. You need to add validation to the input field. Which HTML should you use?

A. <input id=”txtValue” type-“text” pattern=”/#” />
B. <input id=”txtValue” type=”number” />
C. <input id=”txtValue” type=”integer” />
D. <input id=”txtValue” type=”text” required=”required”/>

For a complete online test and Practice Exams on Web Technologies, Click Here.

Correct Answer: B

Google Map JavaScript API for beginners

If you want to integrate Google Maps in a Website or Mobile application like Android, iOS and don’t know how to integrate and create programs in Google Maps by using Google Maps JavaScript APIs? you can find this complete Video Course really helpful: Click Here to Take the Video Course Now.

Using HTML5 and JavaScript, you will be:

able to setup Google Maps APIs
able to create Google Maps for devices
able to create Google Maps in a website
able to control the Maps UI events

5 thoughts on “Solution to browser back button click event handling”

azhar baig December 11, 2013

Excellent solution find you.
Thanks for posting Web Application Development services
Shubhra Jain September 19, 2014

Nice solution to a very common problem
Thirumala Reddy November 12, 2014

I am copy past the your code i got this exception “event is not defined ”
In this line “event.currentTarget.performance.navigation.type”.
i am using only html and java script
1. WebdevTutorial November 12, 2014
  
  Reddy,
  Can u please tell your browser and it’s version? I tried IE and Chrome and it’s working fine.
Sridhar T December 13, 2014

how to handle in case of location.hash. if URL includes # symble, then it is working on second click not on first click with IE 8 and IE 9, CHROME, FIREFOX

Comments are closed.

Solution to browser back button click event handling

Are you really comfortable with client-side validations? Answer this simple question.

Google Map JavaScript API for beginners

Other Related Articles:

Top 10 Interview Questions and Answers Series:

5 thoughts on “Solution to browser back button click event handling”