esempio history.replaceState ()?

Qualcuno può dare un esempio funzionante per history.replaceState? Questo è ciò che dice w3.org :

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

Aggiorna la voce corrente nella cronologia della sessione per avere dati, titolo e, se forniti e non null, URL forniti.

Aggiornare:

Funziona perfettamente:

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

L'URL sta cambiando, ma il titolo non sta cambiando. È un bug o mi sto perdendo qualcosa? Testato sull'ultimo Chrome.

In effetti questo è un bug, sebbene intenzionale da 2 anni ormai. Il problema risiede con alcune specifiche poco chiare e la complessità quando document.titlesono coinvolti e il back / forward.

Vedi riferimento ai bug su Webkit e Mozilla . Anche Opera sull'introduzione dell'API History ha affermato di non utilizzare il parametro title e probabilmente non lo fa ancora.

Attualmente il secondo argomento di pushState e replaceState - il titolo della cronologia - non viene utilizzato nell'implementazione di Opera, ma potrebbe essere un giorno.

Soluzione potenziale

L'unico modo in cui vedo è di modificare l'elemento del titolo e utilizzare invece PushState:

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

Ecco un esempio minimale, inventato.

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

C'è altro da fare, replaceState()ma non so che cosa esattamente si voglia farci.

history.pushStateinserisce lo stato della pagina corrente nello stack della cronologia e modifica l'URL nella barra degli indirizzi. Quindi, quando torni indietro, quello stato (l'oggetto che hai passato) ti viene restituito.

Attualmente, è tutto ciò che fa. Qualsiasi altra azione sulla pagina, come la visualizzazione della nuova pagina o la modifica del titolo della pagina, deve essere eseguita dall'utente.

Le specifiche W3C che colleghi sono solo una bozza e il browser potrebbe implementarle in modo diverso. Firefox , ad esempio, ignora titlecompletamente il parametro.

Ecco un semplice esempio di pushStatequello che uso sul mio sito web.

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

guarda l'esempio

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 cerca location.hash;

Il secondo argomento Titolo non significa Titolo della pagina - È più una definizione / informazione per lo stato di quella pagina

Ma possiamo ancora cambiare il titolo usando l' evento onpopstate e passare il nome del titolo non dal secondo argomento, ma come un attributo dal primo parametro passato come oggetto

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

Secondo il documento di storia della MDN
Si dice chiaramente che il secondo argomento è per il futuro usato non per ora. Hai ragione sul fatto che il secondo argomento riguarda il titolo della pagina web ma attualmente è ignorato da tutti i principali browser.

Firefox attualmente ignora questo parametro, sebbene possa utilizzarlo in futuro. Passare la stringa vuota qui dovrebbe essere sicuro contro future modifiche al metodo. In alternativa, potresti passare un breve titolo per lo stato in cui ti stai trasferendo.

Volevo davvero rispondere alla risposta di @ Sev.

Sev ha ragione, c'è un bug all'interno di window.history.replaceState

Per risolvere questo problema, basta riscrivere il costruttore per impostare manualmente il titolo.

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

Supponiamo che https://www.mozilla.org/foo.html esegua il seguente JavaScript:

const stateObj = { foo: 'bar' };

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

Questo farà sì che la barra degli URL visualizzi https://www.mozilla.org/bar2.html , ma non causerà il caricamento di bar2.html nel browser e nemmeno la verifica dell'esistenza di bar2.html.