javascript - without - replacestate




Modifier l'URL sans recharger la page (12)

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

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


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

Reportez-vous à 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 / window.onpopstate :

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

Pour un examen plus approfondi de la manipulation de l'historique du navigateur, consultez cet article de MDN .


Dans les navigateurs modernes et HTML5, il existe une méthode appelée pushState on sur l' history fenêtre. Cela va changer l'URL et la pousser vers l'historique sans charger la page.

Vous pouvez l'utiliser comme ceci, 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");

Cela va changer l'url, mais pas recharger la page, ne vérifie pas non plus si la page existe, donc si vous avez du code javascript qui réagit à l'URL, vous pouvez travailler avec eux comme ça.

Il y a aussi history.replaceState() qui fait exactement la même chose, sauf qu'il va modifier 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 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');

Aussi, vous pouvez changer le # pour <HTML5 browsers , qui ne rechargeront pas la page, c'est la façon dont Angular utilise pour faire SPA fonction du 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);
}

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


Il est possible sans utiliser de hash, jetez un coup d'oeil au plugin jQuery Address :

Exemple here .

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


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.


Toute modification de la loction ( window.location ou document.location ) entraînera une demande 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.


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

référez-vous au lien pour plus de détails HTML5 History API


Voici la fonction pour changer l'URL sans recharger la page. Il ne supporte que 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');

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

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

Vous pouvez ajouter des balises d'ancrage. Je l'utilise sur mon site http://www.piano-chords.net/ afin que je puisse 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 veux suivre.

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

REMARQUE: 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 l' URL dans le navigateur sans recharger la page. L'URL représente la dernière page chargée. Si vous le changez ( document.location ), cela rechargera la page.

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





friendly-url