Location
========

L'interface **`Location`** représente l'emplacement de l'objet auquel elle est liée. Les changements effectués dessus sont reflétés sur l'objet lié. Les deux interfaces `Document` et `Window` sont liées à une `Location`, accessible via `Document.location` et `Window.location` respectivement.

Anatomie d'une Location
-----------------------

### HTML


```html
<span id="href" title="href"
 ><span id="protocol" title="protocol">http:</span>//<span
 id="host"
 title="host"
 ><span id="hostname" title="hostname">example.org</span>:<span
 id="port"
 title="port"
 >8888</span
 ></span
 ><span id="pathname" title="pathname">/foo/bar</span
 ><span id="search" title="search">?q=baz</span
 ><span id="hash" title="hash">#bang</span></span
>
```

### CSS


```css
html,
body {
  height: 100%;
}
html {
  display: table;
  width: 100%;
}
body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: georgia;
  font-size: 230%;
  line-height: 1em;
  white-space: nowrap;
}

[title] {
  position: relative;
  display: inline-block;
  box-sizing: border-box; /\*border-bottom:.5em solid;\*/
  line-height: 2em;
  cursor: pointer;
}

[title]:before {
  content: attr(title);
  font-family: monospace;
  position: absolute;
  top: 100%;
  width: 100%;
  left: 50%;
  margin-left: -50%;
  font-size: 40%;
  line-height: 1.5;
  background: black;
}
[title]:hover:before,
:target:before {
  background: black;
  color: yellow;
}

[title] [title]:before {
  margin-top: 1.5em;
}
[title] [title] [title]:before {
  margin-top: 3em;
}

[title]:hover,
:target {
  position: relative;
  z-index: 1;
  outline: 50em solid rgba(255, 255, 255, 0.8);
}
```

### JavaScript


```js
[].forEach.call(document.querySelectorAll("[title][id]"), function (node) {
  node.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    window.location.hash = "#" + $(this).attr("id");
  });
});
[].forEach.call(document.querySelectorAll("[title]"), function (node) {
  node.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    window.location.hash = "";
  });
});
```

### Result

Propriétés
----------

*L'interface `Location` n'hérite d'aucune propriété, mais implémente celles de `URLUtils`.*

`Location.href` (en-US)

Une `DOMString` contenant l'URL entière.

`Location.protocol` (en-US)

Une `DOMString` contenant le schéma de protocole de l'URL, incluant le `':'` final.

`Location.host` (en-US)

Une `DOMString` contenant l'hôte, c'est-à-dire le *domaine*, un `':'`, et le *numéro de port* de l'URL.

`Location.hostname` (en-US)

Une `DOMString` contenant le domaine de l'URL.

`Location.port` (en-US)

Une `DOMString` contenant le numéro de port de l'URL.

`Location.pathname` (en-US)

Une `DOMString` contenant un `'/'` initial suivi du chemin de l'URL.

`Location.search` (en-US)

Une `DOMString` contenant un `'?'` suivi des paramètres de l'URL. Les navigateurs moderne fournissent URLSearchParams (en-US) et URL.searchParams pour faciliter l'analyse des paramètres de la chaîne de requête (querystring).

`Location.hash` (en-US)

Une `DOMString` contenant un `'#'` suivi de *l'identifiant de fragment* de l'URL.

`Location.username` (en-US) 
Obsolète

Une `DOMString` contenant le nom d'utilisateur spécifié avant le nom de domaine.

`Location.password` (en-US) 
Obsolète

Une `DOMString` contenant le mot de passe spécifié avant le nom de domaine.

`Location.origin` (en-US) Lecture seule 

Retourne une `DOMString` contenant la forme canonique de l'origine de la location.

Méthodes
--------

*L'interface `Location` n'hérite d'aucune méthode, mais implémente celles de `URLUtils`.*

`Location.assign()`

Charge la ressource située à l'URL passée en paramètre.

`Location.reload()`

Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un Boolean, qui, s'il est `true`, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est `false` ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.

`Location.replace()`

Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode `assign()` est que, après avoir utilisé `replace()`, la page actuelle ne sera pas enregistrée dans l'historique de session `History`, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton *précédent* pour y revenir.

`Location.toString()` (en-US)

Retourne une `DOMString` contenant l'URL entière. C'est un synonyme de `URLUtils.href`, sauf que `toString()` ne peut être utilisée pour modifier la valeur.

Exemples
--------


```js
// Crée un élèment ancre et utilise la propriété href dans le but de cet exemple
// Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location
var url = document.createElement("a");
url.href =
  "https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container";
console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org:8080
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // 8080
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org:8080
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-location-interface |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Deux méthodes qui créent un objet `location` : `Window.location` et `Document.location`.
* Interfaces liées aux URL: `URL`, `URLSearchParams` et `HTMLHyperlinkElementUtils`.