How to track browser refresh/back/tab close and browser close event in javascript or jquery

Question

I am using onbeforeunload function. I want to alert different message when any one click on browser back button , browser refresh button ,browser tab close button and browser close button .So how can i track all the events inside onbeforeUnload functions .

My code structure is like that

<body  onbeforeunload="return closePage();">
<script type="text/javascript">    
function closePage() {
  if(back button click){
    alert("back button");
  } else if(refresh button click || f5){
    alert("refresh button click");
  } else if(browser tab close){
    alert("tab close");
  } else {
    alert("browser closed");
  }
}
</script>

Any idea to fix this? Thanks a lot.

Not possible. For privacy reasons your page has no way of knowing where the user is going next. — Niet the Dark Absol, Sep 24 '14 at 08:04

score 2 · Accepted Answer · answered Sep 24 '14 at 08:20

To the best of my knowledge, what you want is not possible. For security reasons most browsers won't allow these kinds of things.

You can, however, catch a few things. Like keydown on the f5 key. That way you can do some stuff there before the "onbeforeunload" function runs if you like.

But you can't bind an event on the "back" button for instance. Or "ctrl+r".

So I'm afraid you'll have to reconsider your options, and go with some other solution.

score 0 · Answer 2 · edited Mar 27 '20 at 09:01

0

Thankyou so much for reply.But i have found some code

 if(window.event){
               if (window.event.clientX < 40 && window.event.clientY < 0)
                 {
                    alert("Backbutton is clicked");
                 }
                 else
                 { 
                  return exitPage(); 
                }
            }
    else{

      if(event.currentTarget.performance.navigation.type == 2)
      {
          alert("Back button click in mozilla");
      }
      if(event.currentTarget.performance.navigation.type == 1)
      {
        return exitPage();
      }
}

Using this code i can track the back button event but it only working in IE

edited Mar 27 '20 at 09:01

Mohan Singh

1,142
3
15
30

answered Sep 24 '14 at 09:11

Priyank Jain

21
1
4

This only works in your configuration because you are assuming an specific X,Y location for the back button. This will certainly not work in all browsers or configurations (themes, user UI customization, etc.). – Makyen Sep 25 '14 at 18:36
Actually, I would consider that this works to be a security hole. Page-scripts should not have access to any events which occur in the browser outside the page content. – Makyen Sep 25 '14 at 18:41

score 0 · Answer 3 · edited May 23 '17 at 12:07

you can do some small things before the customer closes the tab. javascript detect browser close tab/close browser but if your list of actions are big and the tab closes before it is finished you are helpless. You can try it but with my experience donot depend on it.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  /* Do you small action code here */
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM/Mozilla_event_reference/beforeunload

How to track browser refresh/back/tab close and browser close event in javascript or jquery

3 Answers3

Linked