Wykrywanie użycia przycisku “wstecz” w JS

back-buttonPo co w ogóle może to być komuś potrzebne? Przykład z życia wzięty – w smartfonach przycisk „wstecz” ulokowany z lewej strony pod ekranem dotykowym wykorzystywany jest do powrotu do poprzedniego widoku aplikacji. Sam złapałem się na tym, że otwierając okienko pop-up (konkretnie lightbox w galerii zdjęć) użyłem tej małej strzałeczki zamiast ikony „X” na wyświetlaczu. I ku mojemu zdziwieniu zamiast wrócić do listy miniatur, wyszedłem całkowicie z tej strony.

Rozglądałem się więc za możliwością dodania zdarzenia w JavaScript, które będzie reagowało na próbę cofnięcia się. Aby to zrobić, dołączamy do dokumentu HTML bibliotekę jQuery, a następnie tworzymy skrypt lub dodajemy do sekcji head:

$(document).ready() {

	window.history.pushState('', null, './');

	$(window).on('popstate', function() {

		/* Nasz kod, na przykład: */
		if($('.my-example').is(':visible')) {

			$('.my-example').fadeOut();
			window.history.pushState('', null, './');
			return false;

		}
		else return true;
		/* Koniec kodu, który ukrywa element o klasie my-example */

	});

});

Powyższe kilka linijek sprawi, że jeżeli element .my-example jest widoczny na ekranie, to co wciśnięciu ikony „wstecz” w przeglądarce na komputerze lub smartfonie, zamiast wrócić do poprzedniej strony, najpierw ukryjemy .my-example.

komentarzy 25 do “Wykrywanie użycia przycisku “wstecz” w JS”

Skomentuj

CommentLuv