Pytanie Jak obsługiwać / zapobiegać nawigacji lub przeładowaniu przeglądarki w angularjs?


Chciałbym wykryć w mojej kanciastej aplikacji, gdy użytkownik nawiguje z dala od lub przeładowuje stronę.

Aplikacja (która wykorzystuje pewien proces logowania) powinna wtedy rozróżnić, że została ponownie załadowana, więc użytkownik nie utraci swoich danych uwierzytelniających, a aplikacja powinna być w stanie przywrócić niezbędne informacje z localStorage.

Proszę zaproponować najlepsze techniki "obsłużyć" przeładowanie / nawigację przeglądarki.


18
2017-07-30 15:01


pochodzenie




Odpowiedzi:


Wszystkie zmienne javascript i w pamięci znikną po przeładowaniu. W js wiesz, że strona została ponownie załadowana, gdy kod jest uruchamiany ponownie po raz pierwszy.

Aby obsłużyć samo ładowanie (które obejmuje naciśnięcie klawisza F5) i podjąć działanie przed ponownym załadowaniem lub nawet anulowaniem, użyj zdarzenia "beforeunload".

var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
    // do whatever you want in here before the page unloads.        

    // the following line of code will prevent reload or navigating away.
    event.preventDefault();
});

21
2017-07-30 15:11



Gdzie dokładnie umieścisz ten fragment? - Sebastialonso
@Sebastialonso wewnątrz funkcji .run () w twoim module. Dokumenty modułu - docs.angularjs.org/api/ng/type/angular.Module - Ben Wilde
Dziękuję za to. - Sebastialonso
windowElement.on('beforeunload, ...) nie działa dla mnie. Zrobił windowElement.on('onbeforeunload, ...) zamiast tego działało zgodnie z oczekiwaniami. - mcabe
to mi nie pasowało - MilesStanfield


Miałem ten sam problem, ale odpowiedź Bena nie działała dla mnie.

Ta odpowiedź postaw mnie na dobrej drodze. Chciałem dodać ostrzeżenie w niektórych stanach, ale nie wszystkie. Oto jak to zrobiłem (prawdopodobnie nie najczystszy sposób):

window.onbeforeunload = function(event) {
   if ($state.current.controller === 'ReloadWarningController') {
      // Ask the user if he wants to reload
      return 'Are you sure you want to reload?'
   } else {
      // Allow reload without any alert
      event.preventDefault()
   }
 };

(w ReloadWarningController definicja, która miała $state wstrzykiwany)


3
2017-10-23 17:57