search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[JS] Za pomocą JavaScript zapytaj użytkownika o zdanie zanim opuści on okno przeglądarki

[JS] Za pomocą JavaScript zapytaj użytkownika o zdanie zanim opuści on okno przeglądarki

Dzisiejszy wpis będzie krótki, bo będzie dotyczył w sumie nieskomplikowanej funkcjonalności związanej z obsługą zamykania okna/zakładki przeglądarki. Bardzo często tego typu zdarzenia JavaScript można spotkać w aplikacjach internetowych.

Przykładowy kod HTML symulujący interfejs aplikacji

1
2
3
4
5
<form action="/" method="POST">
  <input type="text">
  <input type="text">
  <button type="submit">Zapisz</button>
</form>

W tym przykładzie, interfejsem aplikacji będzie formularz z dwoma polami tekstowymi. W momencie zakmnięcia okna/zakładki lub odświeżenia ich zawartości będzie pojawiał się komunikat z treścią przygotowaną przez programistę oraz dwoma typami przycisków.

Interakcja z użytkownikiem za pomocą JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// po załadowaniu strony
window.onload = function () {
  // sprawdzamy czy istnieje interfejs obsługi localStorage w przeglądarce
  // czyli rodzaj bazy danych udostępnianej przez przeglądarki
  if (localStorage) {
    var inputs = document.getElementsByTagName('input');
 
    // jesli istnieje, to wypełnij pola formularza zapisanymi wartościami
    // jesli wartości nie istnieją, to pola będą puste
    inputs[0].value = localStorage['input-jeden'];
    inputs[1].value = localStorage['input-dwa'];
  }
};
// przed wyjściem ze strony lub jej odświeżeniem
window.onbeforeunload = function () {
  // sprawdzenie czy istnieje interfejs localStorage
  if (localStorage) {
    // jeśli użytkownik potwierdzi że chce zapisać stan aplikacji
    if (confirm("Czy chcesz zapisać obecny stan formularza na później?")) {
      var inputs = document.getElementsByTagName('input');
 
      // zapisz wartości pól z formularza w localStorage
      localStorage['input-jeden'] = inputs[0].value;
      localStorage['input-dwa']   = inputs[1].value;
    }
  }
};

Powyższy kod ma na celu wykonać 2 zadania:

  1. po załadowaniu strony:
    • sprawdzić czy funkcjonalność localStorage jest dostępna w przeglądarce,
    • wypełnić pola tekstowe zapisanymi wartościami pochodzącymi z localStorage.
  2. przed opuszczeniem strony:
    • sprawdzić czy funkcjonalność localstorage jest dostępna w przeglądarce,
    • sprawdzić czy użytkownik potwierdził chęć zapisania danych z formularza na później,
    • zapisać dane w przeglądarkowej bazie danych.

Podsumowanie

Na podstawie powyższego kodu widać wyraźnie jak prosto można za pomocą czytego JavaScript osiągnąć odpowiednią interakcję z użytkownikiem aplikacji, który chce akurat ją opuścić. Dzięki temu, można dać mu szansę na zastanowienie się, czy chciałby aby dane z formularza, który akurat wypełniał, zostały zapisane.

Tego typu komunikaty można spotkać w wielu miejscach, między innymi na Facebooku lub w usługach edycji kodu typu JSFiddle.
Jak zwykle, w takich przypadkach należy się zastanowić czy warto się pytać użytkownika o zdanie czy może lepiej prewencyjnie zapisać dane bez pytania i potem ewentualnie podczas ładowania ponownie formularza zapytać o zdanie.

Należy też pamiętać o tym, że użytkownicy mają tendencję do nieczytania komunikatów, które mają domyślny wygląd. Niestety, na chwilę obecną nie jesteśmy w stanie w jakikolwiek sposób zmodyfikować wygląd powiadomienia z okna przeglądarki. Można jednak przygotować własne okna komunikatów, które będą zastępowały domyślny. Jednak wymaga to trochę więcej zachodu.

  • Comandeer

    Owszem, można machnąć customowe okienka, ale mają jedną, bardzo poważną wadę: nie są modalne. Zatem przeglądarka nie poczeka aż user się zdecyduje co pacnąć w naszym confirmie (de facto browsery mają API do blokowania UI, tyle, że wciąż nie jest ono publiczne; może w końcu wypłynie na wierzch, jak Shadow DOM).

    Osobiście zapisywałbym bez pytania o zgodę (albo przynajmniej w ustawieniach apki dał taką możliwość).

    Ah, oczywiście jest plugin jQuery od tego 😉 http://sisyphus-js.herokuapp.com/

    Btw Chrome ostatnio eksperymentuje z jakimś fajnym API do autouzupełniania formularzy (ma zapisaną wizytówkę usera i po wywołaniu metody na formularzu, automatycznie wypełnia go danymi z tejże wizytówki).

  • Ciekawe i przydatne.

  • Bardzo przydatna rzecz, szczególnie w panelach administracyjnych, w których dodajemy sporo treści;-)