How Can I Detect Browser Window Closure Without Intercepting Form Submissions?

Capturing Browser Window Close Event Without Form Submission Interception

To capture the browser window close event specifically, avoiding conflicts with form submission, jQuery's beforeunload event can be exploited with a slight modification.

The beforeunload event, as it stands, triggers for any action that causes the page to be abandoned. To restrict it to window close events alone, we employ the following approach:

• We define a flag, inFormOrLink, which is set to true when an link is clicked or a
  is submitted. This indicates that the user is intentionally leaving the page via a form or link.

• In the beforeunload event handler, we check the value of inFormOrLink.

  • If it's true, the event was triggered by a form submission or link click. In this case, we return a confirmation message to the user.
  • If it's false, the event was triggered by a window close action, and we can safely let the browser close the window without interference.

The updated code for jQuery versions 1.7 and later:

var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

For older versions of jQuery (prior to 1.7):

var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

The above is the detailed content of How Can I Detect Browser Window Closure Without Intercepting Form Submissions?. For more information, please follow other related articles on the PHP Chinese website!