Web browser detection closed - possible solution
I found that there are window.onunload and window.onbeforeunload html events, but they do mean the document is being closed / modified. There seems to be no generic way to detect the closing of the web browser, which was a surprise.
My application can run on multiple browser tabs, so the idea was to create a sort of link counter. It might work like this:
When the user launches my web app, in the page's onload handler, I increment the counter and store the value as a cookie. those. ++ pagecount and store the value in cookie.
In window.onunload, I decrement the counter (and store the new value in the cookie). Not sure if race conditions can be used when saving a cookie?
When pagecount == 0 I can clear.
This will work even when my web application is open in multiple browsers (but of course the same one).
I would appreciate any comments on this? Do you think this works? Reliable? Any problems I didn't anticipate?
EDIT: Here is some sample code how it might work.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function SetCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value + ";path=/";
}
function GetCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
return "";
}
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener){
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent){
el.attachEvent('on'+eventName, eventHandler);
}
}
function IncrementUnload() {
var current = GetCookie("Unloaded") - 0;
++current;
SetCookie("Unloaded", current, 1);
//here you would compare Loaded and unloaded and if
//loaded == unloaded - then perform any cleanup
}
function printcookie() {
var here = document.getElementById("here");
if(here) {
here.innerHTML += " " + (GetCookie("Loaded") - 0);
}
}
function printunloadcookie() {
var there = document.getElementById("there");
if(there) {
there.innerHTML += " " + (GetCookie("Unloaded") - 0);
}
}
function init() {
var current = GetCookie("Loaded") - 0;
++current;
SetCookie("Loaded", current, 1);
bindEvent(window, "beforeunload", IncrementUnload);
}
window.onload = init;
</script>
</head>
<body>
<b>Close this window or press F5 to reload the page.</b>
<br /><br />
<p id="here">Loaded=</p>
<p id="there">Unloaded=</p>
<form>
<input type="button" id="print_cookie" value="print Loaded cookie" onclick="printcookie();">
<br />
<input type="button" id="print_unload_cookie" value="print Unloaded cookie" onclick="printunloadcookie();">
</form>
</body>
</html>
source to share
I think this is a bad idea (or at least it will give you very inaccurate numbers):
You can never trust the presence of the cookies you think are a link. You won't have race conditions because modern browsers assign different themes to each tab and each one will store its own cookies.
Also, your web application should be incompatible with the client, it shouldn't have any idea how you are using it, you want to know multiple tabs on the same computer.
I can guess that you want this behavior for either of two things: 1. Improved user interface by providing multiple windows for presentation. 2. You want to avoid multiple access to the same context.
For the first option, you can have modal dialogs in jquery For the second option, you always have sessions to manipulate the context of your users.
Hope this helps you decide your approach.
source to share