LoSoft Blog

Wyobrazmy sobie pania Jole, ktora plodzi cos przez godzine, nastepnie klika przycisk Odswiez i cala jej prace szlag trafia. Znajoma sytuacja? Dlatego tez czasem musimy zabezpieczyc dane uzytkownikow, przed nimi samymi.

Najlepsza metoda na zabezpieczenie wiekszosci takich przypadkow, tzn. wywolanie funkcji Wstecz, Dalej, Odswiez czy Strona domowa, jest podpiecie sie pod zdarzenie onbeforeunload i wyswietlenie stosownego komunikatu, aby user mial czas zastanowic sie czy na pewno chce zrobic to co robi.

Ustawiamy zmienna isChanged, okreslajaca czy dane, np. na formularzach, sa zmienione.

var isChanged = false;
function setIsChanged(value)
{
	isChanged = value;
};

Tworzymy metode wyladowania strony

function preventLostData(event)
{
	if (!event) event = window.event;
	if (isChanged) {
		if (window.navigator.appName == "Microsoft Internet Explorer") {
			event.cancelBubble = true;
		}
		event.returnValue = "Nacisnij \"Zapisz zmiany\", aby uchronic sie przed utrata danych.";
		if (event.stopPropagation) {
			event.stopPropagation();
			event.preventDefault();
		}
	}
};

Podlaczamy nasza metode pod zdarzenie wyladowania strony

window.onbeforeunload = preventLostData;

Aby zasymulowac zmiane danych utworzymy modyfikatory, umozliwiajace zmiane wartosci zmiennej isChanged.

<input type="button" value="Symuluj zmiany" onclick="setIsChanged(true);" />
<input type="button" value="Zapisz zmiany" onclick="setIsChanged(false);" />

Powyzszy przyklad chroni przed zmiana strony, zamknieciem zakladki a nawet calej przegladarki (Nie testowane w ie < 7, ale oL4c ten $h|t, 8).

Tutaj mozna potestowac:

Przyklad: