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

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:
1 2 3 4 5 6 7 |
//ASP.NET/C# code if (Session["CurrentPageURL"] != null) { Session["PreviousPageURL"] = Session["CurrentPageURL"]; } Session["CurrentPageURL"] = Request.Url; |
1 2 3 4 5 6 7 8 9 |
function HandleBackFunctionality() { var previousPageURL = "<%= Session["PreviousPageURL"] %>"; if (document.referrer == previousPageURL) { alert("Its a back button click..."); //Specific code here... } } |
1 |
<input id=”txtValue”/> |
- 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
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
Other Related Articles:
Top 10 Interview Questions and Answers Series:
- Top 10 HTML5 Interview Questions
- Top 10 ASP.NET Interview Questions
- Comprehensive Series of ASP.NET Interview Questions
- Top 10 ASP.NET MVC Interview Questions
- Top 10 ASP.NET Web API Interview Questions
- Top 10 ASP.NET AJAX Interview Questions
- Top 10 WCF Interview Questions
- Comprehensive Series of WCF Interview Questions
Excellent solution find you.
Thanks for posting Web Application Development services
Nice solution to a very common problem
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
Reddy,
Can u please tell your browser and it’s version? I tried IE and Chrome and it’s working fine.
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