Comment modifier l'URL sans recharger la page?

Question

Est-il possible de modifier l'URL de la page en cours sans recharger la page?

Je souhaite accéder à la partie avant le # dièse si possible.

Je n'ai besoin que de modifier la partie après le domaine. Ce n'est donc pas comme si je violais les règles relatives à plusieurs domaines.

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

Answer 1

Cela peut maintenant être fait dans Chrome, Safari, Firefox 4+ et Internet & nbsp; Explorer & nbsp; 10pp4 +!

Voir la réponse à cette question pour plus d'informations: Mettre à jour la barre d'adresse avec une 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 le bouton de navigation 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 MDN .

Answer 2

HTML5 a présenté le 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');

Pour en savoir plus à ce sujet, consultez ici

.

Answer 3

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

Ceci "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.

Answer 4

REMARQUE: si vous utilisez un navigateur HTML5, vous devez alors ignorer cette réponse. C’est désormais possible comme le montrent les autres réponses.

Il est impossible 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), 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 <=>.

Answer 5

parent.location.hash = "hello";

Answer 6

Voici ma solution (newUrl est votre nouvelle adresse URL que vous souhaitez remplacer par l'adresse actuelle):

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

Answer 7

Le remplacement de l'état HTML5 est la solution, comme déjà mentionné par Vivart et geo1701. Cependant, il n'est pas pris en charge par tous les navigateurs / versions. History.js englobe les fonctionnalités de l'état HTML5 et fournit un support supplémentaire pour les navigateurs HTML4.

Answer 8

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) l'objet d'état 2) le titre et une URL):

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

Ceci changera l'URL, mais ne rechargera pas la page. En outre, il ne vérifie pas si la page existe. Par conséquent, si vous modifiez du code JavaScript réagissant à l'URL, vous pouvez utiliser ce code comme suit.

De plus, history.replaceState() 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 existe, puis continuer avec le reste comme suit:

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 également modifier # pour <HTML5 browsers, ce qui ne rechargera pas la page. C'est ainsi qu'Angular utilise SPA selon le 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);
}

Answer 9

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

Answer 10

Si vous essayez d'autoriser les utilisateurs à mettre en signet / partager des pages, si vous n'avez pas besoin qu'elle soit exactement l'URL appropriée et si vous n'utilisez pas d'ancres de hachage, vous pouvez le faire. ceci en deux parties; vous utilisez le fichier location.hash décrit ci-dessus, puis 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, de sorte que l'utilisateur ne soit pas trop perturbé.

3) L'utilisateur transmet cette URL à une autre personne ou la met en favori

.

4) Quelqu'un d'autre, ou le même utilisateur ultérieurement, accède à www.site.com/

5) Le code sur www.site.com/section/page/6 redirige l'utilisateur vers <=>, en utilisant quelque chose comme ceci:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

Espérons que cela a du sens! C'est une approche utile pour certaines situations.

Answer 11

Toute modification de la position (window.location ou document.location) provoquera une demande sur cette nouvelle URL, si vous & # 8217; ne modifiez pas uniquement 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 Apache & # 8217; s mod_rewrite si vous & # 8217; n'aimez pas les URL que vous utilisez actuellement.

Answer 12

Ci-dessous, la fonction permettant de changer 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');

Answer 13

Vous pouvez ajouter des balises d'ancrage. J'utilise ceci sur mon site http://www.piano-chords.net/ pour que je peut 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 souhaite suivre:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Answer 14

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-navigateurs. Désormais, il peut être utilisé pour gérer les états d'historique dans les navigateurs compatibles HTML5 ainsi que dans de nombreux navigateurs HTML4. Dans cette démo , vous pouvez voir un exemple de son fonctionnement (en tant que ainsi que 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 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 liés à l’utilisation des hachages (et des hashbangs), consultez ce lien par Benjamin Lupton.

Answer 15

Utilisez history.pushState() à partir de l'API HTML 5 History.

Reportez-vous à la API Historique HTML5 pour plus de détails.

Answer 16

Utiliser:

    let stateObject = { foo: "bar" };
    history.pushState(stateObject, "page 2", "newpage.html");

Vous pouvez le voir dans le blog Mettre à jour URL du navigateur sans rechargement de la page .

Answer 17

Utilisez window.history.pushState("object or string", "Title", "/new-url"), mais une nouvelle demande d’URL sera toujours envoyée au serveur.

Answer 18

En supposant que vous n'essayiez pas de faire quelque chose de malveillant, tout ce que vous aimeriez faire avec vos propres URL peut être créé avec htaccess .