Koda

Så här hanterar du Back-knappen med JavaScript

Ett stort problem med JavaScript-baserade applikationer är att de bryter tillbaka-knappen. Om du uppdaterar innehåll på sidan med JavaScript istället för att ladda upp en ny sida från servern finns ingen inmatning i webbläsarens historia. så när användaren klickar på Tillbaka, förväntar sig att gå tillbaka till föregående skick, hamnar de på den föregående sajten i stället.

Dra och släpp är ett bra sätt för användare att interagera med dina webbapplikationer. Men användbarhetsvinsterna kommer att gå vilse om du, efter att ha spenderat tid på att flytta genom din ansökan, klickar användarna på knappen Tillbaka, förväntar sig att gå tillbaka till en sida och istället gå tillbaka till startskärmen. I den här artikeln "Hej! HTML5 & CSS3 "författaren Rob Crowther visar hur du använder HTML5-historik API för att undvika det ödet.

Problemet kan enkelt demonstreras. Allt du behöver är en funktion som uppdaterar sidan som svar på användaraktivitet: 

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

och lite uppmärksamhet: 

Click Me
Recorded 0 clicks

I det verkliga livet skulle din webbsida göra något mer komplicerat, som att hämta nytt innehåll från servern via AJAX, men en enkel uppdatering är tillräcklig för att visa konceptet. Låt oss se vad som händer när användaren besöker sidan.

  1. Användaren börjar på sin hemsida och bestämmer sig för att besöka den fantastiska Click Me applikationen som de har hört talas om.
  2. De skriver in webbadressen eller följer en länk från ett e-postmeddelande för att komma till Click Me-sidan.
  3. Efter några sekunder av njutbar interaktion har sidtillståndet ändrats flera gånger.
  4. Men när användaren klickar på knappen Tillbaka i webbläsaren finner de att de i stället för att gå tillbaka till en tidigare sida skickar till deras hemsida.

Funktionen doclick () kan uppdateras för att utnyttja historik API. Varje gång sidan uppdateras kommer den också att ställa in location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Användaren kommer till Click Me-sidan som tidigare.
  2. Observera att nu webbadressen uppdateras efter varje klick - "#" har dykt upp i slutet av det.
  3. Om du klickar på knappen Tillbaka tar nu platsen tillbaka till # 2, vilket visar att sidstater har lagts till i historiken. Men observera att att klicka på knappen Tillbaka inte automatiskt returnerar sidan till dess tidigare tillstånd.

Uppdaterar sidstat

Uppdatering av historiken är bara en del av problemet. du måste också kunna uppdatera sidans tillstånd för att matcha staten i historiken.

Eftersom du är den som hanterar historiken, är det upp till dig att hantera sidstaten. För att uppdatera din sida som svar på location.hash ändras kan du lyssna på hashchange-händelsen: 

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';}

Funktionen doclick () är nu endast ansvarig för uppdatering av tidsvariabeln och ändring av hash. The hashchange-händelsen finns på fönstret objektet; När det sker, kontrollerar du att hash existerar. I en riktig applikation vill du också kontrollera att den hade ett giltigt värde. Därefter anger du värdet av tider för att vara numret i hasen. Slutligen uppdaterar du dokumentet för att återspegla rätt sidstatistik. Låt oss titta på den här nya koden:

  1. Som tidigare uppdateras hash i webbadressen när användaren klickar.
  2. Men nu, när Back-knappen klickas, utlöses funktionen onhashchange och sidstatusen återställs för att matcha webbadressen.

Använda location.hash

Egenskapen Location.hash och den associerade hashchange-händelsen är användbara om du vill märka särskilda visningar av din ansökan och låta användaren navigera mellan dem. Google Mail använder den här metoden genom att låta dig navigera mellan din inkorg (#inbox), kontakter (#contacts) och andra visningar. Om du har ett Gmail-konto, kolla på vad som händer med webbadressen när du navigerar till olika sidor och klicka sedan tillbaka.

Men så långt som statlig information går, tillåter hashen dig bara att lagra en sträng. Du kan koda ett mer komplext objekt, men webbadressen skulle snabbt bli lång och otrygg och skulle inte vara minnesvärd för dina användare. Om du behöver mer komplex information lagrad som en del av historien, skulle det vara bättre att använda hasen som en nyckel för att dra ytterligare information från någon butik. Även om du kan rulla ditt eget tillvägagångssätt till detta, har HTML5 tillhandahållit ett API för att göra det för dig genom history.pushState () -metoden och popstate-händelsen. Med dessa metoder kan du spara och ladda om ett komplext objekt.

Sammanfattning

Du har lärt dig att hantera webbläsarens historia gör att du kan göra knappen Back på ett mer förnuftigt sätt i samband med din ansökan, medan microdata API ger dig tillgång till strukturerad semantisk information i sidinnehållet.

Vilka användningsområden tänker du på den här tekniken? Har du utvecklat en annan metod? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, gå tillbaka bild via Shutterstock.

javascript-applikationer tillbakaknapp hej html5 & css historia api råna crowther