We Keep Coding

Not able to detect back, refresh and close events in on (IOS) apple phone browser

We already have code to detect back, refresh and close events in our web application.
window.addEventListener("beforeunload", function (e) {
(e || window.event).returnValue = "";
return "";
});
We are displaying a save changes pop-up before the user clicks on back, refresh, or closes the browser. This is working perfectly fine in most of the web and mobile browsers except in the apple phone browser. How can we achieve the above functionality in the apple phone browser?
I have also tried the pagehide event for the apple phone browser, but it only detects the close event, not back and refresh. Also, the save changes pop-up is not displayed.
window.addEventListener("pagehide", function (e) {
(e || window.event).returnValue = "";
return "";
});
Any help is appreciated, or any other alternative solution would be helpful. Thanks in advance.

not sure about refresh. But for detecting back you can use this:
window.history.pushState(null, "", window.location.href);
window.onpopstate = function() {
//back button clicked
};

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

How to display popup with custom HTML on browser close tab using JavaScript/Jquery ? I have custom HTML popup

I want to display custom HTML Popup when user close web browser using Jquery/Javascript.I have googled it but not found any solution to achieve that.
Please help me. I am stuck since many days !!
Thanks

Assuming you want to prevent users from just closing the tab, you can provide them an alert if you use the following:
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
Original answer from: https://stackoverflow.com/a/10311375/6524598

Unfortunately, using the only available methods "onbeforeunload" or "unload" it is not possible to customize the popup displayed when the browser or browser tab is closed, because for the two methods you need to return a string.
Infact you cannot use your own dialog boxes (or jQueryUI modal dialogs) to override beforeunload method.

How to Fire Angularjs Event when close browser or window?

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

Distinguish between navigating away from the site and refreshing the page using Javascript

I am working on a site that provides the user with quotes and reservations for rental equipment. If the user gets more than a few steps into the processes and chooses to close the browser or navigate away before finishing then the client would like to offer then a special deal. The client would like to prevent the window from closing and ask them for their phone number so they can call them with a better rate if one becomes available.
I can prevent the window from closing and the prevent the browser from navigating away. When this happens, a div is displayed with a little for for the user to submit and an option to go ahead and close the window. This all works fine. The problem is that if the user refreshes the page or hits the back or forward buttons then the action is being blocked just as if the user was closing the browser. But I don't care if they go forward or back or refresh the page because that means they are still in the reservation process. Unfortunately, I cannot distinguish between the two types of events.
I am attaching a function to the onbeforeunload event to trigger the message to the user. The site I am working on is an ASP.NET site, if that is helpful to anyone.
Here is the code I am using. The elements divSecondClose and divThankYou are both set to display:none when the page first loads. <%=DisplayThankYou%> is set to 'true' after the form has been submitted so that a thank you message appears.
var showSecondCloseOnExit = true;
var displayThankyou = '<%=DisplayThankYou %>';
if (displayThankyou == true)
{
var divSecondClose = document.getElementById('divSecondClose');
divSecondClose.style.display = '';
var divThankYou = document.getElementById('divThankYou');
divThankYou.style.display = '';
showSecondCloseOnExit = false;
}
else
{
addListener(window, 'beforeunload', CloseWindowEvent, false);
var allLinks = document.getElementsByTagName('a');
for (var linkIndex = 0; linkIndex < allLinks.length; linkIndex++)
{
addListener(allLinks[linkIndex], 'click', function(){showSecondCloseOnExit = false;}, false);
}
}
function CloseWindowEvent(e) {
if(!e) e = window.event;
if (showSecondCloseOnExit)
{
var divSecondClose = document.getElementById('divSecondClose');
divSecondClose.style.display = '';
showSecondCloseOnExit = false;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'RATE CHANGE NOTIFICATION\nWould you take a moment before you leave to help us serve you better?';
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
}

Have you attempted to sniff the various different values of the event:
*type
*target element
*mouse position
Here is a link with instructive information on accessing each of these. You may be able to figure out what you want through a combination of the above, although the checking all the cases across many browsers seems quite brutal.
http://www.quirksmode.org/js/events_properties.html#type
Also, see these articles for attaching to an event when the window closes and that is all:
How to create popup window when browser close
However, you may also advise the product owner of what you are doing that the cost on doing the functionality you are describing is getting rather high.
NOTE: See Slak's comment here: How to capture the browser window close event? . It may be what you're after.