Changer L'URL dans le navigateur sans charger la nouvelle page en utilisant JavaScript

avec HTML 5, Utilisez la history.pushState fonction . À titre d'exemple:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

et un href:

<a href="#" id='click'>Click to change url to bar.html</a>

si vous voulez changer l'URL sans ajouter d'entrée à la liste des boutons arrière, utilisez history.replaceState à la place.

de la fenêtre.emplacement.href contient L'URL courante. Vous pouvez lire, vous pouvez ajouter, et vous pouvez les remplacer, ce qui peut causer un rechargement de la page.

si, comme il semble, vous voulez enregistrer l'état javascript dans L'URL pour qu'il puisse être signalisé, sans recharger la page, l'ajouter à L'URL courante après un # et avoir un morceau de javascript déclenché par l'analyse d'événement de l'URL courante pour voir si elle contient l'état sauvegardé.

si vous utilisez un ? au lieu d'un #, vous devrez forcer un rechargement de la page, mais puisque vous va analyser l'état sauvegardé en charge ce ne peut être effectivement un problème; et cela rendra les boutons avant et arrière fonctionnent correctement.

je soupçonne fortement que ce n'est pas possible, car ce serait un incroyable problème de sécurité si c'était le cas. Par exemple, je pourrais faire une page qui ressemble à une page de connexion de banque, et faire L'URL dans la barre d'adresse regarder tout comme la banque réelle !

peut-être que si vous expliquez pourquoi vous voulez faire cela, les gens pourraient être en mesure de suggérer des approches alternatives...

[Modifier en 2011: Depuis que j'ai écrit ce réponse en 2008, plus d'infos a venir à la lumière, au sujet d'un HTML5 "technique de 151990920" qui permet à l'URL à être modifié tant qu'il est de la même origine]

empêchent les gens de modifier directement l'url affichée. Vous pouvez imaginer les vulnérabilités d'hameçonnage qui en résulteraient.

la seule façon fiable de changer l'url sans changer les pages est d'utiliser un lien interne ou un hachage. par exemple: http://site.com/page.html devient http://site.com/page.html#item1 . Cette technique est souvent utilisée dans hijax(AJAX + preserve history).

en faisant cela je vais souvent juste utiliser des liens pour les actions avec le hachage comme le href, puis ajouter des événements de clic avec jquery qui utilisent le hachage demandé pour déterminer et déléguer l'action.

j'espère que vous met sur la bonne voie.

jQuery a un grand plugin pour changer L'URL des navigateurs, appelé jQuery-pusher .

JavaScript pushState et jQuery pourraient être utilisés ensemble, comme:

history.pushState(null, null, $(this).attr('href'));

exemple:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

utilisant uniquement JavaScript history.pushState() , qui modifie le referrer, qui est utilisé dans L'en-tête HTTP pour les objets XMLHttpRequest créés après que vous avez changé l'état.

exemple:

window.history.pushState("object", "Your New Title", "/new-url");

La pushState() la méthode:

pushState() prend trois paramètres: un objet d'état, un titre (qui est actuellement ignoré), et (optionnellement) une URL. Examinons plus en détail chacun de ces trois paramètres:

1. objet d'état - l'objet d'état est un objet JavaScript associé à la nouvelle entrée historique créée par pushState() . Chaque fois que l'utilisateur navigue vers le nouvel état, un événement popstate est déclenché, et la propriété état de l'événement contient une copie de l'objet état de l'entrée historique.

   L'état objet peut être n'importe quoi qui peut être sérialisé. Parce que Firefox sauve des objets d'état sur le disque de l'utilisateur pour qu'ils puissent être restaurés après que l'utilisateur redémarre son navigateur, nous imposons une limite de taille de 640k caractères sur la représentation sérialisée d'un objet d'état. Si vous passez un objet d'État dont la représentation sérialisée est plus grande que celle-ci à pushState() , la méthode lancera une exception. Si vous avez besoin de plus d'espace, nous vous encourageons à utiliser sessionStorage et/ou localStorage.

2. titre - Firefox ignore actuellement ce paramètre, bien qu'il puisse l'utiliser à l'avenir. Passer la chaîne vide ici devrait être sûr contre les changements futurs à la méthode. Alternativement, vous pouvez passer un titre court pour l'état dans lequel vous déménagez.

3. URL - L'URL de la nouvelle entrée d'histoire est donnée par ce paramètre. Notez que le navigateur ne essayer de charger cette URL après un appel à pushState() , mais il pourrait tenter de charger L'URL plus tard, par exemple après que l'utilisateur redémarre son navigateur. La nouvelle URL n'a pas besoin d'être absolue; si elle est relative, elle est résolue par rapport à L'URL courante. La nouvelle URL doit être de la même origine que L'URL actuelle; sinon, pushState() fera une exception. Ce paramètre est optionnel; s'il n'est pas spécifié, il est défini à l'URL courante du document.

il y a un composant Yahoo YUI (Browser History Manager) qui peut gérer ceci: http://developer.yahoo.com/yui/history/

la galerie de photos de Facebook fait cela en utilisant un # hachage dans L'URL. Voici quelques exemples D'URLs:

avant de cliquer sur "Suivant":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

après avoir cliqué sur "Suivant":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Note le hash-bang (#!) immédiatement suivi de la nouvelle URL.

Il y a lieu.hash='texte' dans http://probablyinteractive.com/url-hunter

il y a un plugin jquery http://www.asual.com/jquery/address/

je pense que c'est ce dont vous avez besoin.

mon code est:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

et action:

setLocation('http://example.com/your-url-here');

et exemple

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

C'est tout :)

je me demandais si c'était possible tant que le chemin parent dans la page est le même, seulement quelque chose de nouveau y est ajouté.

comme si l'utilisateur était à la page: http://domain.com/site/page.html Alors le navigateur peut me laisser faire location.append = new.html et la page devient: http://domain.com/site/page.htmlnew.html et le navigateur ne la change pas.

ou tout simplement permettre à la personne de changer le paramètre get, donc location.get = me=1&page=1 .

ainsi la page originale devient http://domain.com/site/page.html?me=1&page=1 et il ne rafraîchit pas.

le problème avec # est que les données ne sont pas mises en cache (du moins je ne le pense pas) lorsque le hash est modifié. Ainsi, c'est comme chaque fois qu'une nouvelle page est chargée, alors que les boutons back - and forward dans une page Non- Ajax sont capables de mettre en cache des données et ne passent pas de temps sur le chargement des données.

D'après ce que j'ai vu, L'histoire de Yahoo charge déjà toutes les données à la fois. Il ne semble pas être faire toutes les requêtes Ajax. Ainsi, lorsqu'un div est utilisé pour gérer les différentes heures supplémentaires de méthode, que les données ne sont pas stockées pour chaque État de l'histoire.

j'ai eu du succès avec:

location.hash="myValue";

il ajoute simplement #myValue à L'URL actuelle. Si vous avez besoin de déclencher un événement sur la page de chargement, vous pouvez utiliser le même location.hash pour vérifier la valeur pertinente. N'oubliez pas de supprimer le # de la valeur retournée par location.hash e.g.

var articleId = window.location.hash.replace("#","");

ce qui fonctionne pour moi est - history.replaceState() fonction qui est la suivante -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

ce ne sera pas recharger la page, vous pouvez en faire usage avec l'événement de javascript