how to capture closing of a browser tab - javascript

We would like to throw a specific message before a user closes the browser. Is there a mechanism which will work across all major browsers (like IE, firefox, chrome, opera)

Check onbeforeunload:
window.onbeforeunload = function (e) {
var e = e || window.event;
if (has_message_to_throw) {
// For IE and Firefox
if (e) {
e.returnValue = 'Specific message';
}
// For Safari
return 'Specific message';
}
};

From Firefox Documentation
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome etc.
});

Related

How to display a warning message before leaving site by clicking on tab in chrome?

I am trying to warn the user before closing the tab. I search on many places for the right code but It seems that it doesn't work in chrome.
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. Are you sure?";
}
</script>
In IE it works fine. I don't need to display any custom message. I just need to warn the user that they will leave the site. Any idea why this doesn't work? Is there any other way to force the browser to display warning before leaving site?
EDITED: I use Google Chrome version 74.0.3729.169
window.onbeforeunload = function (e) {
var message = "Your confirmation message goes here.",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};
Use the confirm() function:
function confirmExit(e) {
if (!confirm("You have attempted to leave this page. Are you sure?")) {
e.preventDefault();
return false;
}
}
I found the solution thanks to #barbsan. The link that he provided contains the solution.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome etc.
});
https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent

Not able to remove the beforeunload event

We are using following code to show default pop up on refresh, tab close events
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, function (e) { // For >=IE7, Chrome, Firefox
if ($('#timeExpiredtxt').hasClass('hide') && $("#submittedAnsResponseText").hasClass("hide")) {
var confirmationMessage = 'You are attempting an assessment. Are you sure you want to leave this assessment?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
});
I want to remove and unbind this event at runtime. I tried the following code but no luck.
$(window).off("beforeunload");
$(window).off("onbeforeunload");
window.onbeforeunload = null;
$(window).unbind("beforeunload");
Had to change the event binding code.
function closeIt() {
if ($('#timeExpiredtxt').hasClass('hide') && $("#submittedAnsResponseText").hasClass("hide")) {
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
}
window.onbeforeunload = closeIt;
and unbind used below code
window.onbeforeunload = null;

How to call function on Return true

i have following code which return a popup message for reload page or not.
I have to perform a function when user click on "Reload page" and remain on same page when user click on "Not Reload".
window.onbeforeunload = function()
{
return "";
};
How can i do this?
Try with this:
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compatable
myEvent(chkevent, function (e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = ' '; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
</script>
Fetched from this article. This is their demo

mousewheel event is not working in ie

I am working on an application and I need to track the mouse wheel movement but my functions are not working as I expect in Internet Explorer. It works in all other browsers but not IE, any ideas on what I am doing wrong?
JS...
var request = true;
var onMouseWheelSpin = function(event) {
if(request === true){
request = false;
var nDelta = 0;
if (!event) { event = window.event; }
// cross-bowser handling of eventdata to boil-down delta (+1 or -1)
if ( event.wheelDelta ) { // IE and Opera
nDelta= event.wheelDelta;
if ( window.opera ) { // Opera has the values reversed
nDelta= -nDelta;
}
}
else if (event.detail) { // Mozilla FireFox
nDelta= -event.detail;
}
if (nDelta > 0) {
zoomFun( 1, event );
}
if (nDelta < 0) {
zoomFun( -1, event );
}
if ( event.preventDefault ) { // Mozilla FireFox
event.preventDefault();
}
event.returnValue = false; // cancel default action
}
}
var zoomFun = function(delta,e) {
if(delta > 0){ // zoom in
alert("In");
}else{ // zoom out
alert("Out");
}
request = true;
}
var setupMouseWheel = function(){
// for mouse scrolling in Firefox
var elem = document.getElementById("zoom");
if (elem.addEventListener) { // all browsers except IE before version 9
// Internet Explorer, Opera, Google Chrome and Safari
elem.addEventListener ("mousewheel", onMouseWheelSpin, false);
// Firefox
elem.addEventListener ("DOMMouseScroll", onMouseWheelSpin, false);
}else{
if (elem.attachEvent) { // IE before version 9
elem.attachEvent ("onmousewheel", onMouseWheelSpin);
}
}
}
I am calling the setupMouseWheel function onload in the body aka
<body onload="setupMouseWheel();">
Thanks for the help!
To listen to the mouse wheel, it's best to listen to DOMMouseScroll, mousewheel and wheel. The last one is IE, and is the only one you're not listening for.
I'll also point out that jQuery has a shortcut for binding multiple events:
$(elem).on("DOMMouseScroll mousewheel wheel", onMouseWheelSpin);
update: noticed that though you tagged this as jQuery, you're not actually using it. To do this without jQuery, just carry on as you are but add a wheel event listener like the others.
I finally found a great cross browser approach here for anyone who has a similar issue
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

window.onbeforeunload in firefox 7.0.1

I am using this code to display some msg before tab is closed in firefox:
function callUnloadFunction(){
return "Hello world";
}
...
window.onbeforeunload = callUnloadFunction;
However, the msg that is displayed is not "Hello world". has firefox stopped listening to that event?
Thanks
Consider using jQuery's unload event.
You should call the event in your function:
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Any string';
}
// For Safari
return 'Any string';
};
https://developer.mozilla.org/en/DOM/window.onbeforeunload
https://developer.mozilla.org/en/DOM/window.onunload

Categories