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

comment aurais-je une action JavaScript qui pourrait avoir des effets sur la page courante, mais qui changerait aussi L'URL dans le navigateur alors si l'utilisateur clique sur Recharger ou marquer la nouvelle URL est utilisée?

ce serait aussi bien si le bouton arrière rechargeait l'URL d'origine.

j'essaie d'enregistrer L'état JavaScript dans L'URL.

288
demandé sur random 2008-09-26 02:00:38
la source

14 ответов

si vous voulez qu'il fonctionne dans les navigateurs qui ne prennent pas en charge history.pushState et history.popState encore, la" vieille " façon est de définir l'Identificateur de fragment, ce qui ne causera pas un rechargement de page.

l'idée de base est de définir la propriété window.location.hash à une valeur qui contient toutes les informations d'État dont vous avez besoin, alors utilisez la fenêtre .onhashchange event , ou pour les navigateurs plus anciens qui ne supportent pas onhashchange (IE < 8, Firefox < 3.6), périodiquement vérifiez si le hachage a changé (en utilisant setInterval par exemple) et mettez à jour la page. Vous aurez également besoin de vérifier la valeur de hachage sur la charge de page pour configurer le contenu initial.

si vous utilisez jQuery il y a un hashchange plugin qui utilisera la méthode que le navigateur supporte. Je suis sûr qu'il y a des plugins pour les autres bibliothèques.

une chose dont il faut se méfier, c'est d'entrer en collision avec l'ids sur la page, parce que le navigateur de passer à n'importe quel élément avec un id correspondant.

187
répondu Matthew Crumley 2011-10-05 20:46:43
la source

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.

108
répondu clu3 2014-04-07 20:35:10
la source

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.

37
répondu moonshadow 2008-09-26 02:19:36
la source

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]

22
répondu Paul Dixon 2011-02-01 15:09:43
la source
Les paramètres de sécurité du navigateur

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.

8
répondu Jethro Larson 2008-09-26 05:03:31
la source

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.

6
répondu Ilia Rostovtsev 2013-10-09 01:04:06
la source

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

4
répondu powtac 2008-09-26 03:47:45
la source

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.

3
répondu Jonathon Hill 2011-01-11 18:43:21
la source

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

2
répondu tom 2011-04-20 15:31:31
la source

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

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

2
répondu Hash 2011-04-20 18:03:27
la source

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 :)

2
répondu Tusko Trush 2017-01-10 10:30:46
la source

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.

1
répondu user58670 2010-09-22 12:33:58
la source

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("#","");
0
répondu Adam Hey 2014-06-23 15:56:41
la source

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

0
répondu Veshraj Joshi 2018-04-26 09:52:24
la source