Comment modifier l'URL sans recharger la page?

Existe-t-il un moyen de modifier l'URL de la page actuelle sans recharger la page?

J'aimerais accéder à la partie avant le hachage # si possible.

J'ai seulement besoin de changer la partie après le domaine, donc ce n'est pas comme si je violais les politiques inter-domaines.

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

Cela peut maintenant être fait dans Chrome, Safari, Firefox 4+ et Internet Explorer 10pp4 +!

Voir la réponse à cette question pour plus d'informations: Mise à jour de la barre d'adresse avec une nouvelle URL sans hachage ou rechargement de la page

Exemple:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

Vous pouvez ensuite utiliser window.onpopstatepour détecter la navigation du bouton Précédent / Suivant:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Pour un examen plus approfondi de la manipulation de l'historique du navigateur, consultez cet article MDN .

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

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

En savoir plus ici

Vous pouvez également utiliser HTML5 replaceState si vous souhaitez modifier l'URL mais ne souhaitez 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 «casserait» la fonctionnalité du bouton de retour. Cela peut être nécessaire dans certains cas, comme une galerie d'images (où vous souhaitez que le bouton de retour revienne à la page d'index de la galerie au lieu de revenir en arrière dans chaque image que vous avez consultée) tout en donnant à chaque image sa propre URL unique.

Voici ma solution (newUrl est votre nouvelle URL que vous souhaitez remplacer par l'actuelle):

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

REMARQUE: Si vous travaillez avec un navigateur HTML5, vous devez ignorer cette réponse. Cela est désormais possible, comme le montrent les autres réponses.

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

Une raison évidente est que vous écrivez un site www.mysite.comqui ressemble à une page de connexion bancaire. Ensuite, vous modifiez la barre d'URL du navigateur pour dire www.mybank.com. L'utilisateur ne saura absolument pas qu'il regarde vraiment www.mysite.com.

parent.location.hash = "hello";

Dans les navigateurs modernes et HTML5 , il existe une méthode appelée pushStatesur fenêtre history. Cela va changer l'URL et la pousser dans l'historique sans charger la page.

Vous pouvez l'utiliser comme ceci, cela prendra 3 paramètres, 1) l'état de l'objet 2) le titre et une URL):

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

Cela changera l'URL, mais ne rechargera pas la page. De plus, il ne vérifie pas si la page existe, donc si vous faites du code JavaScript 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'historique actuel au lieu d'en créer un nouveau!

Vous pouvez également créer une fonction pour vérifier si elle history.pushStateexiste, 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 également modifier le #for <HTML5 browsers, qui ne rechargera pas la page. C'est la façon dont Angular utilise pour faire du SPA selon le 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);
}

Le HTML5 replaceState 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. History.js encapsule les fonctionnalités d'état HTML5 et fournit une prise en charge supplémentaire pour les navigateurs HTML4.

Avant HTML5, nous pouvons utiliser:

parent.location.hash = "hello";

et:

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

Cette méthode rechargera votre page, mais HTML5 a 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 mettre en signet / partager des pages, et que vous n'avez pas besoin que ce soit exactement la bonne URL, et que vous n'utilisez pas d'ancrage de hachage pour autre chose, alors vous pouvez le faire en deux les pièces; vous utilisez le fichier location.hash décrit ci-dessus, puis implémentez une vérification sur la page d'accueil, pour rechercher une URL contenant une ancre de hachage et vous rediriger vers le résultat suivant.

Par exemple:

1) L'utilisateur est activé 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). Supposons que vous ayez chargé le contenu correct de la page 6 dans la page, donc à part le hachage, l'utilisateur n'est pas trop dérangé.

3) L'utilisateur transmet cette URL à quelqu'un d'autre ou la met en signet

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 vers 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);
}

J'espère que cela a du sens! C'est une approche utile pour certaines situations.

Vous trouverez ci-dessous la fonction pour modifier l'URL sans recharger la page. Il n'est pris en charge que 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');

Toute modification de la loction (ou window.locationou document.location) provoquera une demande 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 balises d'ancrage. Je l'utilise sur mon site afin de pouvoir suivre avec Google Analytics ce que les gens visitent sur la page.

Je viens d'ajouter une balise d'ancrage, 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);

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

Près d'une année s'est écoulée depuis cette réponse, et History.js a grandi et est devenu plus stable et multi-navigateur. Maintenant, il peut être utilisé pour gérer les états d'historique dans les navigateurs compatibles HTML5 ainsi que dans de nombreux navigateurs HTML4 uniquement. Dans cette démo, vous pouvez voir un exemple de son fonctionnement (ainsi que la possibilité 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 œil au code source de la page de démonstration: vous verrez que c'est très facile à faire.

Enfin, pour une explication complète de ce que peuvent être les problèmes liés à l'utilisation des hachages (et des hashbangs), consultez ce lien de Benjamin Lupton.

Utiliser à history.pushState()partir de l'API HTML 5 History.

Reportez-vous à l' API HTML5 History pour plus de détails.

Vous pouvez utiliser cette fonction belle et simple pour ainsi ainsi n'importe où sur votre application.

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

Vous pouvez non seulement modifier l'URL, mais vous pouvez également mettre à jour le titre.

Tout le monde est très utile.