Potwierdzenie opuszczenia strony

0

Chciałbym na jednej stronie HTML dodać potwierdzenie opuszczenia strony. W internecie znalazłem kilka gotowców, które tak naprawdę był tą samą implementacją. Na StackOverflow nieraz pojawia się to pytanie i zawsze proponują to samo.

Zastosowałem jeden taki gotowiec, teoretycznie najbardziej uniwersalny, ale działa to tak sobie:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        Page exit confirm test.
        
        <a href="www.google.com">Link</a>

        <script type="text/javascript">      


            function goodbye(e)
            {
                if(!e) e = window.event;
                //e.cancelBubble is supported by IE - this will kill the bubbling process.
                e.cancelBubble = true;
                e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

                //e.stopPropagation works in Firefox.
                if (e.stopPropagation)
                {
                    e.stopPropagation();
                    e.preventDefault();
                }
            }
            window.onbeforeunload = goodbye; 



        </script>
    </body>
</html>

Jak testowałem to wydawało mi się, że raz nie zadziałał, więc postanowiłem przetestować różne scenariusze w dwóch przeglądarkach i dwóch systemach i faktycznie w jednym przypadku działa, w drugim nie działa.

Pytanie jest bardzo proste: Jak wymusić potwierdzenie opuszczenia strony i jak to jest najczęściej robione, żeby działało? Może w tych gotowcach z internetu czegoś brakuje lub są dostosowane do starych wersji przeglądarek i dlatego nie zawsze działają?

Próbowałem przenieść e.preventDefault(); poza if (e.stopPropagation), ale to nic nie zmienia.

Firefox i Chrome na komputerze z Ubuntu Linux:
Otwieram stronę, potem zamykam przeglądarkę - nie działa
Otwieram stronę, klika ma jej powierzchni, potem zamykam przeglądarkę - działa
Otwieram stronę, otwieram nową zakładkę, zamykam poprzednią - nie działa
Otwieram stronę, klika ma jej powierzchni, otwieram nową zakładkę, zamykam poprzednią - działa
Otwieram stronę, klika na jej powierzchni i naciskam klawisz F5 - działa
Otwieram stronę, klikam myszką okrągłą strzałkę w celu odśnieżenia - nie działa
Otwieram stronę, klikam zawarty w niej link - działa

Firefox na komputerze
Otwieram stronę, naciskam klawisz F5 - nie działa

Chrome na komputerze
Otwieram stronę, naciskam klawisz F5 - działa

Firefox i Chrome na telefonie z Android
Otwieram zakładkę, w niej wczytuję stronę i zamykam zakładkę - nie działa
Otwieram zakładkę, w niej wczytuję stronę, klikam na niej palcem i zamykam zakładkę - nie działa
Otwieram stronę i odświeżam przyciskiem z okrągłą strzałką - nie działa
Otwieram stronę, klikam na niej i odświeżam przyciskiem z okrągłą strzałką - działa
Otwieram stronę i kliknięcie zawartego w niej linku - działa
Otwieram stronę w nowej karcie, a potem otwieram inną z ulubionych - nie działa

Chrome na telefonie
Otwieram stronę i odświeżam poprzez przeciągnięcie palcem - działa
Otwieram stronę w nowej karcie, klikam na niej palcem, potem otwieram inną z ulubionych - działa

Firefox na telefonie
Otwieram stronę w nowej karcie, klikam na niej palcem, potem otwieram inną z ulubionych - nie działa

4

Nie napalaj się.
To nigdy nie zadziała w pełni

Np wyłączenie łącza internetowego (udostępnianie z komorki) albo zamkniecie klapy notebooka

Jaki prawdziwy problem chcesz rozwiazać?

0

Nie napalaj się.
To nigdy nie zadziała w pełni

Co jakiś czas spotykam się z takim komunikatem, zwykle nie zwracam uwagi na to, jak jest on zrobiony w danej stronie (raczej łatwo zapytać google, jak zrobić potwierdzenie wyjścia niż analizować źródło strony, w której to jest), a skoro to takie popularne, to musi być łatwe do zrobienia i wśród programistów frontendowych, którzy to nieraz robili, wiadome, jak to zrobić. A może ci programiści robią tak, jak ja zrobiłem lub nawet prościej, jak jest tutaj https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event i już?

Np wyłączenie łącza internetowego (udostępnianie z komorki) albo zamkniecie klapy notebooka

To raczej to już nie jest samo zamknięcie strony i to raczej marginalny przypadkek, będący poza kompetencjami JavaScript. Mi chodzi o scenariusze związane z samą przeglądarką i działaniami użytkowniak. To tak samo, jak Word czy Excel przy zamknięciu pyta się, czy zapisać plik, ale mogę zamknąć laptop i wszystko stracę bez pytania.

Jaki prawdziwy problem chcesz rozwiazać?

Problemem jest zapobiegnięcie wyłączeniu strony niechcący. W zasadzie, problem uważam za rozwiązany, jednak zważając na to, że stwierdziłem, iż to nie jest doskonałe, a z pewnością tysiące programistów przede mną robiło to samo po tysiąc razy, to może jest wypracowane doskonałe rozwiązanie, tylko ja do niego nie dotarłem?

W banku to jest, w Facebooku to jest, w wielu innych miejscach, których nie pamiętam, też to jest, pytanie jest tylko takie, jak programiści to robią?

