Przykład history.replaceState ()?

Czy ktoś może podać działający przykład dla history.replaceState? Co to jest mówi w3.org :

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

Aktualizuje bieżący wpis w historii sesji, aby zawierał podane dane, tytuł i, jeśli podano, a nie pusty, adres URL.

Aktualizacja:

Działa to doskonale:

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

Adres URL się zmienia, ale tytuł się nie zmienia. Czy to błąd, czy coś mi brakuje? Przetestowano w najnowszej wersji Chrome.

Rzeczywiście jest to błąd, chociaż zamierzony od 2 lat. Problem polega na niejasnych specyfikacjach i złożoności, kiedydocument.title są zaangażowane i wstecz / dalej.

Zobacz informacje o błędach w Webkit i Mozilli . Również Opera po wprowadzeniu History API powiedziała, że ​​nie używa parametru tytułu i prawdopodobnie nadal tego nie robi.

Obecnie drugi argument pushState i replaceState - tytuł wpisu historii - nie jest używany w implementacji Opery, ale może to być jeden dzień.

Potencjalne rozwiązanie

Jedynym sposobem, w jaki widzę, jest zmiana elementu tytułu i zamiast tego użycie pushState:

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

Oto minimalny, wymyślony przykład.

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

Jest coś więcej, replaceState()ale nie wiem, co dokładnie chcesz z tym zrobić.

history.pushStateumieszcza bieżący stan strony na stosie historii i zmienia adres URL w pasku adresu. Tak więc, kiedy wrócisz, ten stan (przekazany obiekt) zostanie Ci zwrócony.

Obecnie to wszystko, co robi. Wszelkie inne działania na stronie, takie jak wyświetlenie nowej strony lub zmiana tytułu strony, muszą zostać wykonane przez Ciebie.

Specyfikacja W3C, którą łączysz, to tylko wersja robocza, a przeglądarka może implementować ją inaczej. Na przykład Firefox ignoruje rozszerzenietitle całkowicie parametr.

Oto prosty przykład tego pushState, którego używam na mojej stronie internetowej.

(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));

Spójrz na przykład

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);

i szukaj location.hash;

Drugi argument Tytuł nie oznacza tytułu strony - jest to raczej definicja / informacja o stanie tej strony

Ale nadal możemy zmienić tytuł za pomocą zdarzenia onpopstate i przekazać nazwę tytułu nie z drugiego argumentu, ale jako atrybut z pierwszego parametru przekazanego jako obiekt

Źródła: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

Według MDN History doc
Jest wyraźnie powiedziane, że drugi argument dotyczący przyszłości nie jest używany na razie. Masz rację, drugi argument dotyczy tytułu strony internetowej, ale obecnie jest on ignorowany przez wszystkie główne przeglądarki.

Firefox obecnie ignoruje ten parametr, chociaż może go używać w przyszłości. Podanie w tym miejscu pustego ciągu powinno być zabezpieczone przed przyszłymi zmianami metody. Alternatywnie możesz podać krótki tytuł dla stanu, do którego się przenosisz.

Naprawdę chciałem odpowiedzieć na odpowiedź @ Seva.

Sev ma rację, jest błąd w pliku window.history.replaceState

Aby to naprawić, po prostu przepisz konstruktora, aby ręcznie ustawić tytuł.

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

Załóżmy, że https://www.mozilla.org/foo.html wykonuje następujący JavaScript:

const stateObj = { foo: 'bar' };

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

Spowoduje to, że pasek adresu URL wyświetli https://www.mozilla.org/bar2.html , ale nie spowoduje załadowania przeglądarki bar2.html ani nawet sprawdzenia, czy bar2.html istnieje.