web-dev-qa-db-fra.com

jquery: changer l'adresse URL sans rediriger?

Duplicate possible:
Modifier l'URL de la barre d'adresse dans AJAX Application correspondant à l'état actuel

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

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

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

Je vais prendre l'URL du lien:

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

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

window.location = path;

Je veux faire quelque chose comme ceci site , quand vous cliquez sur l'image, l'appel ajax va chercher la page demandée et l'adresse URL sur la fenêtre sera aussi changée, de sorte qu'elle ait un chemin pour ce que vous cliquez.

jqueryajaxredirectlocation
84
laukok

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

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

Le hash est la partie de l'URL qui suit le symbole #. Cela était initialement destiné à vous diriger (localement) vers des sections de votre document HTML, mais vous pouvez le lire et le modifier via javascript pour l'utiliser un peu 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 étape différente que vous avez prise (puisque l'url + le hachage ont changé)
  2. vous pouvez avoir une adresse qui renvoie 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 indiquer 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 hachage est juste une chaîne, vous pouvez donc faire ce que vous voulez avec ce que vous voulez. Par exemple, vous pouvez y placer un objet entier si vous utilisez JSON pour le lyser .

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

80
david

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

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

De toute évidence, il faudrait procéder à des tests sur plusieurs navigateurs, mais comme cela a été publié sur le forum Opera, je suis sûr de supposer que cela fonctionnerait dans Opera, et je viens de le tester dans Chrome et cela a bien fonctionné.

68
Brendan

Ce site utilise la partie "fragment" d'une url: le contenu 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. Alors oui, vous pouvez changer le fragment sans provoquer d’actualisation ou de rechargement de page. Lors du chargement de la page, 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 selon les besoins. 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";
8
Richard H

Vous ne pouvez pas faire ce que vous demandez (et le site référencé ne le fait pas non plus).

Vous pouvez , cependant, modifier la partie de l'URL après le signe #, Appelée la fragment , comme ceci:

window.location.hash = 'something';

Les fragments font pas sont 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 lus. par Javascript sur votre page. À son tour, ce Javascript peut décider d'effectuer une autre AJAX demande en fonction de la valeur du fragment, ce qui correspond probablement à la façon dont le site que vous avez lié est lié.

2
Jon

Ceci est réalisé par la réécriture d'URL, pas par obscurcissement d'URL, ce qui est impossible.

Comme on l’a mentionné, une autre façon de procéder consiste à changer le hashtag, avec

window.location.hash = "/2131/"
2
bevacqua

Non, car cela ouvrirait les vannes 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 mettant window.location.hash.

1
vcsjones

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

Cependant, vous pouvez changer la partie hash (après le #) et lisez ce qui suit: location.hash

ps. Empêchez la redirection par défaut onclick d'un lien par quelque chose comme:

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