1

Działanie alertów podczas zamknięcia strony nie jest już gwarantowane w przeglądarkach, nie jest też generalnie dobrą praktyką. Użytkownik powinien mieć możliwość zamknięcia strony bez żadnych spowalniaczy.

Bieżący stan aplikacji można zapisać chociażby w LocalStorage i aktualizować po interakcjach użytkownika, jednak nawet to nie gwarantuje utraty danych, ponieważ użytkownik może ustawić sobie usuwanie wszystkiego po zamknięciu przeglądki.

0

Działanie alertów podczas zamknięcia strony nie jest już gwarantowane w przeglądarkach, nie jest też generalnie dobrą praktyką. Użytkownik powinien mieć możliwość zamknięcia strony bez żadnych spowalniaczy.

Rozumiem, ze to jest "deprecated" i tego powinno się unikać, o ile nie jest możliwe inne rozwiązanie danego problemu. jak np. utrzymywanie bieżącego stanu w LS? Rozumiem, że jeżeli w ogóle zdarza się taki alert, to najprawdopodobniej jest zrobiony tak, jak ja napisałem lub w przytoczonym linku do MDN?

0

Zapewne tak, chociaż ja takiego alertu od dawna nie widziałem. Dostając wymagania aplikacji od biznesu zdarza się, że chcą takiej opcji dialogowej dla formularzy, jednak w większości przypadków nie jest to potrzebne. Formularze można skracać, upraszczać. Można też robocze wersje trzymać w backendzie aplikacji. Obecnie nawet Word czy Excel z podpiętą synchronizacją nie pytają o takie rzeczy.

Powraca więc pytanie - co chcesz osiągnąć?

0

Wiele stron czy to google docs i inne to oni nie przesyłają całego dokumentu do serwera, a każdą modyfikację coś jak git system.

Czyli jak zmienisz 2 litery to te dwie litery są wysyłane, a nie cały dokument za każdą modyfikacją.

Są tego plusy takie, że praktycznie cały czas ma się wszystko zapisane nawet po opuszczeniu strony.

A tak lokalnie można w localstorage sobie zapisywać lub bezpośrednio na backendzie.

0
SkrzydlatyWąż napisał(a):

Powraca więc pytanie - co chcesz osiągnąć?

Jak już wspomniałem, chodzi o zwyczajne zapobiegnięcie zamknięcia strony. Już nieraz się zdarzało, że myszka mi się przesunęła i kliknąłem przycisk z paska zakładek lub przy zamykaniu kart, zamknąłem nie tą, co chciałem. Moim zdaniem, ten cel został osiągnięty, bo i tak, 90% niezamierzonych poczynań to jeden ze scenariuszy, w którym dopisałem "działa".

Pytanie nie jest "co zrobić, aby otrzymać jakiś tam cel", tylko pytanie jest "jak programiści robią zapytanie przy opuszczaniu strony". Jeżeli to jest rzecz nieuwzględniona w standardzie HTML5, uznana za przestarzałą i nie jest możliwe obsłużenie scenariuszy z dopiskiem "nie działa", to sprawę uważam za wyjaśnioną. Jak pytałem Google, jak zrobić potwierdzenie przy opuszczaniu strony, to dostawałem ciągle to samo, więc pytanie jest, czy "wszyscy" właśnie tak to robią, nie przejmując się, że to niezbyt dobrze działa (w przypadkach, gdy jest to uzasadnione), czy robią inaczej, a ja nie znalazłem.

Autysta napisał(a):

Wiele stron czy to google docs i inne to oni nie przesyłają całego dokumentu do serwera, a każdą modyfikację coś jak git system.

Czyli jak zmienisz 2 litery to te dwie litery są wysyłane, a nie cały dokument za każdą modyfikacją.

Są tego plusy takie, że praktycznie cały czas ma się wszystko zapisane nawet po opuszczeniu strony.

Nic nowego pod słońcem, tak działały terminale kompatybilne z VT100, 40 lat temu to był był taki sprzęt https://pl.wikipedia.org/wiki/VT100 https://en.wikipedia.org/wiki/VT420 na łączu szeregowym, a obecnie jest to program konsole, gnome-terminal, xterm, PuTTY przez SSH. Zasada działania w ogóle nie zmieniła się, programy są kompatybilne z tymi prehistorycznymi terminalami, które nic nie zapamiętują, a każde naciśnięcie klawisza jest wysyłane do serwera.

2

Alerty wstrzymujące zamknięcie karty zbyt często były używane w niewłaściwy sposób. Sporo złośliwych stron utrudniało i nadal utrudnia ich zamknięcie, stosując m.in. takie właśnie alerty, wszelkie dostępne okna dialogowe, w tym odpalając pobierania.

Karty w przeglądarce możesz przypinać, otwierać ostatnio zamknięte, wywołać z historii, włączyć globalny alert na zamknięcie przeglądarki itp. albo nawet ściągnąć rozszerzenia do zarządzania kartami, wykracza to jednak poza funkcjonalność samych witryn. Oprogramowywanie zwykłego zamknięcia karty z poziomu JS stało się nieistotne. Nawet statystycznie, bo czasy przebywania na stronach stają się krótsze. Trzymanie użytkownika na stronie nie zawsze ma sens - raczej użytkownika przez stronę się "prowadzi".

1 użytkowników online, w tym zalogowanych: 0, gości: 1