Question 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.

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

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

1806
2018-05-05 10:54


origine


Réponses:


Cela peut maintenant être fait dans Chrome, Safari, FF4 +, et IE10pp4 +!

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.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 un regard plus approfondi sur la manipulation de l'historique du navigateur, voir cet article MDN.


1628
2017-07-28 15:30



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

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

En savoir plus à ce sujet ici


381
2017-08-17 13:59



NOTE: Si vous travaillez avec un HTML5 navigateur alors vous devriez 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 la dernière page chargée. Si vous le changez (document.location) alors il va recharger la page.

Une raison évidente étant, vous écrivez un site sur www.mysite.com cela ressemble à une page de connexion bancaire. Ensuite, vous changez la barre d'URL du navigateur pour dire www.mybank.com. L'utilisateur sera totalement inconscient du fait qu'il regarde vraiment www.mysite.com.


96
2018-05-05 10:57



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 "casserait" 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 de retour revienne à la page d'index de la galerie au lieu de revenir sur chacune des images que vous avez vues) tout en donnant à chaque image sa propre URL.


93
2017-11-19 10:32



parent.location.hash = "hello";

73
2018-05-13 22:14



Voici ma solution: (newUrl est votre nouvelle URL que vous souhaitez remplacer en cours)

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

44
2018-06-10 18:25



Le HTML5 replaceState est la réponse, comme déjà mentionné par Vivart et geo1701. Cependant, il n'est pas supporté dans tous les navigateurs / versions. History.js enveloppe les fonctionnalités d'état HTML5 et fournit un support supplémentaire pour les navigateurs HTML4.


25
2017-11-21 11:09



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 a introduit le history.pushState(page, caption, replace_url) cela ne devrait pas recharger votre page.


20
2018-01-24 08:49



Si ce que vous essayez de faire est de permettre aux utilisateurs de mettre en signet / partager des pages, et vous n'avez pas besoin d'être exactement la bonne URL, et vous n'utilisez pas d'ancres 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 avec une ancre de hachage, et vous redirigez 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 www.site.com/#/section/page/6 (avec le hachage). Supposons que vous avez chargé le bon contenu pour la page 6 dans la page, donc en dehors du hash, l'utilisateur n'est pas trop dérangé.

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

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

5) Code sur www.site.com/ redirige l'utilisateur vers www.site.com/section/page/6, en utilisant quelque chose comme ça:

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.


18
2018-04-19 11:43



Tout changement de loction (soit window.location ou document.location) provoquera une requête 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 comme Mod_rewrite d'Apache si vous n'aimez pas les URL que vous utilisez actuellement.


12
2018-05-05 10:58