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, 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
.