Changez l'URL dans le navigateur sans charger la nouvelle page en utilisant JavaScript

Comment disposerais-je d'une action JavaScript qui pourrait avoir des effets sur la page actuelle, mais modifierais aussi l'URL du navigateur, alors si l'utilisateur accède à la recharge ou au favoris, la nouvelle URL est-elle utilisée?

Il serait également agréable que le bouton Retour retourne l'URL d'origine.

J'essaie d'enregistrer l'état JavaScript dans l'URL.

    Si vous voulez qu'il fonctionne dans les navigateurs qui ne prennent pas en charge history.pushState et history.popState encore, le "vieux" moyen est de définir l'identificateur de fragment, qui ne provoquera pas de rechargement de page.

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

    Si vous utilisez jQuery, il existe un plugin de changement de bousille qui utilisera la méthode utilisée par le navigateur. Je suis sûr qu'il existe des plugins pour d'autres bibliothèques aussi.

    Une chose à faire attention consiste à entrer en collision avec les ids sur la page, car le navigateur se déplacera vers n'importe quel élément avec un identifiant correspondant.

    Avec HTML 5, utilisez la fonction history.pushState . Par 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 souhaitez modifier l'URL sans ajouter une entrée à la liste des boutons arrière, utilisez history.replaceState place.

    Window.location.href contient l'URL en cours. Vous pouvez y lire, vous pouvez l'ajouter, et vous pouvez le remplacer, ce qui peut provoquer un rechargement de page.

    Si, comme il le ressemble, vous souhaitez enregistrer l'état javascript dans l'URL afin qu'il puisse être mis en favoris, sans recharger la page, l'ajouter à l'URL actuelle après un # et avoir un javascript déclenché par l'événement onload analyser le courant URL pour voir si elle contient l'état enregistré.

    Si vous utilisez un? Au lieu d'un #, vous forcerez un rechargement de la page, mais comme vous analyserez l'état enregistré lors de la chargement, cela pourrait ne pas constituer un problème; Et cela permettra de faire fonctionner correctement les boutons avant et arrière.

    Je dirais fort que cela n'est pas possible, car ce serait un problème de sécurité incroyable s'il s'agissait. Par exemple, je pourrais faire une page qui ressemblait à une page de connexion bancaire et faire apparaître l'URL dans la barre d'adresse comme la banque réelle !

    Peut-être que si vous expliquez pourquoi vous voulez faire cela, les gens pourraient suggérer des approches alternatives …

    [Modifier en 2011: Depuis que j'ai écrit cette réponse en 2008, plus d'informations sont apparues à propos d'une technique HTML5 qui permet de modifier l'URL tant qu'elle provient de la même origine]

    Les paramètres de sécurité du navigateur empêchent les personnes de modifier l'url affiché directement. Vous pouvez imaginer les vulnérabilités d'hameçonnage qui pourraient causer.

    Seul un moyen fiable de changer l'URL sans changer de pages consiste à utiliser un lien interne ou un hash. Par exemple: http://site.com/page.html devient http://site.com/page.html#item1 . Cette technique est souvent utilisée dans hijax (AJAX + conservation historique).

    Lorsque je le fais, je n'utiliserai que des liens pour les actions avec le hash en tant que href, puis j'ajoute des événements de clic avec jquery qui utilisent le hash demandé pour déterminer et déléguer l'action.

    J'espère que cela vous ouvre la bonne voie.

    JQuery possède un excellent plugin pour changer l'URL des navigateurs, appelé jQuery-pusher .

    JavaScript pushState et jQuery peuvent ê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; }); 

    En utilisant uniquement JavaScript history.pushState() , qui modifie le référent, qui s'utilise dans l'en-tête HTTP pour les objets XMLHttpRequest créés après avoir modifié l'état.

    Exemple:

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

    La méthode pushState ():

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

    1. Objet d'état – L'objet d'état est un objet JavaScript associé à la nouvelle entrée d'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é d'état de l'événement contient une copie de l'objet d'état de l'entrée d'historique.

      L'objet d'état peut être tout ce qui peut être sérialisé. Parce que Firefox enregistre des objets d'état sur le disque de l'utilisateur afin qu'ils puissent être restaurés après que l'utilisateur redémarre son navigateur, nous imposons une limite de taille de 640k sur la représentation sérialisée d'un objet d'état. Si vous passez un objet d'état dont la représentation sérielle est plus grande que celle de pushState() , la méthode lancera une exception. Si vous avez besoin de plus d'espace que cela, vous êtes encouragé à utiliser sessionStorage et / ou LocalStorage.

    2. Titre – Firefox ignore actuellement ce paramètre, bien qu'il puisse l'utiliser dans le futur. Passer la chaîne vide ici devrait être en sécurité contre les modifications futures de la méthode. Alternativement, vous pouvez passer un titre court pour l'état auquel vous déménagez.

    3. URL – L' URL de l' nouvelle entrée d'historique est donnée par ce paramètre. Notez que le navigateur pushState() pas 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 en cours. La nouvelle URL doit être de la même origine que l'URL actuelle; Sinon, pushState() lancera une exception. Ce paramètre est optionnel; Si elle n'est pas spécifiée, elle est définie sur l'URL actuelle du document.

    Il existe 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 ceci en utilisant un #hash dans l'URL. Voici quelques exemples d'URL:

    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 

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

    Il existe location.hash = 'text' dans http://probablyinteractive.com/url-hunter

    Il existe 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 cela serait possible tant que le chemin d'accès parent dans la page est identique, il n'y a que quelque chose de nouveau.

    Donc, disons, l'utilisateur est sur la page: http://domain.com/site/page.html Puis, 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 le modifie pas.

    Ou permettez simplement à la personne de changer le paramètre get, alors location.get = me=1&page=1 .

    La page originale devient http://domain.com/site/page.html?me=1&page=1 et elle ne se rafraîchit pas.

    Le problème avec # est que les données ne sont pas mises en cache (au moins je ne le pense pas) lorsque le hash est modifié. C'est comme chaque fois qu'une nouvelle page est en cours de chargement, tandis que les boutons de retour et de retour dans une page non- Ajax sont capables de mettre des données en cache et de ne pas consacrer de temps à recharger les 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 faire de demandes Ajax. Donc, lorsqu'un div est utilisé pour traiter différentes heures supplémentaires de méthode, ces données ne sont pas stockées pour chaque état d'historique.

    J'ai eu du succès avec:

     location.hash="myValue"; 

    Il ajoute simplement #myValue à l'URL en cours. Si vous devez déclencher un événement sur la page Charger, vous pouvez utiliser le même location.hash pour vérifier la valeur pertinente. N'oubliez pas de supprimer le # de la valeur renvoyée par l' location.hash .

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