5

I want to detect browser back button in java-script/jquery without using any external plugins.

I am going to support following browsers

IE8,IE9,FireFox,Chrome

I googled so many links and found below part of code from code project 

<body onbeforeunload=”HandleBackFunctionality()”> 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 working fine IE browser. that means i can able to get the window.event.clientX and clientY values in IE browser. but in chrome/firefox not working.

When browser back button is clicked, i need to refresh the page.

how can i detect browser back button click event in all browsers (IE,firefox,chrome)

any help would be appreciated.

Improve this question
4
  • You are looking for window.onpopstate function. Mozilla API documentation Caniuse.Popstate Commented Sep 12, 2014 at 5:35
  • 1
    @Mystreyos but popstate event is like HTML5 event right ? but i want to support IE8 too. could you please update more details regarding this.Thanks Commented Sep 12, 2014 at 5:44
  • Looking for exactly the same thing, how to detect back and forward button click in IE8. Commented May 28, 2016 at 0:55
  • @lowtechsun i tried with out external scripts but it is creating some issues.so i have implemented with custom scripts only. Commented May 28, 2016 at 8:14

2 Answers 2

Reset to default
4

That can be simply dropped into your web page, and when the user clicks back, it will call a function. The default function on this call is a javascript alert “Back Button Clicked”.

To replace this functionality, you simply need to override the OnBack function. This can be done by using the code below.

<script type="text/javascript"> bajb_backdetect.OnBack = function() { alert('You clicked it!'); } </script>

This will now replace the “Back Button Clicked” alert with a “You clicked it!’” alert.
support following browsers IE8,IE9,FireFox,Chrome
Browser Back Button Detection
Or using jquery
Catching browser back
Using standard javascript
Mastering The Back Button With Javascript

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Thanks.whether it requires to refer any external scripts ?
When you use a large library like jQuery. 3 KB is not a reasonable limit for a script.
it requires "backfix.min.js". so i need without any external plugins clearly mentioned in this question
yes.i understood your point but for some other reasons we are not preferring external plugins for this
The last link is no external script:Mastering The Back Button With Javascript
|
1

Since you are supporting IE 8 and 9 as well, there isnt a single method that will help you solve this. You could use the history API of html5 but that doesn't support IE8 and 9. As mysteryos mentioned in the above comment, you could use window.onPopState for chrome, firefox etc, and for IE you could create a separate js file and use conditional statements to fire it when the user uses IE.

For example:

<!--[if lte IE 9]> <script src="youIESpecificfile.js"></script> <![endif]-->

Read more about the HTML5 History API here: onPopState by mozilla

Hope this helps!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.