Can you use JavaScript to detect whether a user has closed a browser tab? closed a browser? or has left a browser?

Question

To put you in the picture :

A user is on a mobile device and is looking at a browser (i.e. Safari on an iPhone)
They can see a password field to create a password in a modal box
If the user were to close the modal box and come out of the browser I would like to send them an email to prompt them to create a password.

My initial thought is there must be some sort of java-script event to be able to do this ?

So can you detect the following user actions with JavaScript where a users has : - Closed a Tab - Closed their Browser - Left their browser

This perhaps? https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers.onbeforeunload — Evan Knowles, Feb 09 '15 at 11:18
These kind of "automatic annoyer" should be rethought anyway ... — Axel Amthor, Feb 09 '15 at 11:20
You can always set a cookie in the user's browser that records if they have signed up or not. — kontur, Feb 09 '15 at 11:22
Agreed, we actually do want to put a cookie on a user's machine if they don't submit a password. However its a phase 2 item. — Dominic Francis, Feb 09 '15 at 15:49

score 3 · Answer 1 · answered Mar 30 '15 at 07:41

Also looking for the problem, but that you will not satisfy demand.

I had just found how to solve this problem: "Can you use JavaScript to detect whether a user has closed a browser tab? closed a browser? or has left a browser?"

<html>
<head>
<title>Detecting browser close</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var validNavigation = false;

function wireUpEvents() {
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the  user to be able to leave withou confirmation
var leave_message = 'ServerThemes.Net Recommend BEST WEB HOSTING at new tab  window. Good things will come to you'
function goodbye(e) {
if (!validNavigation) {
window.open("http://serverthemes.net/best-web-hosting-services","_blank");
    return leave_message;

}
}
window.onbeforeunload=goodbye;

// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
  validNavigation = true;
}
});

// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
 });
 // Attach the event submit for all forms in the page
 $("form").bind("submit", function() {
 validNavigation = true;
});

// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
  wireUpEvents();
});
</script>
</head>
<body>
<p>
Check which action detects browser window close:
<ol>
<li>Click this <a href="#" onclick="location.reload();return false">Refresh</a> link or the browser's Refresh button</li>
<li>Navigate away from this page through a <a href="http://serverthemes.net/">link</a></li>
<li>Type another URL in the address bar</li>
<li>Click Back or Forward button</li>
<li>Click the Close (X) button in the top-rightmost corner of the browser</li>
<li>Click the IE icon in the top-leftmost corner and choose Close. Or simply double-click the icon</li>
 <li>Press Alt+F4 key</li>
</ol>
 </p>
     <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>
    </body>
    </html>

Is the same for Alt-F4, and close the navigator (tab or X ) and too F5 key, postback and reload ? — Kiquenet, Jul 08 '15 at 10:37
Does this solution work with mobile browsers too? I doubt it. — Black, Apr 12 '16 at 11:45

score 2 · Answer 2 · answered Feb 09 '15 at 11:32

If your user closes a tab, you may detect it with the onunload event, but when she closes the browser, your javascript engine will abort as well, so you can no longer run any type of program on the client side.

You could, however, detect it on the server. If you prepare a websocket connection, for instance, you may detect when your client has quit and then do your desired action.

The process would be something like this: on entering the page, set up an automatic websocket connection to your server. Read the email if needed once it is entered (you may also send it via a websocket event to the server) and finally, when the "disconnect" event fires, send the email to that address.

If you would like to proceed in this way, you may want to look at the Socket.IO webpage, which is to me one of the easiest ways to implement this process.

Dan Smith · Answer 3 · 2015-02-09T11:25:20.517

1

Short answer is not really, no. Long answer is there is an onunload event, but all you can do with it is ask the user if they're sure they want to leave (see @EvanKnowles's comment) but you can't attach any complex logic to it.

The best way is to have some sort of session timer that will send an email N minutes after the last time they were seen on your site.

edited Feb 09 '15 at 11:25

answered Feb 09 '15 at 11:20

Dan Smith

5,685
32
33

This answer covers all. It's basically not possible the way you currently want it to. That aside, please do not do this. Simply show the modal box again next visit by means of a cookie or some server-side check (if user tries to log in, but has no password, show box). Don't send e-mails (or use popups). – Stephan Bijzitter Feb 09 '15 at 11:24

score 0 · Answer 4 · answered Nov 23 '17 at 05:41

0

Document for you: http://www.openjs.com/scripts/events/keyboard_shortcuts/ shortcut.add("Ctrl+Shift+X",function() { alert("Hi there!"); });

Download: http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

answered Nov 23 '17 at 05:41

Nhan Nguyen Truong

21
2

Can you use JavaScript to detect whether a user has closed a browser tab? closed a browser? or has left a browser?

4 Answers4

Linked