如何打开模型或对话框？

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.

我尝试了许多链接，建议我扣除keypress / keydown / beforeload / beforeunload刷新，但这些都没有以某种方式工作。

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.

谢谢。

4 个解决方案

#1

An approcah with the session variables is explained in the article below: http://www.tedpavlic.com/post_detect_refresh_with_javascript.php

下面的文章解释了包含会话变量的approcah：http：//www.tedpavlic.com/post_detect_refresh_with_javascript.php

#2

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

检查页面是否在Javascript中重新加载或刷新

And please provide some code so that we can help you with the opening of dialog box.

并提供一些代码，以便我们可以帮助您打开对话框。

#3

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.

这不适用于onbeforeload。

2nd one is from here : https://gist.github.com/981746/3b6050052ffafef0b4df and it is not redirecting to after confirmation to home.

第二个来自这里：https：//gist.github.com/981746/3b6050052ffafef0b4df并且在确认回家之后它没有重定向到。

#4

as you are coding in angular you may try this

因为你在角度编码，你可以试试这个

$window.onbeforeunload = function (e) {  
                return "";
            }; 
            $window.onload=function(){              
                window.location.href="gowhereever you want";
            }

#1