We Keep Coding

How to handle browser close event through Java script

I have an application which logs users session once he logins. Say i have view case page and when user click a case it would be locked by that user and the action is tracked by inserting an entry into lock table with the java Session, caseid and userId. Now when the user click any other tab within the application, including logout an action is called to delete the session id in the lock table for that user and case. I have a requirement to release this lock even when the user closes the browser close button. My backend code will handle the scenario when the elapsedTime of the lock is greater than 10mins. However when the user closes the browser and some other user logins to view the same case within this span of 10mins it still shows the lock by the previous user. So i have to catpure the browser close event and do the same action as i do for logout and other tab click. My below piexe of java script code works well in IE browser for browser close but doesnt work in chrome or firefox. Can someone suggest which event to use in chrome/firefox please?
<script type="text/javascript">
document.getElementById('logoff').onclick = function(){
sessionStorage.setItem('accept', '0');
location.href="/abc/logout/";
};
$(document).ready(function(){
var validNavigation = false;
// Attach the event keypress to exclude the F5 refresh (includes normal 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;
});
$("input[type=button]").bind("click", function() {
validNavigation = true;
});
window.onbeforeunload = function() {
if (!validNavigation) {
sessionStorage.setItem('accept', '0');
location.href="/abc/logout/";
}
};
});
</script>

It seems like using the onbeforeunload property is discouraged:
Typically, it is better to use window.addEventListener() and the beforeunload event, instead of onbeforeunload.
It should look like this:
window.addEventListener('beforeunload', function (e) {
// the absence of a returnValue property on the event will guarantee the browser unload happens
delete e['returnValue'];
if (!validNavigation) {
sessionStorage.setItem('accept', '0');
location.href="/abc/logout/";
}
});

Some way to detect close tab/browser for all browsers?

There are some way of detecting a close event from tab/browser without close when i click in other links in page or forms and valid for all browser, i tested "beforeunload" and other replies about this topic here and not working, i am testing in Firefox and Chrome
This is not working :
window.onbeforeunload = function (event) {
var message = 'Important: Please click on \'Save\' button to leave this page.';
if (typeof event == 'undefined') {
event = window.event;
}
if (event) {
event.returnValue = message;
}
return message;
};
Same when i close the tab or the browser is doing nothing; but yes when i click a link

Can we detect browsers refresh and back button events?

Anybody know how to detect browsers refresh and back button events in firefox using jquery or javascript.

For back button:
window.addEventListener('popstate', function (event) {
//Your code here
});
For Refresh:
window.onbeforeunload = function () {
// Your code here
}

You can try WindowEventHandlers.onbeforeunload:
window.onbeforeunload = function(e) {
};
and
$(window).unload(function() {
//
});
Also check Browser Back Button Detection:
I have made a very reusable javascript class, that can be simply
dropped into your web page, and when the user clicks back, it will
call a function. The default function on this call is a javascript
alert “Back Button Clicked”.
To replace this functionality, you simply need to override the OnBack
function. This can be done by using the code below.
<script type="text/javascript">
bajb_backdetect.OnBack = function()
{
alert('You clicked it!');
}
</script>
This will now replace the “Back Button Clicked” alert with a “You
clicked it!’” alert.

Check this page: Manipulating the browser history
You can probably get something working with using history.pushState and window.onpopstate

You can use the following events:
window.onpopstate for back button press.
window.onpopstate = (e) => {
// your logic goes here
};
window.onbeforeunload for refresh or tab close.
window.onbeforeunload = (e) => {
// your logic here
e.preventDefault();
e.returnValue = 'There are unsaved changes. Sure you want to leave?';
};

Stopping the user from navigating away using `window.onbeforeunload`

I am trying to display an alert when the user clicks the back, forward or refresh browser buttons, but I am not getting the desired output...
<script type="text/javascript">
$(document).ready(displayAlert());
function displayAlert() {
window.onbeforeunload = function () {
return "Are you sure want to LOGOUT the session ?";
};
}
</script>

WindowEventHandlers.onunload The unload event is raised when the window is unloading its content and resources. The resources removal is processed after the unload event occurs.
window.onunload = funcRef;
WindowEventHandlers.onbeforeunload An event that fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.
window.onbeforeunload = function(e) {
return 'Dialog text here.';
};
IE has issues with onload event and Opera has with onbeforeunload. So to reach to a solution which would handle both the situations I came across user3253009 answer
/*Code Start*/
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = 'Cookies for you.. If you stay back!!?'; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
/*Code End*/
Gist. Hope it helps!
Update
If you want to show a Bootstrap Modal when user is navigating away from you page,then you can try something like below:
window.onbeforeunload = function(event) {
event.preventDefault();
$('#cancel_modal').modal('show');
};

I want to call function on window unload

I am trying to display confirmation box using window.confirm on window unload event.
If a user clicks on the OK button on confirmation box then I want to call one function and if user clicks the CANCEL button then window should be get closed.
My code is:
<script>
function confirmit(){
var result=window.confirm("Are you sure?");
if(result) {
// close all child windows
} else{
// window should not get close
}
}
</script>
<body onunload='confirmit();' >
But the problem is if I click on CANCEL button, window is getting closed.
Please help me.

You can't prevent unload to stop the page from unloading. You need to bind to onbeforeunload instead. You should just return the string you want to display to the user from the event handler (note that in some browsers the string may not be displayed)
<script type="text/javascript">
window.onbeforeunload = function(e){
var msg = 'Are you sure?';
e = e || window.event;
if(e)
e.returnValue = msg;
return msg;
}
</script>
More info here
JSFiddle Example here

change your code to this to make it work cross-browser:
<script>
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Do you really want to exit?';
}
// For Safari
return 'Do you really want to exit?';
};
</script>
<body>
...
note that this is using the onbeforeunload-event (more information / view an example) where the return-value has to be the message that should be shown to the user.
i don't know if you'll have a chance to react on the confirmation to do something after that (closing child-windows for example), but i don't think so.