path: root/files/fr/web/api/window/location/index.html

---
title: window.location
slug: Web/API/window/location
tags:
  - DOM
  - DOM_0
translation_of: Web/API/Window/location
---
<p>Renvoie un objet <code>Location</code> 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.</p>

<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">  var adresseActuelle = window.location;
  window.location = nouvelleAdresse;</pre>

<p>où</p>

<ul>
 <li><em>adresseActuelle</em> est un objet de type <code>Location</code>, 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.</li>
 <li><em>nouvelleAdresse</em> est un objet <code>Location</code> ou une chaîne de caractères indiquant l'URL à charger.</li>
</ul>

<h2 id="L.27objet_Location" name="L.27objet_Location">L'objet <code>Location</code></h2>

<p>Les objets <code>Location</code> ont une méthode <code>toString</code> renvoyant l'URL courante. Il est également possible d'assigner une chaîne à <code>window.location</code>. Cela signifie que <code>window.location</code> 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 <a href="/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core/Objets_globaux/String" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/String">String</a>, il est nécessaire d'appeler explicitement <code>toString</code> :</p>

<pre class="brush: js">alert(window.location.toString().charAt(17))
</pre>

<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>

<p>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.</p>

<p>La colonne « Exemple » contient les valeurs de ces propriétés pour l'URL suivante :<span class="nowiki"> http://www.example.com:8080/search?q=devmo#test</span></p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>Propriété</th>
   <th>Description</th>
   <th>Exemple</th>
  </tr>
  <tr>
   <td><a name="hash"><code>hash</code></a></td>
   <td>La partie de l'URL qui suit le symbole « # », s'il y en un, avec ce symbole inclus. Une chaîne de caractères vide s'il n'y a pas de symbole #, ou qu'il n'est suivi par rien. Vous pouvez écouter l'<a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/Web/Reference/Events/hashchange">évènement hashchange</a> pour être alerté des changements du hash dans les navigateurs le supportant.</td>
   <td>#test</td>
  </tr>
  <tr>
   <td><a name="host"><code>host</code></a></td>
   <td>Le nom de l'hôte et son numéro de port.</td>
   <td>www.<span class="nowiki">example</span>.com:8080</td>
  </tr>
  <tr>
   <td><a name="hostname"><code>hostname</code></a></td>
   <td>Le nom de l'hôte (sans son numéro de port).</td>
   <td>www.<span class="nowiki">example</span>.com</td>
  </tr>
  <tr>
   <td><a name="href"><code>href</code></a></td>
   <td>L'URL entière.</td>
   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080/search?q=devmo#test</span></td>
  </tr>
  <tr>
   <td><a name="origin"><code>origin</code></a></td>
   <td>L'origine de l'URL</td>
   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080</span></td>
  </tr>
  <tr>
   <td><a name="pathname"><code>pathname</code></a></td>
   <td>Le chemin (relativement à l'hôte).</td>
   <td>/search</td>
  </tr>
  <tr>
   <td><a name="port"><code>port</code></a></td>
   <td>Le numéro de port de l'URL. Si l'URL n'a pas de port (si le site utilise le port 80, le port par défaut de la plupart des sites), une chaîne de caractères vide est renvoyée.</td>
   <td>8080</td>
  </tr>
  <tr>
   <td><a name="protocol"><code>protocol</code></a></td>
   <td>Le protocole de l'URL.</td>
   <td>http:</td>
  </tr>
  <tr>
   <td><a name="search"><code>search</code></a></td>
   <td>La partie de l'URL qui suit le symbole « <code>?</code> », avec ce symbole inclus</td>
   <td>?q=devmo</td>
  </tr>
 </tbody>
</table>

<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>Méthode</th>
   <th>Description</th>
  </tr>
  <tr>
   <td><code>assign(<em>url</em>)</code></td>
   <td>Charge le document situé à l'URL spécifiée.</td>
  </tr>
  <tr>
   <td><code>reload(<em>forceget</em>)</code></td>
   <td>Recharge le document depuis l'URL actuelle. <code>forceget</code> est une valeur booléenne, qui lorsqu'elle vaut <code>true</code> force la page à être rechargée depuis le serveur. Si elle vaut <code>false</code> ou n'est pas précisée, le navigateur peut recharger la page depuis son cache.</td>
  </tr>
  <tr>
   <td><code>replace(<em>url</em>)</code></td>
   <td>Remplace le document courant par celui situé à l'URL fournie. La différence avec la méthode <code>assign()</code> est qu'après un <code>replace()</code>, la page courante ne sera pas enregistrée dans l'historique de la session, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton « Page précédente » pour y retourner.</td>
  </tr>
  <tr>
   <td><code>toString()</code></td>
   <td>Renvoie la représentation sous forme de chaîne de l'URL de l'objet <code>Location</code>. Consultez la <a href="/fr/docs/JavaScript/Référence_JavaScript/Référence_JavaScript/Objets_globaux/Object/toString" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">référence JavaScript</a> pour plus de détails.</td>
  </tr>
 </tbody>
</table>

<h2 id="Exemple" name="Exemple">Exemples</h2>

<h3 id="Exemple_1_Naviguer_vers_une_nouvelle_page">Exemple 1 : Naviguer vers une nouvelle page</h3>

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

<pre class="brush: js">window.location.assign("http://www.mozilla.org"); // ou
window.location = "http://www.mozilla.org";
</pre>

<h3 id="Exemple_2_Forcer_le_rechargement_de_la_page_actuelle_depuis_le_serveur">Exemple 2 :  Forcer le rechargement de la page actuelle depuis le serveur</h3>

<pre class="brush: js">window.location.reload(true);</pre>

<h3 id="Exemple_3_Afficher_les_propriétés_de_l'URL_actuelle_dans_une_fenêtre_d'alerte">Exemple 3 : Afficher les propriétés de l'URL actuelle dans une fenêtre d'alerte</h3>

<pre class="brush: js">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: &lt;button onclick="montrerLoc();"&gt;Montrer les propriétés de Location&lt;/button&gt;
</pre>

<h3 id="Exemple_4_Envoyer_une_chaine_de_données_au_serveur_en_modifiant_la_propriété_search">Exemple 4 : Envoyer une chaine de données au serveur en modifiant la propriété <code>search</code></h3>

<pre class="brush: js">function envoyerDonnees (sData) {
  window.location.search = sData;
}

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

<p>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é).</p>

