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

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

Reportez-vous à la API HTML5 pour l'histoire pour plus de détails.

Answer 2

Votre nouvelle url.

let newUrlIS =  window.location.origin + '/user/profile/management';

Dans un sens, l'appel à pushState() est similaire à la définition de window.location = "#foo", dans la mesure où les deux créeront et activeront une autre entrée d'historique associée au document actuel. Mais pushState() présente quelques avantages :

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

Vous pouvez consulter la Racine : https://developer.mozilla.org/en-US/docs/Web/API/History_API

Answer 3

Il est possible de le faire sans utiliser de hachage. asual jQuery Address plugin :

Exemple aquí .

Notez qu'il utilisera des hachages dans IE, il n'y a pas de solution de contournement pour cela.

Answer 4

Celui-là fait ça : http://fr.gamesplanet.com/acheter-telecharger-jeux-pc/Action-pc-13.html#categoryId_13:p_1

changer de page pour voir

Qu'en pensez-vous ?

Answer 5

Ce code fonctionne pour moi. Je l'ai utilisé dans mon application en ajax.

history.pushState({ foo: 'bar' }, '', '/bank');

Une fois qu'une page est chargée dans un ID à l'aide d'ajax, elle change l'url du navigateur automatiquement sans recharger la page.

C'est la fonction ajax ci-dessous.

function showData(){
    $.ajax({
      type: "POST",
      url: "Bank.php", 
      data: {}, 
      success: function(html){          
        $("#viewpage").html(html).show();
        $("#viewpage").css("margin-left","0px");
      }
    });
  }

Exemple : A partir de n'importe quelle page ou contrôleur comme "Dashboard", quand je clique sur la banque, il charge la liste des banques en utilisant le code ajax sans recharger la page. A ce moment, l'URL du navigateur ne sera pas modifié.

history.pushState({ foo: 'bar' }, '', '/bank');

Mais quand j'utilise ce code dans l'ajax, il change l'url du navigateur sans recharger la page. C'est le code complet de l'ajax ici dans le bellow.

function showData(){
        $.ajax({
          type: "POST",
          url: "Bank.php", 
          data: {}, 
          success: function(html){          
            $("#viewpage").html(html).show();
            $("#viewpage").css("margin-left","0px");
            history.pushState({ foo: 'bar' }, '', '/bank');
          }
        });
      }