Catching A Browser Close Event

Question

Hello Seniors (As I am new to Web Based Applications), I was keen to implement or catching browser closing event. Yes! I did it and successfully implemented it by using javascript{see code below} but I have implemented it in a web page without MasterPage. Now, as I am trying to implement it in a webpage with MASTERPAGE but in each post back...the event window.onunload is caught, which is giving me problems... Is there any technique or logic to detect whether I can differentiate between a Close browser button and a page's post back event.

Please guide me...as I have to implement in a project as soon as possible.... thank you.

Ankit Srivastava

 <script type="text/javascript">

        function callAjax(webUrl, queryString)
        {
            var xmlHttpObject = null;

                try
                {
                        // Firefox, Opera 8.0+, Safari...

                        xmlHttpObject = new XMLHttpRequest();
                    }
               catch(ex)
                {
                       // Internet Explorer...

                try
                    {
                        xmlHttpObject = new ActiveXObject('Msxml2.XMLHTTP');
                    }
                catch(ex)
                {
                    xmlHttpObject = new ActiveXObject('Microsoft.XMLHTTP');
                }
             }

            if ( xmlHttpObject == null )
                {
                window.alert('AJAX is not available in this browser');
                return;
                 }

        xmlHttpObject.open("GET", webUrl + queryString, false);
        xmlHttpObject.send();

        return xmlText;
}

</script>

<script type="text/javascript">

var g_isPostBack = false;

window.onbeforeunload = check ()
function check()
{
 if ( g_isPostBack == true )
  return;

 var closeMessage =
  'You are exiting this page.\n' +
  'If you have made changes without saving, your changes will be lost.\n' +
  'Are you sure that you want to exit?';

 if ( window.event )
 {
  // IE only...

  window.event.returnValue = closeMessage;
 }
 else
 {
  // Other browsers...

  return closeMessage;
 }

 g_isPostBack = false;
}
window.onunload = function ()
{
 if ( g_isPostBack == true )
  return;

 var webUrl = 'LogOff.aspx';
 var queryString = '?LogoffDatabase=Y&UserID=' + '<%# Session["loginId"] %>';
 var returnCode = callAjax(webUrl, queryString);

}

</script>

Look into jquery. You're doing a whole lot of unnecessary work. — Chris, Nov 24 '10 at 16:13
Look at this [answer](http://stackoverflow.com/questions/1824421/detect-browser-close-on-asp-net/1824486#1824486). — Pavel Hodek, Dec 08 '11 at 11:46

score 3 · Accepted Answer · answered Nov 24 '10 at 16:19

3

There is no javascript event which differentiates between a browser being closed and the user navigating to another page (either via the back/forward button, or clicking a link, or any other navigation method). You can only tell when the current page is being unloaded. Having said that, I'm not sure why you'd even need to know the difference? Sounds like an XY problem to me.

answered Nov 24 '10 at 16:19

Chris

27,596
25
124
225

… and even if there was, it will wouldn't capture the browser closing because it crashed, or if the network connection was lost, or a power cut shut the computer down, etc. – Quentin Nov 25 '10 at 08:54

Naina · Answer 2 · 2013-03-21T10:49:28.353

If one wants to catch Log out when the browser is closed (by clicking on the cross), we can take the help of window events. Two events will be helpful: onunload and onbeforeunload. But the problem arises that the code will also work if you are navigating from one page to another as well as also when one refreshes the page. We don't want our sessions to be clear and inserting the record of logging out while refreshing. So the solution is if we distinguish the difference between closing and refreshing or navigating. I got the solution:

Write 'onbeforeunload ="loadOut();"' within the body tag on master page.
Add the following function inside script in head section of master page :-

function loadOut() { if ((window.event.clientX < 0) || (window.event.clientY < 0)) {
// calling the code behind method for inserting the log out into database } }

And its done. It is working for IE, please check for other browsers. Similarly you can detect the event if the window is closed by pressing the combination of keys ALT+F4.

score 0 · Answer 3 · edited Jun 06 '14 at 07:32

window.unload fires when we navigate from one page to another as well as when we click on close button of our browser,So to detect only browser close button you need to use flag.

var inFormOrLink;

$("a,:button,:submit").click(function () { inFormOrLink = true; });

$(":text").keydown(function (e) {    

    if (e.keyCode == 13) {
        inFormOrLink = true;
    }
})/// Sometime we submit form on pressing enter
$(window).bind("unload", function () {
    if (!inFormOrLink) {

        $.ajax({
            type: 'POST',
            async: false,
            url: '/Account/Update/'

        });
    }
})

score 0 · Answer 4 · edited May 23 '17 at 10:26

0

The answer can be found on SO: How to capture the browser window close event?

jQuery(window).bind("beforeunload", function(){return confirm("Do you really want to close?") })

and to prevent from confirming on submits:

jQuery('form').submit(function() {
    jQuery(window).unbind("beforeunload");
    ...
});

edited May 23 '17 at 10:26

Community

1
1

answered Nov 24 '10 at 16:32

Tim Schmelter

450,073
74
686
939

Note that Opera doesn't support non-standard `onbeforeunload` and `onunload`. – Marcel Korpel Nov 24 '10 at 21:55

score 0 · Answer 5 · answered Nov 25 '10 at 08:48

First step: add global JavaScript variable called "_buttonClicked" which is initially set to false.

Second step: have every button click assign _buttonClicked value to true.. with jQuery it's one line, pure JavaScript is also few lines only.

Third step: in your function check _buttonClicked and if it's true, don't do anything.

EDIT: After quick look in your code I see you already have steps #1 and #3, so all you need is the second step, assign g_isPostBack as true when any submit button is clicked. Let me know if you need help implementing the code and if you can have jQuery.

Catching A Browser Close Event

5 Answers5

Linked