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
(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 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()
(en-US)-
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
.