Modifier L'URL sans recharger la page

y a-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 n'ai besoin de changer la partie après le domaine, donc ce n'est pas comme si je violais les politiques de cross-domaine.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads
1851
demandé sur Robinicks 2009-05-05 14:54:05

18 réponses

cela peut maintenant être fait en Chrome, Safari, FF4+, et IE10pp4+!

voir la réponse à cette question pour plus d'information: mettre à jour la barre d'adresse avec une nouvelle URL sans hachage ou recharger 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 le bouton de navigation arrière/avant:

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

pour un examen plus approfondi manipulation de l'historique du navigateur voir cet article de MDN .

1657
répondu David Murdoch 2017-05-23 12:18:24

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

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

plus D'informations à ce sujet de ici

397
répondu Vivart 2016-07-29 01:58:17

NOTE: Si vous travaillez avec un navigateur HTML5 , vous devez 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 ce qu'était la dernière page chargée. Si vous le changez ( document.location ) alors il rechargera la page.

une raison évidente étant, vous écrivez un site sur www.mysite.com qui ressemble à une page de connexion bancaire. Puis vous changez la barre d'url du navigateur pour dire www.mybank.com . L'utilisateur ne sera pas du tout conscient qu'il regarde vraiment www.mysite.com .

97
répondu Robin Day 2018-01-10 11:11:01

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 "briserait" 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 Précédent retourne à la page d'index de la galerie au lieu de revenir en arrière à travers chaque image que vous avez vue) tout en donnant à chaque image son propre unique URL.

95
répondu George Filippakos 2014-06-04 07:11:55
parent.location.hash = "hello";
75
répondu Martin. 2013-03-23 17:57:27

voici ma solution: (newUrl est votre nouvelle url que vous voulez remplacer l'actuelle)

history.pushState({}, null, newUrl);
52
répondu Haimei 2015-06-10 18:25:35

le HTML5 remplaçestate 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. de l'Histoire.js enveloppe HTML5 état fonctionnalités et fournit un soutien supplémentaire pour HTML4 navigateurs.

25
répondu Thomas Stjernegaard Jeppesen 2012-11-21 11:09:02

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

20
répondu Shine 2015-02-26 22:34:08

si ce que vous essayez de faire est de permettre aux utilisateurs de marquer des pages/partager des pages, et que vous n'avez pas besoin que ce soit exactement L'URL correcte, et que vous n'utilisez pas d'ancres de hachage pour autre chose, alors vous pouvez le faire en deux parties; vous utilisez l'emplacement.hachage discuté ci-dessus, puis mettre en œuvre une vérification sur la page d'accueil, pour rechercher une URL avec un ancrage de hachage dans elle, et vous rediriger vers le résultat suivant.

par exemple:

1) L'utilisateur est sur 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). Disons que vous avez chargé le bon contenu pour la page 6 dans la page, donc en dehors du hachage l'utilisateur n'est pas trop dérangé.

3) l'utilisateur transmet cette URL à quelqu'un d'autre, ou la marque

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

l'Espoir qui fait sens! C'est une approche utile pour certaines situations.

18
répondu Jeremy Warne 2018-01-10 12:10:09

toute modification de la localisation (soit window.location ou document.location ) provoquera une requête 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.

12
répondu Gumbo 2009-05-05 10:58:53

vous pouvez ajouter des étiquettes d'ancrage. Je l'utilise sur mon site http://www.piano-chords.net / pour que je puisse suivre avec google analytics ce que les gens visitent sur la page. Je viens d'ajouter une balise d'ancrage et 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);
11
répondu Nate 2009-12-14 09:04:42

ci-dessous est la fonction pour changer l'URL sans recharger la page. Prise en charge uniquement 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');
10
répondu Suraj 2015-10-27 08:33:13

moderne et navigateurs HTML5 , il existe une méthode appelée pushState sur la fenêtre history . Cela changera L'URL et le poussera à l'histoire sans charger la page.

vous pouvez l'utiliser comme ceci, il prendra 3 Paramètres, 1) objet d'état 2) titre et une URL):

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

cela va changer l'url, mais ne pas recharger la page, ne vérifie pas non plus si la page existe, donc si vous faites du javascript code 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'histoire actuelle au lieu d'en créer une nouvelle!

Aussi, vous pouvez créer une fonction pour vérifier si l'histoire.pushState existent, 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 le page, c'est la voie Angular utiliser pour faire SPA , selon 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);
}
10
répondu Alireza 2018-10-13 01:20:39

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

presque un an s'est écoulé depuis cette réponse, et L'histoire.js s'est développé et est devenu plus stable et cross-browser. Maintenant, il peut être utilisé pour gérer les états de l'histoire dans HTML5-conforme ainsi que dans de nombreux navigateurs HTML4-seulement. Dans cette démo Vous pouvez voir un exemple de la façon dont il fonctionne (en plus d'être capable 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 oeil au code source de la page de démo: vous verrez que c'est très facile à faire.

enfin, pour une explication complète de ce que peuvent être les problèmes à propos de l'utilisation des Hash (et des hashbangs), consultez ce lien de Benjamin Lupton.

7
répondu Erenor Paz 2013-09-05 13:55:24

c'est possible sans utiliser de hashes, regardez le plugin Asual jQuery Address :

exemple ici .

notez qu'il utilise des hachures dans IE, il n'y a pas de solution de rechange.

6
répondu satoshi 2012-02-18 09:37:35

Utiliser history.pushState() de l'HTML 5 de l'Histoire de l'API

consultez le lien pour plus de détails HTML5 History API

3
répondu Prathamesh Rasam 2015-08-15 11:55:32

utiliser window.history.pushState("object or string", "Title", "/new-url") , mais il est toujours envoyer une nouvelle demande d'url au serveur

-4
répondu Huy Truong 2017-07-13 04:04:41

en supposant que vous N'essayez pas de faire quelque chose de malveillant, tout ce que vous voulez faire à vos propres URLs peut être magicé en étant avec htaccess .

-8
répondu Hexagon Theory 2009-05-05 12:23:52