jquery : changer l'adresse URL sans redirection ?

Question

Duplicata possible :
Modifier l'URL de la barre d'adresse dans une application AJAX pour qu'elle corresponde à la situation actuelle

Comment puis-je changer l'adresse URL sans rediriger la page ?

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

<a href="http://mysite.com/projects/article-1" class="get-article">link</a>

Je vais récupérer l'URL du lien :

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

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

window.location = path;

Je veux faire quelque chose comme ceci site Lorsque vous cliquez sur l'image, l'appel ajax récupère la page demandée et l'adresse URL de la fenêtre est également modifiée, de sorte qu'elle contient un chemin d'accès pour ce que vous cliquez.

Answer 1

Vous ne peut pas changer l'url entière sans redirection, ce que vous pouvez faire à la place c'est changer le dièse .

Le site dièse est la partie de l'url qui va après le symbole #. Elle était initialement destinée à vous diriger (localement) vers des sections de votre document HTML, mais vous pouvez la lire et la modifier par le biais de javascript pour l'utiliser un peu comme une variable globale .

---

Si elle est bien appliquée, cette technique est utile à deux égards :

1. l'historique du navigateur se souviendra de chaque étape différente que vous avez franchie (puisque l'url+hash a changé)
2. vous pouvez avoir une adresse qui ne renvoie pas seulement à un document html particulier, mais qui donne également à votre javascript un indice sur ce qu'il doit faire. Cela signifie que vous finissez par pointer vers un état à l'intérieur de votre application web.

---

Pour changer le hachage, 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 hachage n'est qu'une chaîne de caractères, et vous pouvez en faire ce que vous voulez. Par exemple, vous pouvez y mettre un objet entier si vous utilisez JSON pour stringifier il.

Il existe de très bonnes bibliothèques JQuery pour faire des choses avancées avec cela.

Bonne chance !

Answer 2

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'objet historique pour que cela fonctionne.

Cela ne fonctionne que sur le même domaine, mais puisque vous vous contentez d'utiliser l'approche des balises de hachage, cela ne devrait pas avoir d'importance.

Il est évident qu'elle doit être testée sur plusieurs navigateurs, mais comme elle a été postée sur le forum d'Opera, je peux supposer qu'elle fonctionnera dans Opera, et je viens de la tester dans Chrome et elle fonctionne bien.

Answer 3

Ce site utilise la partie "fragment" d'une url : la partie après le "#". Cette partie n'est pas envoyée au serveur par le navigateur dans le cadre de la requête GET, mais peut être utilisée 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 récupérant les données du serveur via des requêtes ajax si nécessaire. 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";

Answer 4

Cela se fait par la réécriture d'URL, et non par l'obscurcissement d'URL, qui ne peut être fait.

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

window.location.hash = "/2131/"

Answer 5

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

Vous peut Cependant, modifiez la partie de l'url après l'élément # qui est appelé le signe fragment comme ceci :

window.location.hash = 'something';

Les fragments font pas sont envoyées au serveur (ainsi, par exemple, Google lui-même ne peut pas faire la différence entre les éléments suivants http://www.google.com/ et http://www.google.com/#something ), mais ils peuvent être lus 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 fait probablement le site auquel vous avez accédé par un lien.