exemplo history.replaceState ()?

Qualquer um pode dar um exemplo de trabalho para history.replaceState? Isto é o que o w3.org diz:

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

Atualiza a entrada atual no histórico da sessão para ter os dados, o título e, se fornecidos e não nulos, o URL.

Atualizar:

Isso funciona perfeitamente:

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

O URL está mudando, mas o título não está mudando. Isso é um bug ou estou faltando alguma coisa? Testado no Chrome mais recente.

Na verdade, isso é um bug, embora intencional por 2 anos. O problema está em algumas especificações pouco claras e na complexidade de quando document.titlee para trás / para a frente estão envolvidos.

Veja a referência de bug no Webkit e Mozilla . Também o Opera, sobre a introdução da API History, disse que não estava usando o parâmetro title e provavelmente ainda não usa.

Atualmente, o segundo argumento de pushState e replaceState - o título da entrada do histórico - não é usado na implementação do Opera, mas pode ser um dia.

Solução potencial

A única maneira que vejo é alterar o elemento title e usar o pushState:

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

Aqui está um exemplo mínimo e artificial.

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

Há mais, replaceState()mas não sei exatamente o que você quer fazer com isso.

history.pushStatecoloca o estado da página atual na pilha do histórico e altera o URL na barra de endereço. Então, quando você voltar, esse estado (o objeto que você passou) será retornado para você.

Atualmente, isso é tudo o que faz. Qualquer outra ação da página, como exibir a nova página ou alterar o título da página, deve ser realizada por você.

A especificação do W3C que você vincula é apenas um rascunho e o navegador pode implementá-lo de maneira diferente. O Firefox , por exemplo, ignora titlecompletamente o parâmetro.

Aqui está um exemplo simples do pushStateque eu uso no meu site.

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

Olhe para o exemplo

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

e pesquisa location.hash;

O segundo argumento Título não significa Título da página - é mais uma definição / informação para o estado dessa página

Mas ainda podemos alterar o título usando o evento onpopstate e passando o nome do título não do segundo argumento, mas como um atributo do primeiro parâmetro passado como objeto

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

De acordo com o documento MDN History,
diz-se claramente que o segundo argumento é para o futuro usado e não por enquanto. Você está certo de que o segundo argumento trata do título da página da web, mas atualmente é ignorado por todos os principais navegadores.

O Firefox atualmente ignora esse parâmetro, embora possa usá-lo no futuro. Passar a string vazia aqui deve ser seguro contra futuras alterações no método. Como alternativa, você pode passar um título curto para o estado para o qual está se mudando.

Eu realmente queria responder à resposta de @ Sev.

Sev está certo, há um erro dentro do window.history.replaceState

Para corrigir isso, basta reescrever o construtor para definir o título manualmente.

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

Suponha que https://www.mozilla.org/foo.html execute o seguinte JavaScript:

const stateObj = { foo: 'bar' };

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

Isso fará com que a barra de URL seja exibida https://www.mozilla.org/bar2.html , mas não fará com que o navegador carregue bar2.html ou verifique se a barra2.html existe.