window.location

Renvoie un objet Location contenant des informations concernant l'URL actuelle du document et fournit des méthodes pour modifier cette URL. Cette propriété peut être utilisée pour charger une autre page.

Syntaxe

  var adresseActuelle = window.location;
  window.location = nouvelleAdresse;

où

• adresseActuelle est un objet de type Location, fournissant des informations à propos de l'URL courante et des méthodes pour la modifier. Ses propriétés et méthodes sont décrites ci-dessous.
• nouvelleAdresse est un objet Location ou une chaîne de caractères indiquant l'URL à charger.

L'objet Location

Les objets Location ont une méthode toString renvoyant l'URL courante. Il est également possible d'assigner une chaîne à document.location. Cela signifie que document.location peut être utilisé comme s'il s'agissait d'une chaîne dans la plupart des cas. De temps en temps, par exemple pour appeler une méthode d'objet String, il est nécessaire d'appeler explicitement toString :

alert(document.location.toString().charAt(17))

Propriétés

Toutes les propriétés suivantes sont des chaînes de caractères. Elles peuvent être lues pour obtenir des informations concernant l'URL courante, ou modifiées pour accéder à une autre adresse URL.

La colonne « Exemple » contient les valeurs de ces propriétés pour l'URL suivante : https://www.example.com:8080/search?q=devmo#test

Méthodes

Exemples

Exemple 1 : Naviguer vers une nouvelle page

A chaque fois qu'une nouvelle valeur est assignée à l'objet Location, un document sera chargé en utilisant l'URL fournie, comme si window.location.assign() avait été appelé avec la nouvelle URL.

window.location.assign("https://www.mozilla.org"); // ou
window.location = "https://www.mozilla.org";

Exemple 2 :  Forcer le rechargement de la page actuelle depuis le serveur

window.location.reload(true);

Exemple 3 : Afficher les propriétés de l'URL actuelle dans une fenêtre d'alerte

function montrerLoc() {
  var oLocation = window.location, aLog = ["Propriété (Typeof): valeur", "window.location (" + (typeof oLocation) + "): " + oLocation ];
  for (var sProp in oLocation){
    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
  }
  alert(aLog.join("\n"));
}

// dans le HTM: <button onclick="montrerLoc();">Montrer les propriétés de Location</button>

Exemple 4 : Envoyer une chaine de données au serveur en modifiant la propriété search

function envoyerDonnees (sData) {
  window.location.search = sData;
}

// dans le HTML : <button onclick="envoyerDonnees('des infos');">Envoyer des données</button>

L'adresse URL complêtée par "?des%20infos" est envoyée au serveur (si aucune action est prise en charge par le serveur, le document actuel est rechargé avec la nouvelle chaîne de caractère modifié).

Exemple 5 : Obtenir la valeur d'un paramètre de l'URL par window.location.search

function obtenirParametre (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(obtenirParametre("nom"));

Exemple 6 : Placer les valeurs obtenues par window.location.search dans un objet nommé oParametres

var oParametre = {};

if (window.location.search.length > 1) {
  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
    aItKey = aCouples[nKeyId].split("=");
    oParametre[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : "";
  }
}

// alert(oParametre.votreValeur);

… la même chose avec un constructeur anonyme :

var oParametre = new (function (sRecherche) {
  if (sRecherche.length > 1) {
    for (var aItKey, nKeyId = 0, aCouples = sRecherche.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
      aItKey = aCouples[nKeyId].split("=");
      this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : "";
    }
  }
})(window.location.search);

// alert(oParametre.votreValeur);

Spécification

WHATWG HTML Living Standard

Compatibilité des navigateurs

Voir également

• Manipuler l'historique du navigateur
• window.history
• hashchange