Kód

Jak řídit tlačítko zpět pomocí JavaScriptu

Jedním z hlavních problémů s aplikacemi založenými na jazyce JavaScript je to, že přeruší tlačítko Zpět. Pokud aktualizujete obsah na stránce pomocí JavaScriptu, spíše než načítat novou stránku ze serveru, v historii prohlížeče se nezobrazuje žádný záznam; takže když uživatel klepne Back, očekává, že se vrátí zpět do předchozího stavu, místo toho skončí na předchozí stránce.

Drag and drop je skvělý způsob, jak mohou uživatelé komunikovat s vašimi webovými aplikacemi. Avšak zisky použitelnosti se ztratí, pokud po uplynutí času, který se pohybuje v aplikaci, uživatelé kliknou na tlačítko Zpět a očekávají, že se vrátí na stránku a místo toho se vrátí na svou domovskou obrazovku. V tomto článku "Dobrý den! HTML5 & CSS3 "autor Rob Crowther vám ukáže, jak používat historii API HTML5, abyste se tomuto osudu vyhnuli.

Problém lze prokázat jednoduše. Vše, co potřebujete, je funkce, která aktualizuje stránku v reakci na aktivitu uživatele: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

a malá značka: 

Click Me
Recorded 0 clicks

V reálném životě by vaše webová stránka měla dělat něco komplikovanějšího, jako je získávání nového obsahu ze serveru přes AJAX, ale jednoduchá aktualizace stačí k prokázání konceptu. Uvidíme, co se stane, když uživatel navštíví stránku.

  1. Uživatel začíná na domovské stránce a rozhodne se, že navštíví úžasnou aplikaci Click Me, o které se dozvěděli.
  2. Zadejte adresu URL nebo následujte odkaz z e-mailu a přejděte na stránku Click Me.
  3. Po několika sekundách příjemné interakce se stav stránky několikrát změnil.
  4. Ale když uživatel klikne na tlačítko Zpět v prohlížeči, zjistí, že namísto návratu k předchozímu stavu stránky přeskočí na domovskou stránku.

Funkci doclick () můžete aktualizovat, abyste využili historii rozhraní API. Pokaždé, když je stránka aktualizována, nastaví také location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Uživatel přichází na stránku Click Me stejně jako předtím.
  2. Všimněte si, že po každém kliknutí se adresa URL aktualizuje - na konci se objeví "#".
  3. Klepnutím na tlačítko Zpět se vrátíte zpět na číslo # 2, což ukazuje, že stavy stránek byly úspěšně přidány do historie. Všimněte si však, že klepnutím na tlačítko Zpět nevrací stránku automaticky do předchozího stavu.

Aktualizace stavu stránky

Aktualizace historie je pouze součástí problému; musíte také mít možnost aktualizovat stav stránky tak, aby odpovídal stavu v historii.

Protože vy spravujete historii, je na vás, abyste spravovali stav stránky. Chcete-li aktualizovat svou stránku v reakci na změnu location.hash, můžete poslouchat událost hashchange: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

Funkce doclick () je nyní zodpovědná pouze za aktualizaci proměnné časů a změnu hash. Hromadná událost je na objektu okna; pokud k tomu dojde, zkontrolujte, zda existuje hash. V reálné aplikaci byste také chtěli zkontrolovat, zda má platnou hodnotu. Dále nastavíte hodnotu časů jako číslo v hash. Nakonec aktualizujete dokument tak, aby odrážel správný stav stránky. Podívejme se na tento nový kód:

  1. Stejně jako dříve, hash URL se aktualizuje po kliknutí uživatele.
  2. Ale nyní, když kliknete na tlačítko Zpět, spustí se funkce onhashchange a stav stránky se resetuje tak, aby odpovídal adrese URL.

Použití location.hash

Vlastnost location.hash a přidružená událost hashchange jsou užitečné, pokud chcete označit konkrétní pohledy vaší aplikace a umožnit uživateli navigaci mezi nimi. Služba Google Mail používá tento přístup tím, že umožňuje navigaci mezi doručenou poštu (#inbox), kontakty (# kontaky) a další pohledy - máte-li účet Gmail, podívejte se, co se děje s adresou URL při procházení na různé stránky a pak klikněte zpět.

Ale pokud jde o informace o stavu, hash umožňuje pouze uložit řetězec. Mohli byste zakódovat složitější objekt, ale URL by se rychle stalo dlouhým a nepraktickým a nebude pro vaše uživatele zapamatovatelné. Pokud potřebujete složitější informace uložené jako součást historie, lepší přístup by bylo použití šachu jako klíče pro vytažení dalších informací o stavu z nějakého úložiště. Ačkoli byste se k tomu mohli vrátit, HTML5 poskytl API, který to pro vás provede metodou history.pushState () a popstate událostí. Tyto metody umožňují uložit a znovu načíst složitý objekt.

souhrn

Naučili jste se, že správa historie prohlížeče umožňuje, aby se tlačítko Back choval mnohem rozumněji v kontextu vaší aplikace, zatímco API pro mikrodata poskytuje přístup k strukturovaným sémantickým informacím v obsahu stránky.

Co používáte pro tuto techniku? Vyvinuli jste jinou metodu? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, přejít zpět přes Shutterstock.

javascript aplikací tlačítko Zpět ahoj html5 & css historie api rob crowther