Changer l'URL du site dynamiquement sans recharger la page

a marqué ce sujet comme résolu.

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 :/)

+0 -0

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

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

+2 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

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