Angular ui-router Заменить оповещение браузера на ngSweetAlert при обновлении/перезагрузке

Я читал и искал это и нашел варианты (например, по клику), но не для перезагрузки/обновления браузера, которые работают.

По сути, я хочу, чтобы когда пользователь перезагружает, обновляет или F5 в браузере, вместо обычного подтверждения предупреждения появляется всплывающее диалоговое окно с предупреждением, спрашивающее пользователя, хотят ли они обновить, теряя любую информацию, которую они просмотрели, с OK /Отмена.

В моем контроллере у меня есть это:

 $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...')
            }
        });
});

Часть «window.onbeforeunload» загружается в нужное время (до перезагрузки/обновления страницы), но не ожидает выбора пользователя.

Часть "$scope.$on('$locationChangeStart',..." загружается слишком поздно (после перезагрузки/обновления страницы), но ожидает выбора пользователя.

Помимо «$ locationChangeStart», я также пробовал «$ stateChangeStart» и «$ routeChangeStart», но безрезультатно.

Что мне не хватает, чтобы сделать эту работу? Любая помощь или направление будет принята с благодарностью.


angularjs sweetalert onbeforeunload angular-ui-router
person purplerice    schedule 13.06.2016    source источник
comment
Я был бы счастлив использовать SweetAlert2, если бы это упростило... (но, просто просматривая документацию, я не уверен, что это так).   -  person purplerice    schedule 13.06.2016
comment
На мой взгляд, вы должны оставаться с родными alert() или confirm(), потому что они блокируют. Sweetalert и т. д. - это просто div / popup-диалог. Таким образом, пользователь по-прежнему сможет покинуть страницу, не выбирая, хочет ли он сохранить свои данные или нет, верно?   -  person David Votrubec    schedule 13.06.2016
comment
Давид Вотрубец: спасибо за ответ. Нативное оповещение/подтверждение поставляется с флажком, который позволяет пользователю отключать оповещения — то, что я не могу допустить для критической функциональности. Если пользователь вот-вот потеряет то, что он создал, я должен всегда предупреждать его об этом.   -  person purplerice    schedule 13.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы не должны переопределять встроенные функции, такие как alert() или confirm(), потому что они блокируют и блокируют по уважительной причине.

Но если очень хочется, то можно вот так

/** 
 * 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);

Подробнее об этом здесь JavaScript: Overriding alert()

person David Votrubec    schedule 13.06.2016