Comment modifier l'URL sans recharger la page ?

Question

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

Je voudrais accéder à la partie avant le # hash si possible.

Je dois seulement changer la portion 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

Answer 1

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 la nouvelle URL sans hachage ni 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 alors utiliser window.onpopstate pour détecter la navigation du bouton de retour/avance :

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, voir cet article du MDN .

Answer 2

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

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

Pour en savoir plus aquí

Answer 3

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 aurait pour effet de "casser" la fonctionnalité du bouton retour. Cela peut s'avérer nécessaire dans certains cas, par exemple dans une galerie d'images (où vous souhaitez que le bouton retour renvoie à la page d'index de la galerie au lieu de revenir à chaque image que vous avez consultée), tout en donnant à chaque image sa propre URL.

Answer 4

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

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

Answer 5

NOTE : Si vous travaillez avec un navigateur HTML5, vous devez ignorer cette réponse. C'est maintenant possible comme vous pouvez 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 la modifiez ( document.location ), la page sera rechargée.

Une raison évidente étant, vous écrivez un site sur www.mysite.com qui ressemble à une page de connexion bancaire. Ensuite, vous changez la barre d'URL du navigateur pour qu'elle dise www.mybank.com . L'utilisateur ne sera pas du tout conscient qu'il est en train de regarder www.mysite.com .