Exemple window.history.replaceState ()?

Question

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

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

Met à jour l'entrée actuelle dans l'historique de session pour avoir les données, le titre et, le cas échéant, l'URL fournis.

mettre à jour

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

marche parfaitement. 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

Answer 1

En effet c'est un bug, bien que intentionnelle depuis maintenant 2 ans. Le problème se situe à quelques pas clair spécifications et la complexité lors de l' document.title et à l'arrière/vers l'avant sont impliqués.

Voir le bogue de référence sur Webkit et Mozilla. Également un Opéra sur l'introduction de l'Histoire de l'API a dit qu'il n'était pas en utilisant le paramètre de titre et probablement ne fonctionne toujours pas.

Actuellement le 2e argument de pushState et replaceState - le titre de l'entrée de l'historique - n'est pas utilisé dans l'Opéra de mise en œuvre, mais peut être un jour.

Solution potentielle

Le seul moyen que je vois est de modifier le titre élément et utiliser pushState à la place:

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

Answer 2

Voici un exemple minime 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 de replaceState() mais je ne sais pas ce que vous voulez en faire exactement.

Answer 3

history.pushState pousse le courant de l'état de la page sur l'histoire de la pile, et les changements de l'URL dans la barre d'adresse. Ainsi, lorsque vous revenez en arrière, que l'état (l'objet que vous avez passé) sont retournés à vous.

Actuellement, c'est tout ce qu'il fait. Toute autre action de la page, tels que l'affichage de la nouvelle page ou changer le titre de la page, doit être fait par vous.

Le W3C spec-vous lien n'est qu'un projet, et le navigateur peut mettre en œuvre différemment. Firefox, par exemple, ignore l' title paramètre complètement.

Voici un exemple simple d' pushState que j'utilise sur mon 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));

Answer 4

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 de recherche, window.location.hash;

Answer 5

Le deuxième argument Titre ne veut pas dire le Titre de la page C'est plus d'une définition/information pour l'état de cette page

Mais nous pouvons encore changer le titre à l'aide de onpopstate de l'événement, et en passant le titre n'est pas le nom de la deuxième argument, mais comme un attribut à partir du premier paramètre passé en tant qu'objet

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