How to Fire Angularjs Event when close browser or window? - javascript

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;
}

Related

onbeforeunload event functioning

I have a requirement where when we close the tab or close the browser I need to perform some processes. When user will close the tab, there should be no popup getting displayed. I should be able to directly trigger the Leave button of the popup. The code which I am using sometimes work and sometimes not. Is it possible to close the tab or browser without popup or the popup is mandatory. Please advise. Below is my code :-
Without Popup(sometimes work and sometimes not)
window.onbeforeunload = function() {
//debugger;
perform();
};
//With this i get a popup which I don't want
window.addEventListener("beforeunload", function (e) {
perform();
(e || window.event).returnValue = null;
return null;
});

Custom Modal When User Closes Chrome Tab

I want to create a custom modal window that will display when the user closes the Chrome Tab where the app is running (clicks the X) and says "Are you sure you want to close?". However, no matter what I have tried, I either keep getting the default Chrome "are you sure you want to leave this site" message, or it just closes the window with no modal showing up.
I have this code firing when the window is going to close:
window.onbeforeunload = function(e) {
e.preventDefault();
$('#myModal').show();
};
I have read that "onbeforeunload" doesn't work anymore, specifically from here: https://developers.google.com/web/updates/2017/03/dialogs-policy. I haven't gotten any of the alternatives to work though.
Is there something that I am not getting? I've been at this for hours now and have made no progress.
Try this:
window.onbeforeunload = function(e) {
alert();// your modal -> $('#myModal').show();
return false;
}

React, Detect if user is going to leave the current page

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
});

Detect before user closes/changes mobile browser tab

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

Stop window.event with Javascript window.confirm?

I am trying to have a confirm box come up when the viewer tries to close the window, that allows the user to stay on the current page (by click Cancel), or continue closing the window (by click OK).
My code is as follows...
<script>
function confirm_exit(){
var message = window.confirm("My message.");
if (message == true) {
// Output when OK is clicked
window.close();
} else {
// Output when CANCEL is clicked
???????
}
}
</script>
I am not sure because either one I click closes the window. I need Cancel to remain at the current page, and OK to close the window or proceed with the users window.event.
Hope this makes sense.
Courtesy of a certain website with a dash in it's name:
window.onbeforeunload = leaveConfirm;
function leaveConfirm() {
var leaveThePageMessage = 'Are you sure you want to leave this page?';
return leaveThePageMessage;
}​
This should work in all browsers (except for Opera).
Try:
window.onbeforeunload = function()
{
return confirm('Are you sure you want to close?');
}

Categories