Comment puis-je changer l'URL actuelle?

100

J'ai le code suivant qui modifie les pages à partir de JavaScript:

var newUrl = [some code to build up URL string];
window.location.replace(newUrl);

Mais cela ne change pas l'URL supérieure, donc quand quelqu'un clique sur le bouton Précédent, il ne revient pas à la page précédente.

Comment puis-je faire en sorte que JavaScript modifie également l'URL supérieure pour que le bouton de retour du navigateur fonctionne.

javascript

— Léora
source

165

document.location.href = newUrl;

https://developer.mozilla.org/en-US/docs/Web/API/document.location

— glebm
source

38

L'assignation simple à window.locationou window.location.hrefdevrait convenir:

window.location = newUrl;

Cependant, votre nouvelle URL obligera le navigateur à charger la nouvelle page, mais il semble que vous souhaitiez modifier l'URL sans quitter la page actuelle. Vous avez deux options pour cela:

Utilisez le hachage d'URL. Par exemple, vous pouvez passer de example.comà example.com#foosans charger une nouvelle page. Vous pouvez simplement configurer window.location.hashpour rendre cela facile. Ensuite, vous devez écouter l' hashchangeévénement HTML5 , qui sera déclenché lorsque l'utilisateur appuie sur le bouton Retour. Cela n'est pas pris en charge dans les anciennes versions d'IE, mais consultez jQuery BBQ , ce qui rend cela possible dans tous les navigateurs.
Vous pouvez utiliser l'historique HTML5 pour modifier le chemin sans recharger la page. Cela vous permettra de passer de example.com/fooà example.com/bar. Son utilisation est simple:

window.history.pushState("example.com/foo");

Lorsque l'utilisateur appuie sur "retour", vous recevez l' popstateévénement de la fenêtre , que vous pouvez facilement écouter (jQuery):

$(window).bind("popstate", function(e) { alert("location changed"); });

Malheureusement, cela n'est pris en charge que dans les navigateurs très modernes, tels que Chrome, Safari et la version bêta de Firefox 4.

— bcherry
source

la méthode .replace sur les chaînes ne changera pas la chaîne à laquelle elle a été appliquée, elle générera une nouvelle chaîne. " - la window.location.replace()méthode n'est pas la même que la String.prototype.replace()méthode car ce window.locationn'est pas une chaîne (c'est un objet). window.location.replace()remplace l'actuelle URL avec une nouvelle, tout en écrasant l'entrée de l'ancienne URL dans l'historique.

— Andy E

1

Merci pour la correction, je mettrai à jour ma réponse en conséquence.

— bcherry

2

Avec le recul, c'est de loin la meilleure réponse. document.location.href n'a rien sur pushState

— buley

7

Hmm, j'utiliserais

window.location = 'http://localhost/index.html#?options=go_here';

Je ne sais pas exactement si c'est ce que vous voulez dire.

— Mixeur
source

7

Si vous souhaitez simplement mettre à jour le chemin relatif, vous pouvez également faire

window.location.pathname = '/relative-link'

"http://domain.com" -> "http://domain.com/relative-link"

— Artokun
source

0

<script> 
    var url= "http://www.google.com"; 
    window.location = url; 
</script>

— user3230794
source