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

Vous pouvez utiliser cette belle et simple fonction pour le faire n'importe où dans votre application.

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

}

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

Answer 2

Vous trouverez ci-dessous la fonction permettant de modifier l'URL sans recharger la page. Elle n'est prise 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');

Answer 3

Toute modification de la loction (soit window.location o document.location ) provoquera une requête sur cette nouvelle URL, si vous ne modifiez pas simplement le fragment d'URL. Si vous changez l'URL, vous changez l'URL.

Utilisez des techniques de réécriture d'URL côté serveur telles que Le mod_rewrite d'Apache si vous n'aimez pas les URLs que vous utilisez actuellement.

Answer 4

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.

J'ajoute simplement 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);

Answer 5

Comme l'a fait remarquer Thomas Stjernegaard Jeppesen, vous pouvez utiliser la méthode suivante Histoire.js pour modifier les paramètres des URL pendant que l'utilisateur navigue dans vos liens et applications Ajax.

Près d'un an s'est écoulé depuis cette réponse, et History.js a grandi et est devenu plus stable et multi-navigateur. Il peut désormais être utilisé pour gérer les états de l'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 mettre en œuvre cette bibliothèque, je vous suggère de jeter un coup d'œ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 des problèmes que peut poser l'utilisation des hachages (et des hashbangs), consultez le document suivant ce lien par Benjamin Lupton.