jquery: changer l’adresse URL sans redirection?

Duplication possible:
Modifier l’adresse URL de la barre d’adresse dans l’application AJAX pour correspondre à l’état actuel

Comment puis-je changer l’adresse URL sans redirect la page?

Par exemple, lorsque je clique sur ce lien ci-dessous:

link 

Je vais saisir l’URL du lien:

 var path = object.attr('href'); 

Si je le fais ci-dessous, la page sera redirigée:

 window.location = path; 

Je veux faire quelque chose comme ce site , lorsque vous cliquez sur l’image, l’appel ajax ira chercher la page demandée et l’adresse URL de la fenêtre sera également modifiée, de sorte qu’elle ait un chemin pour ce que vous cliquez.

REMARQUE: history.pushState() est maintenant pris en charge – voir les autres réponses.

Vous ne pouvez pas changer l’url entier sans redirection, ce que vous pouvez faire est de changer le hachage .

Le hachage est la partie de l’URL qui suit le symbole #. Cela a été initialement prévu pour vous diriger (localement) vers des sections de votre document HTML, mais vous pouvez le lire et le modifier via javascript pour l’utiliser comme une variable globale .


Si elle est bien appliquée, cette technique est utile de deux manières:

  1. l’historique du navigateur se souviendra de chaque pas que vous avez fait (puisque l’url + hash a changé)
  2. vous pouvez avoir une adresse qui lie non seulement à un document HTML particulier, mais donne également à votre javascript un indice sur ce qu’il faut faire. Cela signifie que vous finissez par pointer vers un état dans votre application Web.

Pour changer le hash, vous pouvez faire:

 document.location.hash = "show_picture"; 

Pour surveiller les changements de hachage, vous devez faire quelque chose comme:

 window.onhashchange = function(){ var what_to_do = document.location.hash; if (what_to_do=="#show_picture") show_picture(); } 

Bien sûr, le hash est juste une chaîne, vous pouvez donc faire ce que vous voulez avec. Par exemple, vous pouvez y placer un object entier si vous utilisez JSON pour le ficeler .

Il y a de très bonnes bibliothèques JQuery pour faire des choses avancées avec ça.

Voir ici – http://my.opera.com/community/forums/topic.dml?id=1319992&t=1331393279&page=1#comment11751402

Essentiellement:

 history.pushState('data', '', 'http://your-domain/path'); 

Vous pouvez manipuler l’object historique pour que cela fonctionne.

Cela ne fonctionne que sur le même domaine, mais comme vous êtes satisfait de l’approche des balises de hachage, cela ne devrait pas avoir d’importance.

Évidemment, il faudrait faire des tests sur plusieurs navigateurs, mais depuis que cela a été publié sur le forum Opera, je peux supposer que cela fonctionnerait dans Opera, et je viens de le tester dans Chrome et cela fonctionnait bien.

Ce site utilise la partie “fragment” d’une URL: les choses après le “#”. Ceci n’est pas envoyé au serveur par le navigateur dans le cadre de la requête GET, mais peut être utilisé pour stocker l’état de la page. Donc oui, vous pouvez changer le fragment sans provoquer un rafraîchissement ou un rechargement de la page. Lorsque la page se charge, votre javascript lit ce fragment et met à jour le contenu de la page de manière appropriée, en extrayant les données du serveur via les requêtes ajax, le cas échéant. Pour lire le fragment en js:

 var fragment = location.hash; 

mais notez que cette valeur inclura le caractère “#” au début. Pour définir le fragment:

 location.hash = "your_state_data"; 

Vous ne pouvez pas faire ce que vous demandez (et le site lié ne fait pas exactement cela non plus).

Vous pouvez cependant modifier la partie de l’url après le signe # , appelé fragment , comme ceci:

 window.location.hash = 'something'; 

Les fragments ne sont pas envoyés au serveur (par exemple, Google lui-même ne peut pas faire la différence entre http://www.google.com/ et http://www.google.com/#something ), mais ils peuvent être lu par Javascript sur votre page. À son tour, ce Javascript peut décider d’effectuer une requête AJAX différente en fonction de la valeur du fragment, ce que le site auquel vous avez lié le fait probablement.

Cela est possible grâce à la réécriture d’URL, et non à l’emprunt de URL, ce qui est impossible.

Une autre façon de procéder, comme cela a été mentionné, est de changer le hashtag, avec

 window.location.hash = "/2131/" 

Non, car cela ouvrirait les portes du phishing. La seule partie de l’URI que vous pouvez modifier est le fragment (tout ce qui suit le # ). Vous pouvez le faire en définissant window.location.hash .

Vous ne pouvez pas vraiment changer l’URL entière dans la barre d’emplacement sans redirect (pensez aux problèmes de sécurité!).

Cependant, vous pouvez changer la partie hash (après le # ) et lire ceci: location.hash

ps. empêcher la redirection par défaut d’un lien par quelque chose comme:

 $("#link").bind("click",function(e){ doRedirectFunction(); e.preventDefault(); })