web-dev-qa-db-fra.com

Modifier l'URL sans actualiser la page

Je voudrais remplacer une URL sans rafraîchissement de la page.

J'ai besoin de changer:

https://example.com/en/step1

à

https://example.com/en/step2

Comment faire ça ?

javascripthtml5-history
49
user5878353

Mettre à jour

Basé sur manipulant l'historique du navigateur , passer la chaîne vide comme second paramètre de la méthode pushState ( aka title ) devrait être protégé contre les modifications futures. à la méthode, il est donc préférable d'utiliser pushState comme ceci:

_history.pushState(null, '', '/en/step2');    
_

Vous pouvez en savoir plus à ce sujet dans l'article mentionné

Réponse originale

Utilisez _history.pushState_ comme ceci:

_history.pushState(null, null, '/en/step2');
_

Mise à jour 2 pour répondre Le commentaire de Idan Dagan :

Pourquoi ne pas utiliser history.replaceState()?

De MDN

history.replaceState () fonctionne exactement comme history.pushState () sauf que replaceState () modifie l'entrée d'historique actuelle au lieu d'en créer une nouvelle.

Cela signifie que si vous utilisez replaceState, oui, l'URL sera modifiée, mais l'utilisateur ne peut pas utiliser le bouton Précédent du navigateur pour revenir au précédent. état (s) plus ( parce que replaceState n’ajoute pas de nouvelle entrée à l’historique ) et que ce n’est pas recommandé et fournit une mauvaise UX.

Mise à jour 3 pour ajouter window.onpopstate

Donc, comme cette réponse a attiré votre attention, voici des informations supplémentaires sur la manipulation de l'historique du navigateur. Après avoir utilisé pushState, vous pouvez détecter la navigation du bouton Précédent/Suivant à l'aide de _window.onpopstate_ comme ceci:

_window.onpopstate = function(e) {
    // ... 
};
_

Comme le premier argument de pushState est un objet, si vous passez un object à la place de null, vous pouvez accéder à cet objet dans onpopstate, ce qui est très pratique. Voici comment: :

_window.onpopstate = function(e) {
    if(e.state) {
        console.log(e.state);
    }
};
_

Mise à jour 4 pour ajouter lecture de l'état actuel :

Lors du chargement de votre page, elle peut avoir un objet state non null, vous pouvez lire l'état de l'entrée d'historique actuelle sans attendre l'événement popstate à l'aide de la propriété _history.state_, comme ceci:

_console.log(history.state);
_

Bonus : Utilisez ce qui suit pour vérifier le support de _history.pushState_:

_if (history.pushState) {
  // \o/
}
_
86
Mehdi Dehghani

Lorsque vous utilisez une fonction ...

<p onclick="update_url('/en/step2');">Link</p>

<script>
function update_url(url) {
    history.pushState(null, null, url);
}
</script>
9
Christian Volquardsen