Gecko2'den sonra tanıtıldı (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5, geçmiş varlıklarının eklenmesine ve değiştirilmesine olanak tanıyan histtory.pushState() ve history.replaceState() adlı iki yöntem sunar. Aynı zamanda, bu yöntemler window.onpostate olayı ile çalışır.
Yönlendiriciyi, durum değiştirildikten sonra xmlhttpRequest nesnesi için oluşturulan http başlığında kullanılabilen history.pushState() yöntemiyle değiştirin. Bu yönlendirici, XMLHttpRequest oluşturulduğunda belgenin URL'si olacaktır.
pushState mevcut sayfanın kaydını geçmişe eklemek için kullanılırken, replaceState ve pushState tamamen aynı şekilde kullanılır; tek fark, geçmişteki mevcut sayfanın kaydını değiştirmek için kullanılmasıdır.
örnek
Diyelim ki http://mozilla.org/foo.html sayfa JS'yi çalıştırıyor
var stateObj = { foo: "bar" }; history.pushState(stateObj, "sayfa 2", "bar.html");
Bu yöntem, URL adres çubuğunun http://mozilla.org/bar.html görünmesini sağlar,Ama tarayıcı mevcut olsa bile bar.html sayfayı açmıyor。
Şimdi tekrar varsayalım ki kullanıcı http://google.com erişmeye devam ediyor ve geri tıklıyor. Bu sırada, URL adres çubuğu http://mozilla.org/bar.html sayfa bir popstate etkinliği (chrome) alacak, bu da stateObj'nin bir kopyasını içerecek. Bu sayfa foo.html gibi görünüyor. +
Bu noktada tekrar tıklıyoruz ve URL dönüyor http://mozilla.org/foo.html,document başka bir popstate olayı ve null state nesnesi alıyor. Bu iade işlemi belgenin içeriğini değiştirmez. (Belki bir süre sonra yüklenmeye çalışır...) chrome)
pushState yöntemi
pushState() üç parametreye sahiptir: state object, title (artık göz ardı edilmiş, yönetilmiyor), URL (isteğe bağlı). Detaylar:
· durum nesnesi – Durum nesnesi, pushState() yöntemiyle oluşturulan yeni bir geçmiş varlığıyla ilişkili bir Javascrip{filter}t nesnedir. Geçmişe eklemek istediğiniz kayıtlarla ilgili bilgileri saklamak için kullanılır. Durum nesnesi herhangi bir Json dizisi olabilir. Firefox, durum nesnesine erişmek için kullanıcının sabit diskini kullandığı için, bu nesnenin maksimum depolama alanı 640k'dır. Eğer bu değerden büyükse, pushState() metodu bir istisna oluşturur. Daha fazla depolama alanına ihtiyacınız varsa, yerel depolamayı kullanın.
· başlık—Firefox artık bu parametri görmezden geliyor, ancak gelecekte kullanılabilir. Şimdi en güvenli yöntem, gelecekteki değişiklikleri önlemek için boş bir diziyi aktarmaktır. Ya da eyaleti belirtmek için kısa bir başlık iletebilirsiniz
· URL - Bu parametre yeni geçmiş varlığının URL'sini iletmek için kullanılır, tarayıcı pushState() yöntemini çağırdıktan sonra bu URL'yi yüklemeyecektir. Ama belki bir süre sonra bu URL'yi yüklemeye çalışacaktır. Örneğin, kullanıcı tarayıcıyı yeniden başlattıktan sonra, yeni URL mutlak bir yol olmayabilir. Eğer göreli bir yolsa, mevcut URL'ye göreceli olacaktır. Yeni URL'nin mevcut URL ile aynı alan alanı olması gerekir, aksi takdirde pushState() bir istisna oluşturur. Bu parametre isteğe bağlıdır ve boş olduğunda belgenin mevcut URL'si olarak yerleştirilir.
Bir anlamda, pushState() metodunu çağırmak, window.locatio{filter}n = "#foo" ayarına benzer; her ikisi de mevcut belgeyle ilişkili başka bir geçmiş varlığı oluşturur ve etkinleştirir, ancak pushState()'nin bazı ek avantajları vardır:
Yeni URL, yalnızca hash ayarlanmışsa window.locatio{filter}n aynı belgede kalmaya devam ederse, mevcut URL ile aynı alan alanında olan herhangi bir URL olabilir.
l Gerek yoksa URL'yi değiştirmeden bırakabilirsiniz. Karşılaştırma için window.locatio{filter}n = "#foo" ayarlayın; Mevcut hash'iniz #foo değilse, sadece yeni geçmiş varlıkları oluşturulur
Yeni geçmiş varlığınızla rastgele verileri ilişkilendirebilirsiniz. Hash tabanlı bir yaklaşımda, tüm ilgili veriler kısa bir diziye kodlanmalıdır.
pushState() yöntemi, eski ve yeni url'ler sadece farklı hash olsa bile hash değişim süresini oluşturmaz.
replaceState() yöntemi
history.replaceState() ise pushState() gibi kullanılır, ancak replaceState() mevcut geçmiş varlığını değiştirmek için kullanılır, yeni bir varlık oluşturmak yerine. Bu yöntem, belirli kullanıcı davranışlarına yanıt olarak bir durum nesnesini veya mevcut geçmiş varlığını güncellemeniz gerektiğinde bazen faydalı olabilir ve durum nesnesinin veya güncel geçmiş varlığının URL'sini güncellemek için kullanılabilir.
Popstate etkinliği
Geçmiş varlığı değiştirildiğinde, popstate olayı gerçekleşir. Geçmiş varlığı pushState ve replaceState yöntemleriyle oluşturuluyorsa, popstate olayı durum özdeniteliği, geçmiş varlığından state object'in bir kopyasını içerir
Detaylar için window.onpopstate adresine bakınız
Mevcut durumu okuyun
Mevcut durumu okuyun
Sayfa yüklendiğinde, boş olmayan bir durum nesnesi olabilir. Bu, sayfa bir durum nesnesi ayarladığında (pushState veya replaceState kullanarak) ve kullanıcı tarayıcıyı yeniden başlattığında olabilir. Sayfa yeniden yüklendiğinde, sayfa bir yükleme etkinliği alır, ancak popstate olayı olmaz. Ancak, history.state özelliğini okursanız, popstate olayı gerçekleştikten sonra bu durum nesnesini alırsınız
History.pushState() dokümantasyonu: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Alıcı URL'nin parametresi türde bir dizidir ve bu da mevcut adres çubuğunun URL'sini değiştirmek için kullanılır. Dikkat edilmesi gereken bir nokta, bu parametrenin çapraz alan ile aynı olamaz, yani protokol, alan adı ve port aynı olmalıdır.
Yakalanmamış DOMException: 'History'de 'pushState' çalıştırılamadı: 'http://www.test.com/' URL'li bir geçmiş durumu nesnesi, orijina sahip bir belgede oluşturulamaz https://www.itsvse.com' ve URL 'https://www.itsvse.com/'.
<anonymous>:1:9
Doğru kod:
|
Yayınlandı 12.09.2017 13:55:04
|
|
|
|
Yayınlandı 27.10.2017 09:51:10