Home CV github

Autour de la programmation (blog de coucou747)

Navigation

10-04-2025

Une description du fonctionnement de sites web2 qui présentent des articles avec de vraies pages sans rechargement, tout en concervant les fonctionalités d'url.

javascript

Quand on fait un site qui présente divers pages, et qu'on souhaite un fonctionnement moderne en web2, on va parfois avoir besoin ou envie de gérer un changement d'url sans rechargement. Pour ça, il existe deux solutions, on va les expliquer ici.

Les ancres #

Une technique est de gérer l'url avec des ancres. Pour gérer le bouton back, on peut mettre un hook sur le changement d'url en javascript, et charger la page correspondante. C'est une méthode assez simple, efficace, mais elle pose deux problèmes : d'une part, cette information n'est pas envoyée au serveur, ce qui peut être génant pour gérer l'indexation par les moteurs de recherche, et d'autre part, on est limité à une seule ancre, ce qui fait qu'on aura plus cette fonctionnalité pour gérer la position dans la page. En gros, c'est un détournement de fonctionnalité, et ça enlève donc une feature. Comme l'info n'est pas envoyée au serveur, on ne peut pas non plus générer des méta tags correspondants à la page, ce qui coince sur le partage sur les réseaux sociaux par exemple.

history.pushState

L'autre solution consiste à manipuler l'historique depuis javascript, pour ajouter une page à l'historique on peut faire ceci :

history.pushState({key:url}, "", url);

Et pour écouter le bouton back :

window.onpopstate = event => {
    openLink(decodeURIComponent(location.search));
}

C'est ce que j'ai décidé de faire ici. ça représente chez moi une trentaine de lignes de code pour tout gérer :

function openLink(url){
    let query = decodeURIComponent(url.substring(url.indexOf("?")+1));
    // ....innerHTML = ...;
}

function a(link, e){
    let url = link.href;
    e.preventDefault();
    e.stopPropagation();
    history.pushState({key:url}, "", url);
    openLink(url);
}

window.onpopstate = event => {
    openLink(decodeURIComponent(location.search));
}