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

parent.location.hash = "hello";

Answer 2

En moderne navigateurs et HTML5 il existe une méthode appelée pushState sur la fenêtre history . Cela changera l'URL et la poussera dans l'historique 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 changera l'URL, mais ne rechargera pas la page. De plus, elle ne vérifie pas si la page existe, donc si vous faites du code JavaScript 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'historique actuel au lieu d'en créer un nouveau !

Vous pouvez également créer une fonction pour vérifier si history.pushState existent, puis continuez avec le reste comme ça :

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');

De même, vous pouvez modifier le # para <HTML5 browsers qui ne rechargera pas la page. C'est la façon qu'utilise Angular pour faire SPA selon le hashtag...

Changer # est assez facile, en faisant comme :

window.location.hash = "example";

Et vous pouvez le détecter comme ceci :

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Answer 3

Le HTML5 replaceState 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. Histoire.js englobe les fonctionnalités d'état de HTML5 et fournit un support supplémentaire pour les navigateurs HTML4.

Answer 4

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

Answer 5

Si ce que vous essayez de faire est de permettre aux utilisateurs de mettre en signet/partager des pages, et que vous n'avez pas besoin que ce soit exactement la bonne URL, et que vous n'utilisez pas d'ancres de hachage pour autre chose, alors vous pouvez faire cela en deux parties ; vous utilisez l'emplacement. hachage discuté ci-dessus, et ensuite implémentez une vérification sur la page d'accueil, pour rechercher une URL avec une ancre de hachage dedans, 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 change l'URL en www.site.com/#/section/page/6 (avec le dièse). Supposons que vous ayez chargé le contenu correct de la page 6 dans la page, de sorte qu'à part le hachage, l'utilisateur ne soit pas trop perturbé.

3. L'utilisateur transmet cette URL à quelqu'un d'autre ou la met en signet.

4. Quelqu'un d'autre, ou le même utilisateur à une date ultérieure, se rend à l'adresse suivante 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 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 dans certaines situations.