Click here to Skip to main content
14,775,645 members
Articles » Desktop Development » Button Controls » Beginners
Technical Blog
Posted 14 Dec 2013

Stats

170.5K views
5 bookmarked

Solution to Browser Back Button Click Event Handling

Rate me:
Please Sign up or sign in to vote.
3.88/5 (5 votes)
14 Dec 2013CPOL
Solution to browser back button click event handling

Introduction

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

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

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

The 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 cannot be handled using the 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 whether or not JavaScript document.referrer value is the same as that of the session variable? If the value is the same, it means back button is clicked, so it 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 is simple to implement. Server-side implementation in other languages is also straightforward. Please feel free to comment and suggest a better idea (if any).

Other Web Application Development Tutorials

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Imran Abdul Ghani
Software Developer (Senior) Emaratech
United Arab Emirates United Arab Emirates
Imran Abdul Ghani has more than 10 years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET(MCSD.NET) since 2005. You can reach his blogging at WCF Tutorials, Web Development, SharePoint for Dummies.

Comments and Discussions

 
QuestionBrowser back button handling. Pin
Member 1072926918-Sep-14 20:55
MemberMember 1072926918-Sep-14 20:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.