kod

JavaScript ile Geri Düğmesi Nasıl Yönetilir

JavaScript tabanlı uygulamalarla ilgili önemli bir sorun, Geri düğmesini kırmalarıdır. Sayfadaki içeriği sunucudan yeni bir sayfa yüklemek yerine JavaScript ile güncellerseniz tarayıcı geçmişinde hiçbir giriş yapılmaz; Böylece kullanıcı Geri'yi tıklayıp önceki durumuna geri dönmeyi beklerken, bunun yerine önceki sitede yer alır.

Sürükle ve bırak, kullanıcıların web uygulamalarınızla etkileşimde bulunabilmeleri için harika bir yoldur. Ancak, uygulamalarınızda zaman geçirdikten sonra, kullanıcılar bir sayfaya geri dönmeyi bekleyen Geri düğmesini ve bunun yerine Başlangıç ​​ekranlarına geri dönmeleri durumunda kullanılabilirlik kazançları kaybedilecektir. Bu yazıda “Merhaba! HTML5 & CSS3 ”yazarı Rob Crowther, bu kaderden kaçınmak için HTML5 geçmiş API'sini nasıl kullanacağınızı gösterir.

Sorun basitçe gösterilebilir. İhtiyacınız olan tek şey, kullanıcı etkinliğine yanıt olarak sayfayı güncelleyen bir işlevdir: 

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

ve küçük bir işaretleme: 

Click Me
Recorded 0 clicks

Gerçek hayatta, web sayfanız AJAX aracılığıyla sunucudan yeni içerik almak gibi daha karmaşık bir şey yapıyor olabilir, ancak basit bir güncelleme konsepti göstermek için yeterlidir. Kullanıcı sayfayı ziyaret ettiğinde neler olacağını görelim.

  1. Kullanıcı ana sayfalarında başlar ve duydukları şaşırtıcı Click Me uygulamasını ziyaret etmeye karar verir.
  2. Tıklama Sayfasına gitmek için URL’yi yazarlar veya bir e-postanın bağlantısını takip ederler.
  3. Birkaç saniye süren keyifli etkileşimden sonra, sayfa durumu birkaç kez değişti.
  4. Ancak, kullanıcı tarayıcıda Geri düğmesini tıkladığında, önceki bir sayfa durumuna geri dönmek yerine, ana sayfalarına geçtiklerini fark eder.

Doclick () işlevi geçmiş API'den yararlanmak için güncellenebilir. Sayfa her güncellendiğinde, konumu da ayarlayacaktır. 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Kullanıcı daha önce olduğu gibi Tıklama Sayfasına ulaşır.
  2. Her tıklamadan sonra URL'nin güncellendiğine dikkat edin - bunun sonunda "##" belirdi.
  3. Geri düğmesini tıklamak şimdi yeri geri alır ve sayfa durumlarının geçmişe başarıyla eklendiğini gösterir. Ancak Geri düğmesini tıkladığınızda sayfa otomatik olarak önceki durumuna dönmez.

Sayfa durumu güncelleniyor

Tarihin güncellenmesi sorunun sadece bir kısmıdır; Ayrıca, sayfanın durumunu tarihe göre eşleştirmek için de güncelleyebilmeniz gerekir.

Tarihi yöneten kişi olduğunuz için sayfa durumunu yönetmeniz size kalmıştır. Sayfanızı location.hash'a yanıt olarak güncellemek için, hashchange olayını dinleyebilirsiniz: 

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

Doclick () işlevi artık sadece zaman değişkenini güncellemekten ve karma değiştirmekten sorumludur. Karma değişimi olayı pencere nesnesi üzerindedir; Ne zaman gerçekleşirse, hashın var olduğunu kontrol edersiniz. Gerçek bir uygulamada, bunun geçerli bir değere sahip olduğunu da kontrol etmek istersiniz. Ardından, karma değerindeki sayıların zaman değerini ayarlarsınız. Son olarak, belgeyi doğru sayfa durumunu yansıtacak şekilde güncelleştirin. Şimdi bu yeni koda bakalım:

  1. Daha önce olduğu gibi, URL'deki karma kullanıcı tıklandığında güncellenir.
  2. Ama şimdi, Geri düğmesi tıklandığında, onhashchange işlevi tetiklenir ve sayfa durumu URL ile eşleşecek şekilde sıfırlanır.

Location.hash adresini kullanma

Uygulamanızın belirli görünümlerini etiketlemek ve kullanıcının aralarında gezinmesine izin vermek istiyorsanız, location.hash özelliği ve ilişkili hashchange olayı yararlıdır. Google Mail, gelen kutunuz (#inbox), rehber (#contacts) ve diğer görünümler arasında gezinmenizi sağlayarak bu yaklaşımı kullanır. Gmail hesabınız varsa, farklı sayfalarda gezinirken URL'ye ne olduğuna bakın ve sonra geri tıkla.

Ancak, durum bilgisi devam ettiği sürece, karma yalnızca bir dizeyi saklamanıza izin verir. Daha karmaşık bir nesneyi kodlayabilirsiniz, ancak URL hızla uzun ve hantal hale gelir ve kullanıcılarınız için unutulmaz olmazdı. Tarihin bir parçası olarak depolanan daha karmaşık bilgilere ihtiyacınız varsa, daha iyi bir yaklaşım, hashın bir mağazadan daha fazla durum bilgisi almak için bir anahtar olarak kullanılması olacaktır. Buna kendi yaklaşımınızı katlayabilmenize rağmen, HTML5, sizin için history.pushState () yöntemi ve popstate olayı aracılığıyla sizin için bir API sağladı. Bu yöntemler karmaşık bir nesneyi kaydetmenizi ve yeniden yüklemenizi sağlar.

özet

Tarayıcının geçmişini yönetmenin, uygulamanızın bağlamında Geri düğmesinin daha hassas bir şekilde hareket etmesini sağladığını öğrendiniz. Ayrıca, mikro veri API'sı sayfa içeriklerindeki yapısal semantik bilgilere erişmenizi sağlar.

Bu teknik için hangi yöntemleri kullanıyorsunuz? Farklı bir yöntem geliştirdiniz mi? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, resme geri dön Shutterstock üzerinden.

javascript uygulamaları geri butonu merhaba html5 & css tarih api soyguncu