Code

Hoe de Back-knop beheren met JavaScript

Een groot probleem met op JavaScript gebaseerde applicaties is dat ze de knop Terugbreken. Als u inhoud op de pagina bijwerkt met JavaScript in plaats van een nieuwe pagina van de server te laden, staat er geen vermelding in de browsergeschiedenis; dus wanneer de gebruiker op Back klikt, in de verwachting dat hij terug zal gaan naar de vorige status, komen deze in plaats daarvan op de vorige site terecht.

Slepen en neerzetten is een geweldige manier voor gebruikers om te communiceren met uw webtoepassingen. Maar de winst voor bruikbaarheid zal verloren gaan als gebruikers, na tijd te hebben besteed aan het verplaatsen van uw applicatie, op de knop Terug klikken, in de verwachting een pagina terug te gaan en in plaats daarvan terug te keren naar hun startscherm. In dit artikel "Hallo! HTML5 & CSS3 "auteur Rob Crowther laat je zien hoe je de HTML5 history API gebruikt om dat lot te vermijden.

Het probleem kan eenvoudig worden aangetoond. Het enige wat u nodig hebt, is een functie die de pagina bijwerkt als reactie op gebruikersactiviteit: 

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

en een kleine opmaak: 

Click Me
Recorded 0 clicks

In het echte leven zou uw webpagina iets ingewikkelder doen, zoals het ophalen van nieuwe inhoud van de server via AJAX, maar een eenvoudige update is voldoende om het concept te demonstreren. Laten we eens kijken wat er gebeurt als de gebruiker de pagina bezoekt.

  1. De gebruiker begint op zijn startpagina en besluit de geweldige Click Me-app te bezoeken waarvan hij of zij heeft gehoord.
  2. Ze typen de URL in of volgen een link vanuit een e-mail om naar de Click Me-pagina te gaan.
  3. Na een paar seconden prettige interactie is de paginastatus verschillende keren gewijzigd.
  4. Maar wanneer de gebruiker op de knop Terug in de browser klikt, merken ze dat in plaats van terug te gaan naar de status van een vorige pagina, ze naar hun startpagina springen.

De doclick () -functie kan worden bijgewerkt om te profiteren van de geschiedenis-API. Telkens wanneer de pagina wordt bijgewerkt, wordt ook de locatie.hash ingesteld: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. De gebruiker komt als eerder op de Click Me-pagina aan.
  2. Merk op dat de URL nu wordt bijgewerkt na elke klik - "#" is aan het einde ervan verschenen.
  3. Als u op de knop Vorige klikt, wordt de locatie nu teruggezet naar # 2, waarmee wordt aangetoond dat paginastatussen met succes aan de geschiedenis zijn toegevoegd. Houd er echter rekening mee dat wanneer u op de knop Terug klikt, de pagina niet automatisch terugkeert naar de vorige staat.

Paginastatus updaten

Het bijwerken van de geschiedenis is slechts een deel van het probleem; u moet ook de status van de pagina kunnen bijwerken om overeen te komen met de staat in de geschiedenis.

Omdat jij degene bent die de geschiedenis beheert, is het aan jou om de paginastatus te beheren. Om uw pagina bij te werken naar aanleiding van de wijziging van location.hash, kunt u naar de hashchange-gebeurtenis luisteren: 

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

De functie doclick () is nu alleen verantwoordelijk voor het bijwerken van de variabele times en het wijzigen van de hash. De hashchange-gebeurtenis bevindt zich in het vensterobject; wanneer het plaatsvindt, controleer je of de hash bestaat. In een echte applicatie zou je ook willen controleren of het een geldige waarde had. Vervolgens stelt u de waarde van tijden in als het aantal in de hash. Ten slotte werkt u het document bij om de juiste paginastatus weer te geven. Laten we naar deze nieuwe code kijken:

  1. Net als voorheen wordt de hash in de URL bijgewerkt terwijl de gebruiker klikt.
  2. Maar nu, wanneer op de knop Terug wordt geklikt, wordt de onhashchange-functie geactiveerd en wordt de paginastatus opnieuw ingesteld om overeen te komen met de URL.

Gebruik van location.hash

De eigenschap location.hash en de bijbehorende hashchange -gebeurtenis zijn handig als u bepaalde weergaven van uw toepassing wilt coderen en de gebruiker de mogelijkheid wilt geven er tussen te navigeren. Google Mail gebruikt deze aanpak door u toe te staan ​​te navigeren tussen uw inbox (#inbox), contacten (#contacten) en andere weergaven. Als u een Gmail-account hebt, bekijkt u wat er met de URL gebeurt terwijl u naar verschillende pagina's navigeert en klik dan terug.

Maar voor zover informatie over de status gaat, laat de hash je alleen een string opslaan. Je zou een complexer object kunnen coderen, maar de URL zou snel lang en onpraktisch worden en zou niet voor je gebruikers gedenkwaardig zijn. Als u meer complexe informatie nodig hebt die is opgeslagen als onderdeel van de geschiedenis, is een betere methode om de hash te gebruiken als sleutel om verdere statusinformatie uit een winkel te halen. Hoewel u hier uw eigen benadering naartoe kunt rollen, heeft HTML5 een API geleverd om dit voor u te doen via de methode history.pushState () en de popstate-gebeurtenis. Met deze methoden kunt u een complex object opslaan en opnieuw laden.

Overzicht

U hebt geleerd dat wanneer u de geschiedenis van de browser beheert, u de knop Terug op een meer verstandige manier kunt laten werken in de context van uw toepassing, terwijl de API voor microdata u toegang geeft tot gestructureerde semantische informatie op de pagina-inhoud.

Welke toepassingen voorziet u voor deze techniek? Heb je een andere methode ontwikkeld? Laat het ons weten in de comments.

Uitgelichte afbeelding / thumbnail, ga terug beeld via Shutterstock.

JavaScript-toepassingen terug knop hallo html5 & css geschiedenis api rob crowther