Location
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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, 0.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
Obsolète-
Une
DOMString
contenant le nom d'utilisateur spécifié avant le nom de domaine. Location.password
Obsolète-
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 estfalse
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 sessionHistory
, 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 deURLUtils.href
, sauf quetoString()
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
Specification |
---|
HTML Standard # the-location-interface |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Deux méthodes qui créent un objet
location
:Window.location
etDocument.location
. - Interfaces liées aux URL:
URL
,URLSearchParams
etHTMLHyperlinkElementUtils
.