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

<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

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,.8);}

JavaScript

[].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

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

Spécification Statut Commentaires
HTML Living Standard
La définition de 'Location' dans cette spécification.
Standard évolutif Pas de différence avec HTML5.
HTML5
La définition de 'Location' dans cette spécification.
Recommendation Définition initiale.

Compatibilité

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
LocationChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet 3Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
ancestorOriginsChrome Support complet 20Edge Support complet 79Firefox Aucun support NonIE Aucun support NonOpera Support complet 15Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 25Firefox Android Aucun support NonOpera Android Support complet 14Safari iOS Support complet 6Samsung Internet Android Support complet 1.5
assignChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 5.5Opera Support complet 3Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
hashChrome Support complet OuiEdge Support complet 12Firefox Support complet 22IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
hostChrome Support complet OuiEdge Support complet 12Firefox Support complet 22IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
hostnameChrome Support complet OuiEdge Support complet 12Firefox Support complet 22IE Support complet OuiOpera Aucun support NonSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22Opera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
hrefChrome Support complet OuiEdge Support complet 12Firefox Support complet 22IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
originChrome Support complet OuiEdge Support complet 12Firefox Support complet 26
Notes
Support complet 26
Notes
Notes Before Firefox 49, results for URL using the blob scheme incorrectly returned null.
IE Support complet 11
Notes
Support complet 11
Notes
Notes Intranet sites are set to Compatibility View, which will emulate IE7 and omit window.location.origin.
Opera Support complet 10Safari Support complet Oui
Notes
Support complet Oui
Notes
Notes According to Apple's documentation, window.location.origin is supported since Safari 10 (both desktop and mobile), but the feature seems to be present in some older versions as well. Because of this, the exact versions supporting this feature cannot be determined reliably.
WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 26
Notes
Support complet 26
Notes
Notes Before Firefox 49, results for URL using the blob scheme incorrectly returned null.
Opera Android ? Safari iOS Support complet 5Samsung Internet Android Support complet Oui
password
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 26 — 45IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support 26 — 45Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
pathnameChrome Support complet OuiEdge Support complet 12Firefox Support complet 22
Notes
Support complet 22
Notes
Notes Before Firefox 53, the pathname property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" rather than "/x".
IE Support complet Oui
Notes
Support complet Oui
Notes
Notes Internet Explorer does not provide the leading slash character in the pathname (docs/Web/API/Location instead of /docs/Web/API/Location).
Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22
Notes
Support complet 22
Notes
Notes Before Firefox 53, the pathname property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" rather than "/x".
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
portChrome Support complet OuiEdge Support complet 12Firefox Support complet 22IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
protocolChrome Support complet OuiEdge Support complet 12Firefox Support complet 22IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
reloadChrome Support complet 1Edge Support complet 12
Notes
Support complet 12
Notes
Notes In EdgeHTML versions of Edge, if a page added to Trusted Sites contains a cross-origin iframe, then calling reload() from within the iframe reloads the trusted page (in other words, the top page reloads, not the iframe). This behavior was fixed in Edge 79.
Firefox Support complet 1IE Support complet 5.5
Notes
Support complet 5.5
Notes
Notes If a page added to Trusted Sites contains a cross-origin iframe, then calling reload() from within the iframe reloads the trusted page (in other words, the top page reloads, not the iframe).
Opera Support complet 3Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
replaceChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 5.5Opera Support complet 3Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
searchChrome Support complet OuiEdge Support complet 12Firefox Support complet 22
Notes
Support complet 22
Notes
Notes Before Firefox 53, the search property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, search would return "", rather than "?a=true&b=false".
IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 22
Notes
Support complet 22
Notes
Notes Before Firefox 53, the search property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, search would return "", rather than "?a=true&b=false".
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
toStringChrome Support complet 52Edge Support complet 12Firefox Support complet 22IE Support complet 11
Notes
Support complet 11
Notes
Notes Intranet sites are set to Compatibility View, which will emulate IE7 and omit window.location.toString.
Opera ? Safari ? WebView Android Support complet 52Chrome Android Support complet 52Firefox Android Support complet 22Opera Android ? Safari iOS ? Samsung Internet Android Support complet 6.0
username
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 26 — 45IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support 26 — 45Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi