Solution to browser back button click event handling

Advertisements

  Top Tutorials     New Tutorials     Submit     Login     Register  

Tutorial Detail

Solution to browser back button click event handling


http://www.webdevelopmenthelp.net/2013/12/browser-back-button-click-event.html
  • Total Hits: 14231

  • Average Rating :
    URL RatingURL RatingURL RatingURL RatingURL Rating

  •  

  • Total Votes: 160 votes

  • Category: Java Script/Development

  • Submitted on: 2013-12-11 11:39:16

  • Submitted By: Imran Ghani

  • Set as Favorite

Description:

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:


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

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

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

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.

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;

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...
}
}

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).    More detail...

Rating Detail

 Stars  Percentage  Total Vote
 One star  Vote LeftVote MiddleVote Right 35%  56
 Two starsTwo star  Vote LeftVote MiddleVote Right 10.63%  17
 Three starsThree starsThree stars  Vote LeftVote MiddleVote Right 11.88%  19
 Four starsFour starsFour starsFour stars  Vote LeftVote MiddleVote Right 10.63%  17
 Five starsFive starsFive starsFive starsFive stars  Vote LeftVote MiddleVote Right 31.88%  51

Caste Your Vote

 Rating  Selection  Guidelines
 Poor:     Very disappointing, useless.
 Fair:     Below average, disappointing but not useless.
 Good:     About average in its class.
 Very Good:     Above average for its category.
 Excellent:     One of the best Tutorials in its category.





Advertisements
Advertisements