Modifier L'URL sans recharger la page

HTML5 introduit les méthodes history.pushState() et history.replaceState() , qui vous permettent d'ajouter et de modifier des entrées historiques, respectivement.

window.history.pushState('page2', 'Title', '/page2.php');

plus D'informations à ce sujet de ici

NOTE: Si vous travaillez avec un navigateur HTML5 , vous devez ignorer cette réponse. C'est maintenant possible, comme on peut le voir dans les autres réponses.

il n'y a aucun moyen de modifier le URL dans le navigateur sans recharger la page. L'URL représente ce qu'était la dernière page chargée. Si vous le changez ( document.location ) alors il rechargera la page.

une raison évidente étant, vous écrivez un site sur www.mysite.com qui ressemble à une page de connexion bancaire. Puis vous changez la barre d'url du navigateur pour dire www.mybank.com . L'utilisateur ne sera pas du tout conscient qu'il regarde vraiment www.mysite.com .

vous pouvez également utiliser HTML5 replaceState si vous voulez changer l'url mais ne voulez pas ajouter l'entrée à l'historique du navigateur:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

cela "briserait" la fonctionnalité du bouton arrière. Cela peut être nécessaire dans certains cas comme une galerie d'images (où vous voulez que le bouton Précédent retourne à la page d'index de la galerie au lieu de revenir en arrière à travers chaque image que vous avez vue) tout en donnant à chaque image son propre unique URL.

parent.location.hash = "hello";

voici ma solution: (newUrl est votre nouvelle url que vous voulez remplacer l'actuelle)

history.pushState({}, null, newUrl);

le HTML5 remplaçestate est la réponse, comme déjà mentionné par Vivart et geo1701. Cependant, il n'est pas pris en charge dans tous les navigateurs/versions. de l'Histoire.js enveloppe HTML5 état fonctionnalités et fournit un soutien supplémentaire pour HTML4 navigateurs.

avant HTML5 nous pouvons utiliser:

parent.location.hash = "hello";

et:

window.location.replace("http:www.example.com");

cette méthode va recharger votre page, mais HTML5 introduit le history.pushState(page, caption, replace_url) qui ne devrait pas recharger votre page.

si ce que vous essayez de faire est de permettre aux utilisateurs de marquer des pages/partager des pages, et que vous n'avez pas besoin que ce soit exactement L'URL correcte, et que vous n'utilisez pas d'ancres de hachage pour autre chose, alors vous pouvez le faire en deux parties; vous utilisez l'emplacement.hachage discuté ci-dessus, puis mettre en œuvre une vérification sur la page d'accueil, pour rechercher une URL avec un ancrage de hachage dans elle, et vous rediriger vers le résultat suivant.

par exemple:

1) L'utilisateur est sur www.site.com/section/page/4

2) L'utilisateur fait une action qui change L'URL en www.site.com/#/section/page/6 (avec le hachage). Disons que vous avez chargé le bon contenu pour la page 6 dans la page, donc en dehors du hachage l'utilisateur n'est pas trop dérangé.

3) l'utilisateur transmet cette URL à quelqu'un d'autre, ou la marque

4) Quelqu'un d'autre, ou le même utilisateur à une date ultérieure, va à www.site.com/#/section/page/6

5) le Code sur www.site.com/ redirige l'utilisateur à www.site.com/section/page/6 , en utilisant quelque chose comme ceci:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

l'Espoir qui fait sens! C'est une approche utile pour certaines situations.

toute modification de la localisation (soit window.location ou document.location ) provoquera une requête sur cette nouvelle URL, si vous ne modifiez pas seulement le fragment D'URL. Si vous changez L'URL, vous changez l'URL.

utilisez des techniques de réécriture D'URL côté serveur comme mod_rewrite D'Apache si vous n'aimez pas les URL que vous utilisez actuellement.

vous pouvez ajouter des étiquettes d'ancrage. Je l'utilise sur mon site http://www.piano-chords.net / pour que je puisse suivre avec google analytics ce que les gens visitent sur la page. Je viens d'ajouter une balise d'ancrage et puis la partie de la page que je veux suivre.

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

ci-dessous est la fonction pour changer l'URL sans recharger la page. Prise en charge uniquement pour HTML5

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

moderne et navigateurs HTML5 , il existe une méthode appelée pushState sur la fenêtre history . Cela changera L'URL et le poussera à l'histoire sans charger la page.

vous pouvez l'utiliser comme ceci, il prendra 3 Paramètres, 1) objet d'état 2) titre et une URL):

window.history.pushState({page: "another"}, "another page", "example.html");

cela va changer l'url, mais ne pas recharger la page, ne vérifie pas non plus si la page existe, donc si vous faites du javascript code qui réagit à L'URL, vous pouvez travailler avec eux comme ceci.

il y a aussi history.replaceState() qui fait exactement la même chose, sauf qu'il modifiera l'histoire actuelle au lieu d'en créer une nouvelle!

Aussi, vous pouvez créer une fonction pour vérifier si l'histoire.pushState existent, puis continuer avec le reste comme ceci:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);   
  }
}

goTo("another page", "example", 'example.html');

vous pouvez aussi changer le # pour <HTML5 browsers , qui ne rechargera pas le page, c'est la voie Angular utiliser pour faire SPA , selon hashtag...

changer # est assez facile, faire comme:

window.location.hash = "example";

et vous pouvez le détecter comme ceci:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

comme L'a souligné Thomas Stjernegaard Jeppesen, vous pouvez utiliser histoire.js pour modifier les paramètres D'URL pendant que l'utilisateur navigue à travers vos liens Ajax et applications.

presque un an s'est écoulé depuis cette réponse, et L'histoire.js s'est développé et est devenu plus stable et cross-browser. Maintenant, il peut être utilisé pour gérer les états de l'histoire dans HTML5-conforme ainsi que dans de nombreux navigateurs HTML4-seulement. Dans cette démo Vous pouvez voir un exemple de la façon dont il fonctionne (en plus d'être capable d'essayer ses fonctionnalités et ses limites.

si vous avez besoin d'aide pour utiliser et implémenter cette bibliothèque, je vous suggère de jeter un oeil au code source de la page de démo: vous verrez que c'est très facile à faire.

enfin, pour une explication complète de ce que peuvent être les problèmes à propos de l'utilisation des Hash (et des hashbangs), consultez ce lien de Benjamin Lupton.

c'est possible sans utiliser de hashes, regardez le plugin Asual jQuery Address :

exemple ici .

notez qu'il utilise des hachures dans IE, il n'y a pas de solution de rechange.

Utiliser history.pushState() de l'HTML 5 de l'Histoire de l'API

consultez le lien pour plus de détails HTML5 History API

utiliser window.history.pushState("object or string", "Title", "/new-url") , mais il est toujours envoyer une nouvelle demande d'url au serveur

en supposant que vous N'essayez pas de faire quelque chose de malveillant, tout ce que vous voulez faire à vos propres URLs peut être magicé en étant avec htaccess .