<h3 id="Exemple_5_Obtenir_la_valeur_d'un_paramètre_de_l'URL_par_window.location.search">Exemple 5 : Obtenir la valeur d'un paramètre de l'URL par <code>window.location.search</code></h3>

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

alert(obtenirParametre("nom"));
</pre>

<h3 id="Exemple_6_Placer_les_valeurs_obtenues_par_window.location.search_dans_un_objet_nommé_oParametres">Exemple 6 : Placer les valeurs obtenues par <code>window.location.search</code> dans un objet nommé <code>oParametres</code></h3>

<pre class="brush: js">var oParametre = {};

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

// alert(oParametre.votreValeur);
</pre>

<p>… la même chose avec un constructeur anonyme :</p>

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

// alert(oParametre.votreValeur);
</pre>

<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>

<p>{{SpecName("HTML WHATWG", "#the-location-interface")}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>
    <p>{{ CompatVersionUnknown() }}</p>
   </td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>window.location.origin</code></td>
   <td>
    <p>{{ CompatVersionUnknown() }}</p>
   </td>
   <td>{{CompatGeckoDesktop(21)}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>window.location.origin</code></td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatGeckoMobile(21)}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Voir_également">Voir également</h2>

<ul>
 <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a></li>
 <li>{{domxref('window.history')}}</li>
 <li><a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
</ul>