How to achieve dialog box open whenever user tries to refresh or reload the page ?
I have tried many links that suggested me to deduct the keypress/keydown/beforeload/beforeunload of refresh but these have not worked somehow.
here is ,I have tried. with my scenario.
var App = angular.module('App', ['ngRoute']);
// configure our routes
App.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'contact.html',
controller : 'contactController'
});
});
App.controller('mainController', function($scope) {
//but not here if the user refresh the page
$scope.message = 'MainCtrl!';
});
App.controller('aboutController', function($scope) {
$scope.message = 'aboutController';
// if this is the current controller and page being refresh by the user activity
// prompt the user to save before you reload...
});
App.controller('contactController', function($scope) {
$scope.message = 'contactController';
// if this is the current controller and page being refresh by the user activity
// prompt the user to save before you reload...
});
in index.html
--------------------
<script>
//it is working . it is invoking in each page. But needs to invoke at certain controller means it should check
// it is current/exact page where user has to save data before reloading
jQuery(function () {
// to check and get page refreshed & reload
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload';
myEvent(chkevent, function (e) {
var confirmationMessage = ' ';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
if (myEvent) {
localStorage.clear();
// redirect to
$state.go('gotohome');
}
});
</script>
Can anyone give me any functional example that would work in all types of browser?
Its so important for me , I am not able to do anyway.
Thanks.
具有会话变量的approcah在以下文章中进行了解释: http : //www.tedpavlic.com/post_detect_refresh_with_javascript.php
I would suggest you to use this as a reference to detect whether the page has been refreshed or reloaded:
Check if page gets reloaded or refreshed in Javascript
And please provide some code so that we can help you with the opening of dialog box.
I got two solution one is mine strategy which is to open dialog on certain page.
$rootScope.refreshmodal= false;
$rootScope.refreshModal = function(){
$rootScope.refreshmodal = $rootScope.refreshmodal ? false : true;
}
window.onload = function (e) {
if(e.returnValue){
if(e.currentTarget.location.pathname == "/contact") {
//alert("ask to user ")
$rootScope.refreshmodal=true; // opening a UI modal
}else if(e.currentTarget.location.pathname == "/about"){
$rootScope.refreshmodal=true; // opening a UI modal
}else {
alert(" donot ask ");
}
}
This not working on onbeforeload.
2nd one is from here : https://gist.github.com/981746/3b6050052ffafef0b4df and it is not redirecting to after confirmation to home.
as you are coding in angular you may try this
$window.onbeforeunload = function (e) {
return "";
};
$window.onload=function(){
window.location.href="gowhereever you want";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.