Ajout d'un paramètre à l'URL sans actualisation
Je sais que cela a été demandé plusieurs fois auparavant, mais les réponses n'étaient pas suffisamment descriptives pour résoudre mon problème. Je ne veux pas changer l'URL entière de la page. Je veux ajouter un paramètre &item=brand sur le bouton cliquer sans rafraîchir.
En utilisant document.location.search += '&item=brand'; actualise la page.
En utilisant window.location.hash = "&item=brand"; ajouter sans rafraîchissement mais avec un hachage # ce qui élimine l'utilisation/l'effet du paramètre. J'ai essayé de supprimer le hachage après l'ajout, mais cela n'a pas fonctionné.
Cette réponse et bien d'autres suggèrent l'utilisation de l'API HTML5 History, en particulier le history.pushState, et pour les anciens navigateurs, il faut définir un identifiant de fragment pour empêcher le rechargement de la page. Mais comment?
En supposant que l'URL est: http://example.com/search.php?lang=en
Comment puis-je ajouter &item=brand en utilisant la méthode pushState HTML5 ou un identifiant de fragment pour que la sortie soit comme ceci: http://example.com/search.php?lang=en&item=brand sans actualisation de page?
J'espère que quelqu'un pourra éclairer la façon d'utiliser le pushState HTML5 pour ajouter un paramètre à une URL existante/actuelle. Ou bien comment définir un identifiant de fragment dans le même but. Un bon tutoriel, une démo ou un morceau de code avec une petite explication serait génial.
Démo de ce que j'ai fait jusqu'à présent. Vos réponses seraient grandement appréciées.
Vous pouvez utiliser les méthodes pushState ou replaceState , c'est-à-dire:
window.history.pushState("object or string", "Title", "new url");
OR
window.history.replaceState(null, null, "/another-new-url");
Si quelqu'un veut ajouter un paramètre à une URL plus complexe (je veux dire, https://stackoverflow.com/questions/edit?newParameter=1 ), le code suivant a fonctionné pour moi:
var newurl = window.location.protocol + "//" + window.location.Host + window.location.pathname + '?newParameter=1';
window.history.pushState({ path: newurl }, '', newurl);
J'espère que cela t'aides!