Location - Les API Web | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Location

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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.

Dans cet article

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

Une DOMString contenant l'URL entière.

Location.protocol

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

Location.host

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

Location.hostname

Une DOMString contenant le domaine de l'URL.

Location.port

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

Location.pathname

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

Location.search

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

Location.hash

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

Location.username

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

Location.password

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

Location.origin 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()

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

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

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 17 déc. 2024 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
Location
Propriétés d'instance
Méthodes d'instance
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript