467,867 Members | 1,261 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,867 developers. It's quick & easy.

How to Detect the Client Browser/Tab Closed

India777
Hai all,
How to Detect, the Client Closed the Browser/Tab using Javascript.
May 24 '12 #1

✓ answered by Dormilich

I would register the logged-in user as soon as he logs in, not when he logs out.

another problem is also, what if the user closes the tab and 5 minutes later opens a page from your site. do you consider him logged-out and force him to log-in again?

maybe there’s a way to tell when C# destroys a session to use that as log-out time?

you could also save the time of the last action (Request of a page) which is often not too far away from leving your site.

  • viewed: 127683
Share:
15 Replies
Dormilich
Expert Mod 8TB
the unload & beforeunload events are fired in that case.
May 24 '12 #2
India777
This events also fired when i Refresh the Page. What i do?
May 24 '12 #3
Expert 8TB
Isn't reloading effectively the same as closing and reopening the page?
May 27 '12 #4
India777
I am only need to Find Browser/Tab Close only. Not an Reload or Refresh.I know this is not Possible Easily with Javascript.
May 28 '12 #5
Expert 8TB
I'm no expert in this area, so hopefully we can get some input from someone more knowledgeable.

But it seems likely to me that when the user refreshes the page, what happens is that the page is unloaded (triggering beforeunload and unload events), then loaded again from scratch. From the viewpoint of javascript code within that page, it would be the same as if the user closed the page then opened a fresh copy of it.

Someone please correct me if I'm off track here.
May 28 '12 #6
Dormilich
Expert Mod 8TB
you’re absolutely correct. due to the stateless nature of HTTP, there is no way for JavaScript itself to differentiate between a (user triggered) page close or reload.
May 28 '12 #7
acoder
Expert Mod 8TB
India777, why do you need to detect this and what are you trying to do?

The question you've asked has already been answered, but you're probably trying to solve something else and thought you needed to be able to detect the browser/tab closing to solve it.
May 30 '12 #8
India777
When the user Close his/her Browser without Logout, I need to insert the row in the table.My Application is Created using Asp.net with c#.
May 30 '12 #9
Dormilich
Expert Mod 8TB
When the user Close his/her Browser without Logout, I need to insert the row in the table
what row?
May 30 '12 #10
India777
Insert row in the Database Table, Containing the fields Username (Name of the User who logged in) and DateTime
May 30 '12 #11
Dormilich
Expert Mod 8TB
I would register the logged-in user as soon as he logs in, not when he logs out.

another problem is also, what if the user closes the tab and 5 minutes later opens a page from your site. do you consider him logged-out and force him to log-in again?

maybe there’s a way to tell when C# destroys a session to use that as log-out time?

you could also save the time of the last action (Request of a page) which is often not too far away from leving your site.
May 30 '12 #12
India777
In c# the Session_End (Global method) will call after some times when user Closed their Browser/Tab. So i write my insert Query inside this Method.

Thanks very much Dormilich,Killer42,acoder.
again thanks for spend your time to Solve my Problem.
May 30 '12 #13
checks if the X button was clicked on browser window


The following code returns true if user clicks on Close button else false. This code you can use it on events window.unload or window.onbeforeunload

Expand|Select|Wrap|Line Numbers
  1. function isUserClickedCloseButton()
  2.     {
  3.  
  4.         var browserWindowWidth = 0;
  5.         var browserWindowHeight = 0;
  6.         // gets the width and height of the browser window
  7.         if (parseInt(navigator.appVersion) > 3)
  8.         {
  9.         if (navigator.appName == "Netscape")
  10.         {
  11.             browserWindowWidth = window.innerWidth;
  12.             browserWindowHeight = window.innerHeight;
  13.         }
  14.         if (navigator.appName.indexOf("Microsoft") !=- 1)
  15.         {
  16.             browserWindowWidth = top.window.document.body.offsetWidth;
  17.             browserWindowHeight = top.window.document.body.offsetHeight;
  18.         }
  19.         }
  20.         // checks if the X button was closed
  21.         // if event.clientY < 0, then click was on the browser menu area
  22.         // if event.screenX > (browserWindowWidth - 25), the X button was clicked
  23.         // use screenX if working with multiple frames
  24.         return (event.clientY < 0 && event.screenX > (browserWindowWidth - 25)) ? true : false;
  25.     }
Aug 23 '13 #14
Also looking for the problem. I had just found how to solve this problem


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Detecting browser close in IE</title>
  4.   <script type="text/javascript" src="/jquery/1.4.4/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. var validNavigation = false;
  7.  
  8. function wireUpEvents() {
  9.   var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
  10.   var leave_message = 'ServerThemes.Net Recommend BEST WEB HOSTING at new tab window. Good things will come to you'
  11.   function goodbye(e) {
  12.     if (!validNavigation) {
  13.     window.open("/best-web-hosting-services","_blank");
  14.         return leave_message;
  15.  
  16.     }
  17.   }
  18.   window.onbeforeunload=goodbye;
  19.  
  20.   // Attach the event keypress to exclude the F5 refresh
  21.   $(document).bind('keypress', function(e) {
  22.     if (e.keyCode == 116){
  23.       validNavigation = true;
  24.     }
  25.   });
  26.  
  27.   // Attach the event click for all links in the page
  28.   $("a").bind("click", function() {
  29.     validNavigation = true;
  30.   });
  31.  
  32.   // Attach the event submit for all forms in the page
  33.   $("form").bind("submit", function() {
  34.     validNavigation = true;
  35.   });
  36.  
  37.   // Attach the event click for all inputs in the page
  38.   $("input[type=submit]").bind("click", function() {
  39.     validNavigation = true;
  40.   });
  41.  
  42. }
  43.  
  44. // Wire up the events as soon as the DOM tree is ready
  45. $(document).ready(function() {
  46.   wireUpEvents();
  47. });
  48. </script>
  49. </head>
  50. <body>
  51. <p>
  52. Check which action detects browser window close:
  53. <ol>
  54. <li>Click this <a href="#" onclick="location.reload();return false">Refresh</a> link or the browser's Refresh button</li>
  55. <li>Navigate away from this page through a <a href="http://serverthemes.net/">link</a></li>
  56. <li>Type another URL in the address bar</li>
  57. <li>Click Back or Forward button</li>
  58. <li>Click the Close (X) button in the top-rightmost corner of the browser</li>
  59. <li>Click the IE icon in the top-leftmost corner and choose Close. Or simply double-click the icon</li>
  60. <li>Press Alt+F4 key</li>
  61. </ol>
  62. </p>
  63. <p>In IE, the last 3 actions are correctly detected by the <a href="#" onclick="alert(doUnload);return false">javascript code</a> inside this page as browser close.</p>
  64. </body>
  65. </html>
Mar 30 '15 #15
Expert 8TB
Thanks ServerThemes. Although it's probably a bit late to help India777, any information added here is potentially helpful next time someone comes along with a similar question.
Apr 4 '15 #16

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

18 posts views Thread by chris | last post: by
5 posts views Thread by Chris Fynn | last post: by
7 posts views Thread by Chris | last post: by
11 posts views Thread by =?Utf-8?B?QWxoYW1icmEgRWlkb3MgS2lxdWVuZXQ=?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.