CODEWITHSUNDEEP
javascriptjquery
user790995
user790995

Reputation:

Detect browser/tab closing

I know how to display an alert to the user if they attempt to navigate away from the current page asking them if they are sure they wish to do so but I was wondering if there is a way to display this alert ONLY when the window / tab is being closed? I'd like to only have the confirmation display when the window or tab is being closed, not when the user clicks a link.

Upvotes: 6

Views: 7066

Answers (5)

Дима Попиль
Дима Попиль

Reputation: 11

This solution worked for me in Firefox with Violentmonkey.
It is used like most of all window.onbeforeunload and check if left mouse button was pressed. So if pressed, this mean, click at free space or link opens - not closing tab.

    function DetectBrowserExit()
{
  if (butpres == 0)  {
   //your action before closing tab, alert not showing
  }
}

window.onbeforeunload = function(){ DetectBrowserExit(); }

// the key is pressed, then when window.onbeforeunload - link is opening, so, tab not closing 

        document.addEventListener('mousedown',function(e){
            if (e.which == 1) { //1-lbutton 2-mb 3-rb
                //e.preventDefault();
        butpres = 1
        setTimeout(function() {
          butpres = 0 //if after 3 seconds the script still works then the link has not been clicked, clear the click and continue to catch new clicks 

          //alert(butpres);
          }, 3000); //Two seconds will elapse and Code will execute.
         //alert(butpres);
                //command_lock();
            }
        },false);

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 481

You need to explicitly specify events for which you don't want to show confirmation dialogue box. 

var validNavigation = 0;

function bindDOMEvents() {
    // Attach the event keypress to exclude the F5 refresh
    $(document).keydown(function(e)
    {
        var key = e.which || e.keyCode;
        if (key == 116)
        {
            validNavigation = 1;
        };
    });
    // Attach the event click for all links in the page
    $("a").bind("click", function()
    {
        validNavigation = 1;
    });
    // Attach the event submit for all forms in the page
    $("form").bind("submit", function()
    {
        validNavigation = 1;
    });
    // Attach the event click for all inputs in the page
    $("input[type=submit]").bind("click", function()
    {
        validNavigation = 1;
    });
};
$(document).ready(function()
{
    bindDOMEvents();
    window.onbeforeunload = function () {
        console.log(validNavigation);
        if (validNavigation == '1')
        {
            console.log("No Alert.. Continue");
        }
        else
        {
            return false;
        }
    };
});

Upvotes: 0

kei
kei

Reputation: 20471

How about doing something like this?

  1. Have a global variable set to false (i.e. var hasCLickedLink = false;)

  2. On all your links (<a>), attach an event handler that sets the variable to true

  3. On onbeforeunload, check the value of the variable to see if a link has been clicked or not. If it is still false, then they haven't clicked a link so give them the alert.

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101594

Not possible.

the only thing close is the onbeforeunload event, but there isn't a difference (to javascript) between a closed window/tab or a navigation to another page.

Follow-up:

I suppose you could attach a click handler to every anchor on the page and use a "dirty" flag, but that's really hack-ish. something like (forgive me, but using jquery for simplicity):

(function(){
  var closingWindow = true;
  $('a').on('click', function(){
    if (this.href == /* on-domain link */){
      closingWindow = false;
    }
  });
  $(window).on('beforeunload',function(){
    if (closingWindow){
      // your alert
    }
  });
})();

but that's about as close as you're going to get. note: this isn't going to help if another javascript function uses window.location, etc.

Upvotes: 3

BenM
BenM

Reputation: 53198

You cannot differentiate between the two.

window.onbeforeunload is triggered immediately before the browser unloads its resources. You do not know the reason for the unload, only that it's about to occur:

From the MDN:

An event that fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.

Upvotes: 1

Related Questions