Comment modifier l'URL en javascript sans recharger la page

Changer l'URL sans recharger la page peut être une stratégie très utile pour créer des sites Web plus excitants et dynamiques en utilisant JavaScript. Par exemple, la création d'un site Web d'une seule page où l'utilisateur interagit avec différentes parties / sections du site Web sans naviguer / rediriger vers une nouvelle page est un cas d'utilisation courant pour modifier l'URL sans recharger la page. Cela peut entraîner une expérience utilisateur plus cohérente et réactive.

Cet article décrira les méthodes de modification de l'URL sans recharger la page Web à l'aide de JavaScript.

Comment modifier / modifier l'URL en javascript sans recharger la page?

Pour modifier l'URL sans recharger la page Web, utilisez la méthode prédéfinie JavaScript suivante:

• Méthode pushstate ()
• Méthode remplacée ()

Méthode 1: Modifiez l'URL en JavaScript sans recharger la page à l'aide de la méthode «pushstate ()»

Pour modifier l'URL sans recharger la page Web, utilisez le "Pushstate ()" méthode. Il s'agit d'une caractéristique ou de la méthode prédéfinie du «objet d'histoire"Cela permet de modifier l'historique du navigateur sans naviguer ou rafraîchir la page. Il ajoute ou modifie simplement la pile d'historique et ne charge pas de nouvelle page. En utilisant cette approche, vous pouvez basculer entre les pages en ajoutant une nouvelle entrée à la pile historique du navigateur.

Syntaxe
Suivez la syntaxe donnée pour la méthode «pushstate ()»:

fenêtre.histoire.Pushstate (état, titre, URL);

Ici:

• "État»Représente la nouvelle entrée d'histoire.
• "titre"Est le texte particulier qui peut être montré à la barre de titre du navigateur.
• "URL»Indique l'URL remplacée comme une nouvelle entrée.

Exemple
Dans un fichier html, créez quatre boutons qui appellent le «ModifyUrl ()”Fonction sur le bouton CLIC:

1
2
3
4

Définir une fonction "ModifyUrl ()"Dans un fichier javascript qui se déclenchera sur le bouton cliquer. Il faut deux paramètres, le «titre" et le "URL". Lorsque la méthode est appelée sur le bouton cliquer, le «titre» et «l'URL» seront passés comme arguments. Vérifiez le type du «étôte«De l'objet d'histoire, si ce n'est pas«indéfini". Ensuite, appelez le «histoire.Pushstate ()”Méthode pour modifier l'URL:

fonction modifyUrl (title, url)
if (typeof (History.Pushstate) != "Undefined")
var obj =
Titre: titre,
URL: URL
;
histoire.Pushstate (OBJ, OBJ.Titre, obj.Url);

On peut voir que sur chaque clic de bouton, l'URL sera modifiée avec succès sans recharger la page:

Dans la sortie ci-dessus, vous pouvez voir que le bouton de flèche arrière en haut à gauche (<-) est activé en cliquant sur le bouton, il indique que vous pouvez naviguer dans les deux sens parce que le «Pushstate ()»La méthode ajoute la nouvelle URL sur la pile d'historique.

Méthode 2: Modifiez l'URL en JavaScript sans recharger la page à l'aide de la méthode «RempaceState ()»

Utilisez le "RempacESTate ()«Méthode pour modifier l'URL sans recharger la page Web. C'est aussi une caractéristique du "objet d'histoire"Mais cela n'ajoutera pas une nouvelle entrée à la pile d'historique. Il modifie l'état existant de l'histoire du navigateur et le remplace par un nouvel état. En utilisant cette approche, vous ne pouvez pas basculer entre les pages.

Syntaxe
La syntaxe donnée est utilisée pour la méthode «RemplaceState ()»:

fenêtre.histoire.Remplacestate (État, titre, URL);

Exemple
Dans la fonction définie, appelez le «RempacESTate ()”Méthode pour remplacer l'URL sur le bouton cliquez sans recharger ou naviguer dans la page:

fonction modifyUrl (title, url)
if (typeof (History.remplacer) != "Undefined")
var obj =
Titre: titre,
URL: URL
;
histoire.remplacer (obj, obj.Titre, obj.Url);

La sortie indique que sur chaque clic de chaque bouton, l'URL a été modifiée et il n'y a pas d'option pour naviguer pour revenir en arrière lorsque le bouton de flèche arrière est désactivé:

Nous avons fourni toutes les informations essentielles pertinentes pour la modification de l'URL sans recharger la page en JavaScript.

Conclusion

Pour modifier / modifier l'URL sans rafraîchir la page Web, utilisez le «Pushstate ()«Méthode ou le«RempacESTate ()" méthode. La méthode «pushstate ()» ajoute la nouvelle URL comme une nouvelle entrée dans une pile d'historique et permet aux utilisateurs de naviguer dans les deux sens. Tandis que la méthode "remplacetate ()" remplace l'URL et ne permet pas de passer à la page arrière. Cet article a décrit les méthodes de modification de l'URL sans recharger la page Web à l'aide de JavaScript.