Is it possible to detect before the user changes tab or closes the tab on a mobile browser.
I tried
$(window).bind('beforeunload', function () {
// AddToCart(123, 123, 123, 123);
return "Message";
});
but that did not work.
Any help would be great.
Thanks
try onbeforeunload instead,
window.onbeforeunload = function() {
return 'You have unsaved changes!';
}
NOTE: Modern browsers display their own message rather than custom message for security reasons
Related
I'm trying to show a confirmation pop before user close the tab or went to another tab like facebook, gmail, GoDaddy & others do.
My code working for Firefox but not for other browser like chrome, safari etc.
<script type="text/javascript">
var hook = true;
window.onbeforeunload = function() {
if (hook) {
return "Did you save"
}
}
function unhook() {
hook=false;
}
</script>
Call unhook() onClick for button and links
No Block URL
Please help me to get this fixed.
If you take a look at the api of window.beforeunload(), you can see that, though widely the basic unload event is supported, a custom message can only be set in internet explorer and certain versions of some browsers. So just use the normal standard message.
This feature (custom messages) was often exploited by malicous sites to interact with user in a harmful or malipulative way. This is why many browsers don't support this anymore, until some patch removes the threat for users.
Standard message solution:
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
Look at Ouibounce it helps detect when a user is about to leave the page(It looks at the position of the cursor). You could probably build off this library.
Hello and thank you for your time!
I was learning by following a React course: https://app.pluralsight.com/library/courses/react-flux-building-applications/table-of-contents
And it looks like the React Router API has changed a lot since the course was filmed.
In the course it is taught how to use willTransitionFrom and willTransitionTo which both look like they are deprecated:https://github.com/ReactTraining/react-router/issues/1388
I would like to follow along, and I have tried to do the detect if the user is going to leave the current page. I have done:
window.addEventListener('beforeunload', (event) => {
if (!(window.confirm("DO YOU really want to exit a fun page like this?"))) {
event.preventDefault();
}
});
And also:
window.onbeforeunload = (event) => {
if (!(window.confirm("DO YOU really want to exit a fun page like this?"))) {
event.preventDefault();
}
};
It looks like neither of them gets fired, because I would like to show the confirm dialog when you try to load another page.
I have read:
How to check if user is refreshing the page or navigating to other page
How to display a pop up, when a user tries to leave the current page?
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
Thank you for your help.
Try this one (picked from https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload)
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
return confirmationMessage; // Gecko, WebKit, Chrome <34
});
I want to clear local storage values when user close browser or window tab using in angularjs. I tried the following code.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
alert("exit");
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
In the above code it asks the confirmation alert messages when refresh the page and also close the page. But i want to fire angularjs event when close the browser/Window Tab only no need to ask the confirmation messages.
In the last project I worked on, I used the following code:
$window.onbeforeunload = function (event) {
if (self.form.$dirty) {
return 'You have made changes, but you did not save them yet.\nLeaving the page will revert all changes.';
}
}
First it performs a check to see if the data in the form has been changed. If so, when the user tries to close the window or go to another url, a popup will be shown stating that there are unsaved changes.
So in this event you have access to the controller, so all angular events should be able to fire.
This one worked for me, but you need to pay attention that the custom message doesn't work in most of the browsers, (such as chrome, IE, firefox).
window.onbeforeunload = () => {
return 'Are you sure you want to leave without saving?';
}
This will fired when the user refresh or close the tab or window, with the browser default message.
i have tried this code, it works for me!
window.onbeforeunload = close;
function close(){
// do something...
localStorage.clear();
sessionStorage.clear();
return null;
}
I want detect in my web page if a Chrome Extension has been enabled(after having been disabled or opposite.
I want to know a chrome extension's enable/disable state in my web page.
I'm sorry about that I do not speak English well.
But I sure would like to know the answer to this question.
Thank you.
The only chrome API that comes close is chrome.management but it doesn't call onEnabled event listener for your own extension and, anyway, you can't use it from a web page.
So here's a workaround.
On your page send a custom event periodically:
var extensionIsEnabled = false;
var messageTimeout;
function pingExtension() {
document.dispatchEvent(new CustomEvent("pingMyExtension", {detail: "hello there"}));
messageTimeout = setTimeout(function() { extensionIsEnabled = false; }, 1000);
}
document.addEventListener("pingbackFromMyExtension", function(e) {
clearTimeout(messageTimeout);
extensionIsEnabled = true;
console.log("extension is alive!", e);
}
setInterval(pingExtension, 1000);
And in your extension's content script which is allowed for this page url in manifest.json:
document.addEventListener("pingMyExtension", function(e) {
console.log("ping received", e);
document.dispatchEvent(new CustomEvent("pingbackFromMyExtension", {detail: "hi, hi"}));
}
In my chat application I need to get confirmation from user, when my application closes.
So I used the window.onbeforeunload for confirmation alert and window.onunload for
logout().
But both functions are working in IE and Chrome. (Application works fine)
window.onbeforeunload not working in Opera and my message will not get displayed in Firefox.
window.onunload not working in Safari, Opera and Firefox.
My JavaScript code will be:
// Used for confirmation, to closing the window
window.onbeforeunload = function () {
return "Are you sure want to LOGOUT the session ?";
};
// Used to logout the session, when browser window was closed
window.onunload = function () {
if((sessionId != null)&&(sessionId!="null")&& (sessionId != ""))
logout();
};
I also tried the same function with JQuery,
<script type="text/javascript">
$(window).on('beforeunload', function() {
return 'Are you sure want to LOGOUT the session ?';
});
$(window).unload(function() {
if ((sessionId != null) && (sessionId != "null") && (sessionId != "")) {
logout();
}
});
</script>
Unfortunately, the methods you are using are unsupported in those browsers. To support my answer (this unsupportive behaviour) I have given links below.
onbeforeunload and onunload not working in opera... to support this
onbeforeunload in Opera
http://www.zachleat.com/web/dont-let-the-door-hit-you-onunload-and-onbeforeunload/
Though the onunload event doesn't work completely, you can use onunload to show a warning if a user clicks a link to navigate away from a page with an unsaved form.
onunload not working in safari... to support this
https://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
You could rather try using the pagehide event in the safari browser in lieu of onunload.
onunload not working in firefox... to support this
https://bugzilla.mozilla.org/show_bug.cgi?id=681636
They are yet to come up with a solution in FF too.
Here is the working solution for ie, firefox and chrome:
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 = 'Are you sure to leave the page?'; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
I was able to get it to work in IE and FF with jQuery's:
$(window).bind('beforeunload', function(){
});
instead of: unload, onunload, or onbeforeunload
I got the solution for onunload in all browsers except Opera by changing the Ajax asynchronous request into synchronous request.
xmlhttp.open("POST","LogoutAction",false);
It works well for all browsers except Opera.
The onunload event is not called in all browsers. Worse, you cannot check the return value of onbeforeunload event. That prevents us from actually preforming a logout function.
However, you can hack around this.
Call logout first thing in the onbeforeunload event. then prompt the user. If the user cancels their logout, automatically login them back in, by using the onfocus event. Kinda backwards, but I think it should work.
'use strict';
var reconnect = false;
window.onfocus = function () {
if (reconnect) {
reconnect = false;
alert("Perform an auto-login here!");
}
};
window.onbeforeunload = function () {
//logout();
var msg = "Are you sure you want to leave?";
reconnect = true;
return msg;
};
Firefox simply does not show custom onbeforeunload messages.
Mozilla say they are protecing end users from malicious sites that might show misleading text.