Как предотвратить закрытие окна браузера в AngularJS, пока обещание не будет выполнено - PullRequest
1 голос
/ 04 ноября 2019

У меня есть следующий код:

$window.onbeforeunload = function (event) {
    event.preventDefault();
    // some asynchronous code 
};

Я хочу, чтобы событие onbeforeunload ожидало выполнения асинхронного кода. Не уверен, что это может быть достигнуто во всех браузерах, поддерживающих AngularJS.

Ответы [ 2 ]

2 голосов
/ 04 ноября 2019

Независимо от того, используете ли вы AngularJS или любой другой фреймворк, задержка выгрузки окна до завершения асинхронного действия больше не поддерживается современными браузерами, так как это создает неудобства для пользователя.

Однако, если предположить,что асинхронная вещь, которую вы хотите сделать, это сделать запрос API, тогда современное решение состоит в том, чтобы вместо этого использовать метод navigator.sendBeacon(). Он гарантированно отправляется браузером без блокировки, даже после того, как окно было выгружено. Это лучшее решение для всех.

Обратите внимание, что запросы маяка должны отправляться как запросы POST, поэтому вашему API необходимо поддерживать этот метод для любых конечных точек, которые вы хотите использовать в обработчике выгрузки.

0 голосов
/ 04 ноября 2019

Можно создать обработчик, который смотрит на флаг счетчика:

var spinnerFlag = false;

$window.addEventListener('beforeunload',unloadHandler);
$scope.$on("$destroy", function() {
    $window.removeEventListener('beforeunload',unloadHandler);
});

function unLoadHandler(e) {
  if (spinnerFlag) {
    // Cancel the event
    e.preventDefault();
    // Chrome requires returnValue to be set
    e.returnValue = '';
  };
});

Затем можно установить и снять флаг:

spinnerFlag = true;
var promise = promiseBasedAPI(arguments).finally(function() {spinnerFlag = false;});

Это установит флаг перед запускомасинхронная операция и снимите флажок, если обещание либо выполнено успешно, либо отклонено.

Пользователю будет предложено подтвердить выгрузку страницы, если обещание не разрешено.

Для получения дополнительной информации см.

...