Changer l'URL du site dynamiquement sans recharger la page

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Depuis quelques temps, je remarque que certains sites populaires mettent en place une fonctionnalité qui m'intrigue beaucoup. En effet, lorsque l'on clique sur les liens internes, voici ce qui se produit :

  1. Une partie de la page change, soit avec AJAX soit avec un script spécifique à la page, afin d'éviter les temps de chargement trop longs.
  2. L'adresse dans la barre d'URL du navigateur change, sans clignotement.

C'est particulièrement flagrant sur certains sites. Par exemple, sur le site d'Alex-D, une animation se déclenche lors d'un clic sur un lien interne, et l'URL change. C'est encore plus flagrant sur le site de Canal+ où, lorsque l'on est sur une vidéo, si l'on clique sur le lien d'une autre vidéo, on est renvoyé au niveau du lecteur et l'URL change sans recharger la page…

Comment fait-on cela ?

Merci à vous, en espérant avoir été clair (pas évident à expliquer :/)

A graphical interface is like a joke: if you have to explain it, that's shit. | Les logiciels Deuchnord

+0 -0

Cette réponse a aidé l'auteur du sujet

Ces sites utilisent l'API History (en HTML5) qui gère l'historique du navigateur et permet de le manipuler et d'y insérer de nouvelles entrées.

A chaque action, un script JS va insérer une nouvelle entrée dans l'historique du navigateur ce qui va ensuite provoquer le changement de vue.

Beaucoup de librairies te permettront de faire cela assez simplement, Backbone étant sans doute la plus connue et la plus simple à manipuler ;)

+1 -0

Cette réponse a aidé l'auteur du sujet

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

Sur le site d'Alex-D puisque tu l'as cité, en ouvrant la console Javascript on retrouve ça :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function updateCurrentPageHistory(a) {
    if (DEBUG) {
        console.info("updateCurrentPageHistory(title : " + a + ")")
    }
    State = History.getState();
    data = State.data;
    data.destinationPage = currentPage;
    $(window).off("statechange");
    History.replaceState(data, a, document.location);
    $(window).on("statechange", statechange)
}

EDIT : grillé mais réponses complémentaires, donc je laisse ;)

Édité par Javier

Happiness is a warm puppy

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte