history.replaceState () örneği?

Herhangi biri history.replaceState için çalışan bir örnek verebilir mi? Bu nedir w3.org diyor ki:

history . replaceState(data, title [, url ] )

Oturum geçmişindeki mevcut girişi, verilen verilere, başlığa ve sağlanmışsa ve boş değilse URL'ye sahip olacak şekilde günceller.

Güncelleme:

Bu mükemmel çalışıyor:

history.replaceState( {} , 'foo', '/foo' );

URL değişiyor, ancak başlık değişmiyor. Bu bir hata mı yoksa bir şey mi kaçırıyorum? En son Chrome'da test edilmiştir.

Aslında bu, 2 yıldır kasıtlı olmasına rağmen bir hatadır. Sorun, bazı belirsiz özelliklerde ve ne zaman document.titleve ne zaman geri / ileri söz konusu olduğunun karmaşıklığında yatıyor .

Webkit ve Mozilla'daki hata referansına bakın . Ayrıca History API'nin tanıtımı üzerine Opera , title parametresini kullanmadığını ve muhtemelen hala kullanmadığını söyledi .

Şu anda pushState ve replaceState'in 2. argümanı - geçmiş girişinin başlığı - Opera'nın uygulamasında kullanılmamaktadır, ancak bir gün olabilir.

Potansiyel çözüm

Gördüğüm tek yol, başlık öğesini değiştirmek ve bunun yerine pushState kullanmak:

document.getElementsByTagName('title')[0].innerHTML = 'bar';
window.history.pushState( {} , 'bar', '/bar' );

İşte minimal, uydurma bir örnek.

console.log( window.location.href );  // whatever your current location href is
window.history.replaceState( {} , 'foo', '/foo' );
console.log( window.location.href );  // oh, hey, it replaced the path with /foo

Daha fazlası var replaceState()ama onunla yapmak istediğiniz şeyin tam olarak ne olduğunu bilmiyorum.

history.pushStategeçerli sayfa durumunu geçmiş yığınına aktarır ve adres çubuğundaki URL'yi değiştirir. Yani geri döndüğünüzde o durum (geçtiğiniz nesne) size geri dönüyor.

Şu anda tüm yaptığı bu. Yeni sayfanın görüntülenmesi veya sayfa başlığının değiştirilmesi gibi diğer sayfa eylemleri sizin tarafınızdan yapılmalıdır.

Bağladığınız W3C özelliği yalnızca bir taslaktır ve tarayıcı bunu farklı şekilde uygulayabilir. Örneğin Firefox , titleparametreyi tamamen yok sayar .

İşte pushStateweb sitemde kullandığım basit bir örnek .

(function($){
    // Use AJAX to load the page, and change the title
    function loadPage(sel, p){
        $(sel).load(p + ' #content', function(){
            document.title = $('#pageData').data('title');
        });
    }

    // When a link is clicked, use AJAX to load that page
    // but use pushState to change the URL bar
    $(document).on('click', 'a', function(e){
        e.preventDefault();
        history.pushState({page: this.href}, '', this.href);
        loadPage('#frontPage', this.href);
    });

    // This event is triggered when you visit a page in the history
    // like when yu push the "back" button
    $(window).on('popstate', function(e){
        loadPage('#frontPage', location.pathname);
        console.log(e.originalEvent.state);
    });
}(jQuery));

Örneğe bakınız

window.history.replaceState({
    foo: 'bar'
}, 'Nice URL Title', '/nice_url');

window.onpopstate = function (e) {
    if (typeof e.state == "object" && e.state.foo == "bar") {
        alert("Blah blah blah");
    }
};

window.history.go(-1);

ve arama location.hash;

İkinci argüman Başlık , sayfanın Başlığı anlamına gelmez - Daha çok, o sayfanın durumu için bir tanım / bilgidir

Ama yine de onpopstate kullanarak başlığı değiştirebiliriz , olayını ve başlık adını ikinci argümandan değil, nesne olarak iletilen ilk parametreden bir özellik olarak

Referans: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

Göre MDN Geçmişi doc
İkinci argümanın şimdilik değil gelecek için kullanıldığı açıkça söyleniyor. İkinci argümanın web sayfası başlığıyla ilgili olduğu konusunda haklısınız, ancak şu anda tüm büyük tarayıcılar tarafından görmezden geliniyor.

Firefox şu anda bu parametreyi görmezden geliyor, ancak gelecekte kullanabilecek. Buraya boş dizeyi geçirmek, yöntemde gelecekteki değişikliklere karşı güvenli olmalıdır. Alternatif olarak, taşındığınız eyalet için kısa bir başlık iletebilirsiniz.

@ Sev'in cevabına gerçekten cevap vermek istedim.

Sev haklı, içinde bir böcek var window.history.replaceState

Bunu düzeltmek için yapıcıyı yeniden yazarak başlığı manuel olarak ayarlayın.

var replaceState_tmp = window.history.replaceState.constructor;
window.history.replaceState.constructor = function(obj, title, url){
    var title_ = document.getElementsByTagName('title')[0];
    if(title_ != undefined){
        title_.innerHTML = title;
    }else{
        var title__ = document.createElement('title');
        title__.innerHTML = title;
        var head_ = document.getElementsByTagName('head')[0];
        if(head_ != undefined){
            head_.appendChild(title__);
        }else{
            var head__ = document.createElement('head');
            document.documentElement.appendChild(head__);
            head__.appendChild(title__);
        }
    }
    replaceState_tmp(obj,title, url);
}

Https://www.mozilla.org/foo.html'nin aşağıdaki JavaScript'i çalıştırdığını varsayalım :

const stateObj = { foo: 'bar' };

history.pushState(stateObj, '', 'bar.html');

Bu, URL çubuğunun https://www.mozilla.org/bar2.html görüntülenmesine neden olur, ancak tarayıcının bar2.html'yi yüklemesine veya hatta bar2.html'nin var olup olmadığını kontrol etmesine neden olmaz.