Comment modifier l'URL sans recharger la page?
Est-il possible de modifier l'URL de la page en cours sans recharger la page?
Je voudrais accéder à la partie avant le # hash si possible.
Je dois seulement changer la partie after le domaine, donc ce n'est pas comme si je violais les politiques entre 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 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 ensuite utiliser window.onpopstate pour 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 plus de détails sur la manipulation de l'historique du navigateur, voir cet article de MDN .
HTML5 a introduit les méthodes history.pushState() et history.replaceState() , qui vous permettent d'ajouter et de modifier des entrées d'historique, respectivement.
window.history.pushState('page2', 'Title', '/page2.php');
En savoir plus à ce sujet de 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, par exemple une galerie d'images (où vous souhaitez que le bouton Précédent revienne à la page d'index de la galerie au lieu de parcourir chacune des images que vous avez visionnées), tout en attribuant à chaque image son propre URL unique.
NOTE: Si vous travaillez avec un navigateur HTML5, alors vous devriez 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 la 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 des raisons évidentes est que vous écrivez un site sur www.mysite.com qui ressemble à une page de connexion bancaire. Ensuite, vous modifiez la barre d’URL du navigateur pour indiquer www.mybank.com. L'utilisateur sera totalement inconscient du fait qu'il regarde vraiment www.mysite.com.
Voici ma solution (newUrl est votre nouvelle adresse URL que vous souhaitez remplacer par l'adresse actuelle):
history.pushState({}, null, newUrl);
parent.location.hash = "hello";
Le HTML5 remplacer State est la réponse, comme déjà mentionné par Vivart et geo1701. Cependant, il n'est pas pris en charge par tous les navigateurs/versions. History.js enveloppe les fonctionnalités de l’état HTML5 et fournit un support supplémentaire pour les navigateurs HTML4.
Dans les navigateurs modernes et HTML5 , il existe une méthode appelée pushState sur la fenêtre history. Cela changera l'URL et le poussera dans l'historique sans charger la page.
Vous pouvez l'utiliser comme ça, il faudra 3 paramètres, 1) objet d'état 2) 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 créez du code JavaScript réagissant à l'URL, vous pouvez travailler avec eux comme ceci.
De plus, il y a 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 aussi créer une fonction pour vérifier si history.pushState existe, 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 la page. C'est ainsi que Angular utilise SPA en fonction du hashtag ...
Changer # est assez facile, comme ceci:
window.location.hash = "example";
Et vous pouvez le détecter comme ceci:
window.onhashchange = function () {
console.log("#changed", window.location.hash);
}
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 la history.pushState(page, caption, replace_url) qui ne devrait pas recharger votre page.
Si vous essayez d'autoriser les utilisateurs à mettre en signet/partager des pages, si vous n'avez pas besoin que l'URL soit correcte et si vous n'utilisez pas d'ancres de hachage, vous pouvez le faire en deux. les pièces; vous utilisez le fichier location.hash décrit ci-dessus, puis vous implémentez une vérification de la page d'accueil pour rechercher une URL avec une ancre de hachage et vous rediriger vers le résultat suivant.
Par exemple:
1) L'utilisateur est sur www.site.com/section/page/4
2) L'utilisateur effectue une action qui modifie l'URL en www.site.com/#/section/page/6 (avec le hachage). Supposons que vous ayez chargé le contenu correct pour la page 6 dans la page. Ainsi, mis à part le hachage, l'utilisateur n'est pas trop dérangé.
3) L'utilisateur transmet cette URL à une autre personne ou la met en favori
4) Quelqu'un d'autre, ou le même utilisateur à une date ultérieure, accède à 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 permettant de modifier l’URL sans recharger la page. Il est uniquement pris en charge 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 position (window.location ou document.location) provoquera une demande sur cette nouvelle URL, si vous ne modifiez pas simplement le fragment d’URL. Si vous modifiez l'URL, vous modifiez l'URL.
Utilisez des techniques de réécriture d’URL côté serveur telles que mod_rewrite d’Apache si vous n’aimez pas les URL que vous utilisez actuellement.
Vous pouvez ajouter des balises d'ancrage. J'utilise ceci sur mon site http://www.piano-chords.net/ afin que je puisse 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 dans vos liens et applications Ajax.
Presque un an a passé depuis cette réponse, et History.js a grandi et est devenu plus stable et inter-navigateur. Désormais, il peut être utilisé pour gérer les états de l'historique dans les navigateurs compatibles avec HTML5 ainsi que dans de nombreux navigateurs HTML4. Dans cette démo Vous pouvez voir un exemple de fonctionnement (ainsi que d’essayer ses fonctionnalités et ses limites.
Si vous avez besoin d’aide pour utiliser et mettre en oeuvre 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 détaillée de ce que peuvent être les problèmes liés à l’utilisation des hachages (et des hashbangs), consultez ce lien par Benjamin Lupton.
Utilisez history.pushState() de l’API HTML 5 History.
Reportez-vous à HTML5 History API pour plus de détails.