javascript - Detect browsertab closing - Stack Overflow

admin管理员组

文章数量:1349690

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.

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.

• javascript
• jquery

Share Improve this question Follow edited Jan 7, 2014 at 14:46 asked Jan 7, 2014 at 14:36 user790995user790995

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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.

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.

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.

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

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);
                //mand_lock();
            }
        },false);

本文标签： javascriptDetect browsertab closingStack Overflow