Browser Back Button Click Event Handling in JavaScript

-
Normally, the onbeforeunload event is used for handling 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 for example Chrome
       {
           alert("Browser back button is clicked on other browser...");
       }
 }

But there is a problem that identical events can occur once a user clicks on the refresh button of a browser. So, to grasp whether the 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 snippet of code above works well in browsers other than FireFox. For 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 snippet of code above 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 that cannot be handled using the code above.

Comments

Post a Comment

Popular posts from this blog

what is Event Cache table in sharepoint

-
Every Content database in SharePoint Contains an EventCache table that is the change log for objects contained in the database. Each row in this table is depicting a change in an object where columns usually contain information such as the date and time of a change, the type of object that was changed, the nature of the change, and a unique identifier for the object. EventCache table is important because it stores the list of site events for which users might have requested alerts.
Read more

CAML Query syntax and options in SharePoint

-
As Small syntax error or order of tag in spquery can result any web part (or any thing in which spquery is used) doesn’t work, I’m explaining SPQuery with example, hope which may help you. CAML (Collaborative Application Markup Language) SPQuery  is the SharePoint object which is used to perform a query operation against SharePoint data. SPList.getItems(SPQuery)  is the step, will return SPListItemCollection  which satisfies the query.SPQuery has one data member ‘ Query’ , which need to set before passing SPQuery object to  SPList . Some Properties Properties Description RowLimit Gets or sets a limit for the number of items returned in the query per page. <RowLimit>10</RowLimit> --- Can be used as: query.rowLimit = 10; ViewFields Gets or sets the fields that are displayed in the query. <ViewFields>         <FieldRef Name='Title'/>         <FieldRef Name='Name'/> </ViewFields> --- Can be used as: SP
Read more

Change anchor link url in sharepoint calender

-
here am unsing sharepoint calender to display events. The calender list is inhereted from event content type. for every event there are several columns like event name, event link(URL), Event Date...etc. for some events there may be some url in link column some may be empty. So in calender if i click the event, suppose if that event has the LINK with url then i have to redirect to the new url, if the link url is empty then i have to redirect to the event url. here when am clilcking on anchor tag in calender am calling a rest api function to get the link value of that event. am checking the link value , if value in null then am redirecting to event details and the value is not null then am redirecting to the link which am get from rest api call. here am using two mail functions which are 1)e.stopPropagation(); means it will stop the redirecting value which is assigned initially. 2)e.preventDefault(); means it will stop the default value of the anchor tag href value.
Read more