1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: Location
slug: Web/API/Location
tags:
- API
- HTML DOM
- Interface
- JavaScript
- Location
- Reference
translation_of: Web/API/Location
---
<div>{{APIRef("HTML DOM")}}</div>
<p>L'interface <strong><code>Location</code></strong> 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 {{domxref("Document")}} et {{domxref("Window")}} sont liées à une <code>Location</code>, accessible via {{domxref("Document.location")}} et {{domxref("Window.location")}} respectivement.</p>
<h2 id="Anatomie_dune_Location">Anatomie d'une Location</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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);}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: 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 = '';
});
});</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample('Anatomy_Of_Location')}}</p>
<h2 id="Propriétés">Propriétés</h2>
<p><em>L'interface <code>Location</code> n'hérite d'aucune propriété, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
<dl>
<dt>{{domxref("Location.href")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant l'URL entière.</dd>
<dt>{{domxref("Location.protocol")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le <code>':'</code> final.</dd>
<dt>{{domxref("Location.host")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le <em>domaine</em>, un <code>':'</code>, et le <em>numéro de port</em> de l'URL.</dd>
<dt>{{domxref("Location.hostname")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
<dt>{{domxref("Location.port")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.</dd>
<dt>{{domxref("Location.pathname")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant un <code>'/'</code> initial suivi du chemin de l'URL.</dd>
<dt>{{domxref("Location.search")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL. Les navigateurs moderne fournissent <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> et <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> <span class="tlid-translation translation" lang="fr"><span title="">pour faciliter l'analyse des paramètres</span></span> de la <span class="tlid-translation translation" lang="fr"><span title="">chaîne de requête (querystring).</span></span></dd>
<dt>{{domxref("Location.hash")}}</dt>
<dd>Une {{domxref("DOMString")}} contenant un <code>'#'</code> suivi de <em>l'identifiant de fragment</em> de l'URL.</dd>
<dt>{{domxref("Location.username")}} {{Obsolete_Inline}}</dt>
<dd>Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié avant le nom de domaine.</dd>
<dt>{{domxref("Location.password")}} {{Obsolete_Inline}}</dt>
<dd>Une {{domxref("DOMString")}} contenant le mot de passe spécifié avant le nom de domaine.</dd>
<dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
<dd>Retourne une {{domxref("DOMString")}} contenant la forme canonique de l'origine de la location.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<p><em>L'interface <code>Location</code> n'hérite d'aucune méthode, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
<dl>
<dt>{{domxref("Location.assign()")}}</dt>
<dd>Charge la ressource située à l'URL passée en paramètre.</dd>
<dt>{{domxref("Location.reload()")}}</dt>
<dd>Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean">Boolean</a>, qui, s'il est <code>true</code>, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est <code>false</code> ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.</dd>
<dt>{{domxref("Location.replace()")}}</dt>
<dd>Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode <code>assign()</code> est que, après avoir utilisé <code>replace()</code>, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton <em>précédent</em> pour y revenir.</dd>
<dt>{{domxref("Location.toString()")}}</dt>
<dd>Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf que <code>toString()</code> ne peut être utilisée pour modifier la valeur.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: js line-numbers language-js"><code class="language-js">// Crée un élèment ancre et utilise la propriété href </code>dans le but de cet exemple
<code class="language-js">// </code>Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location
<code class="language-js"><span class="keyword token">var</span> url <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
url<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>protocol<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// https:</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>host<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// developer.mozilla.org:8080</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hostname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// developer.mozilla.org</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>port<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 8080</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>pathname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// /en-US/search</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>search<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// ?q=URL</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hash<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// #search-results-close-container</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>origin<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// https://developer.mozilla.org:8080</span></code></pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité">Compatibilité</h2>
<p>{{Compat("api.Location")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Deux méthodes qui créent un objet <code>location</code> : {{domxref("Window.location")}} et {{domxref("Document.location")}}.</li>
<li>Interfaces liées aux URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} et {{domxref("HTMLHyperlinkElementUtils")}}.</li>
</ul>
|
