Angular ui-router Replace browser alert with ngSweetAlert on refresh/reload - angularjs

Question

I've read and searched for this and found variations (for example, on click) but not for the browser reload/refresh that works.
Basically, what I want is for when a user reloads, refreshes or F5 in the browser, instead of the regular alert confirm, the sweetalert dialog popups up asking the user if they want to refresh, losing whatever information they have viewed, with an OK/Cancel.
In my controller, I have this:
$scope.$on('$destroy', function() {
window.onbeforeunload = undefined;
});
window.onbeforeunload = function (e) {
e.preventDefault();
SweetAlert.swal({
title: "I display correctly but....",
text: "before page refreshes and do not wait for user to click ok",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",confirmButtonText: "Ok",
cancelButtonText: "Cancel",
closeOnConfirm: true,
closeOnCancel: true },
function(isConfirm){
if (isConfirm) {
console.log('do something...')
}
});
return undefined;
};
$scope.$on('$locationChangeStart', function( event, toState, toParams, fromState, fromParams) {
SweetAlert.swal({
title: "I display and wait for the user to click but too late",
text: "...after the page refreshes",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",confirmButtonText: "Ok",
cancelButtonText: "Cancel",
closeOnConfirm: true,
closeOnCancel: true },
function(isConfirm){
if (isConfirm) {
console.log('do something...')
}
});
});
The "window.onbeforeunload" part loads at the right time (before the page reloads/refreshes) but does not wait for the user selection.
The "$scope.$on('$locationChangeStart',..." part loads too late (after the page has reloaded/refreshed) but does wait for the user selection.
Besides '$locationChangeStart,' I've also tried '$stateChangeStart' and '$routeChangeStart' to no avail.
What am I missing to make this work? Any help or direction would be greatly appreciated.

Answer 1

You should not override native functions such as alert() or confirm() because they are blocking and they are blocking for a good reason.
But if you really want to do it, it is possible like this
/**
* Definition of global attached to window properties <br/>
*/
(function() {
nalert = window.alert;
Type = {
native: 'native',
custom: 'custom'
};
})();
/**
* Factory method for calling alert().
* It will be call a native alert() or a custom redefined alert() by a Type param.
* This defeinition need for IE
*/
(function(proxy) {
proxy.alert = function () {
var message = (!arguments[0]) ? 'null': arguments[0];
var type = (!arguments[1]) ? '': arguments[1];
if(type && type == 'native') {
nalert(message);
}
else {
// TODO: Call to SweetAlert()
document.write('<h1>I am redefiend alert()<br/>Alert say: '+message+'</h1>');
}
};
})(this);
More on this here
JavaScript: Overriding alert()