Exemple avec history.replaceState ()?

Quelqu'un peut-il donner un exemple de travail pour history.replaceState? Voici ce que dit w3.org :

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

Met à jour l'entrée actuelle dans l'historique de la session pour avoir les données, le titre et, s'il est fourni et non nul, l'URL.

Mettre à jour:

Cela fonctionne parfaitement:

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

L'URL change, mais le titre ne change pas. Est-ce un bug ou est-ce que je manque quelque chose? Testé sur le dernier Chrome.

En effet c'est un bug, bien que intentionnel depuis maintenant 2 ans. Le problème réside dans certaines spécifications peu claires et la complexité du moment document.titleet de l'arrière / de l'avant.

Voir la référence de bogue sur Webkit et Mozilla . Opera, lors de l'introduction de l'API History, a également déclaré qu'il n'utilisait pas le paramètre title et qu'il ne le fait probablement toujours pas.

Actuellement, le 2ème argument de pushState et replaceState - le titre de l'entrée d'historique - n'est pas utilisé dans l'implémentation d'Opera, mais peut l'être un jour.

Solution potentielle

La seule façon que je vois est de modifier l'élément title et d'utiliser à la place pushState:

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

Voici un exemple minimal et artificiel.

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

Il y a plus à faire replaceState()mais je ne sais pas exactement ce que vous voulez en faire.

history.pushStatepousse l' état actuel de la page sur la pile d'historique et modifie l'URL dans la barre d'adresse. Ainsi, lorsque vous revenez en arrière, cet état (l'objet que vous avez passé) vous est retourné.

Actuellement, c'est tout ce qu'il fait. Toute autre action de page, telle que l'affichage de la nouvelle page ou la modification du titre de la page, doit être effectuée par vous.

La spécification W3C que vous liez n'est qu'un brouillon et le navigateur peut l'implémenter différemment. Firefox , par exemple, ignore titlecomplètement le paramètre.

Voici un exemple simple pushStateque j'utilise sur mon site 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));

Regardez l'exemple

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

et rechercher location.hash;

Le deuxième argument Le titre ne signifie pas le titre de la page - Il s'agit plus d'une définition / information pour l'état de cette page

Mais nous pouvons toujours changer le titre en utilisant l' événement onpopstate , et en passant le nom du titre non pas à partir du deuxième argument, mais en tant qu'attribut du premier paramètre passé en tant qu'objet

Référence: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

Selon MDN History doc
Il est clairement dit que le deuxième argument est pour l'avenir utilisé pas pour le moment. Vous avez raison, le deuxième argument concerne le titre de la page Web, mais il est actuellement ignoré par tous les principaux navigateurs.

Firefox ignore actuellement ce paramètre, bien qu'il puisse l'utiliser à l'avenir. Passer la chaîne vide ici devrait être sûr contre les modifications futures de la méthode. Alternativement, vous pouvez passer un court titre pour l'état dans lequel vous vous déplacez.

Je voulais vraiment répondre à la réponse de @ Sev.

Sev a raison, il y a un bug à l'intérieur du window.history.replaceState

Pour résoudre ce problème, réécrivez simplement le constructeur pour définir le titre manuellement.

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

Supposons que https://www.mozilla.org/foo.html exécute le JavaScript suivant:

const stateObj = { foo: 'bar' };

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

Cela entraînera l'affichage de la barre d'URL https://www.mozilla.org/bar2.html , mais ne fera pas charger le navigateur de bar2.html ni même de vérifier que bar2.html existe.