diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/window | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/window')
101 files changed, 3792 insertions, 4965 deletions
diff --git a/files/fr/web/api/window/afterprint_event/index.md b/files/fr/web/api/window/afterprint_event/index.md index c63ed6bc56..84afdc8bd8 100644 --- a/files/fr/web/api/window/afterprint_event/index.md +++ b/files/fr/web/api/window/afterprint_event/index.md @@ -4,61 +4,32 @@ slug: Web/API/Window/afterprint_event translation_of: Web/API/Window/afterprint_event original_slug: Web/Events/afterprint --- -<p>L'événement <strong>afterprint</strong> est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé.</p> +L'événement **afterprint** est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé. -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> +- Spécification + - : [HTML5](https://html.spec.whatwg.org/multipage/webappapis.html#printing) +- Interface + - : Event +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : DefaultView (`<window>`) +- Action par défaut + - : Aucune -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li><a href="/fr/docs/Mozilla_event_reference/beforeprint">beforeprint</a></li> -</ul> +- [beforeprint](/fr/docs/Mozilla_event_reference/beforeprint) diff --git a/files/fr/web/api/window/alert/index.md b/files/fr/web/api/window/alert/index.md index 9f41bd3dff..501056191e 100644 --- a/files/fr/web/api/window/alert/index.md +++ b/files/fr/web/api/window/alert/index.md @@ -7,30 +7,39 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/alert --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Affiche un dialogue d'alerte contenant le texte spécifié.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval">window.alert(<i>message</i>); -</pre> -<ul> - <li><code>message</code> est une chaîne contenant le texte à afficher dans le dialogue d'alerte.</li> -</ul> -<h3 id="Exemple">Exemple</h3> -<pre class="eval">window.alert("Bonjour !"); -</pre> -<p>produira :</p> - -<p><img src="alerthelloworld.png"></p> - -<h3 id="Notes">Notes</h3> -<p>Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.</p> -<p>Le texte suivant est commun à cet article, <code>DOM:window.prompt</code> et <code>DOM:window.confirm</code> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p> -<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }}</p> -<h3 id="Voir_aussi">Voir aussi</h3> -<ul> - <li><a href="/fr/DOM/window.confirm">confirm</a></li> - <li><a href="/fr/DOM/window.prompt">prompt</a></li> -</ul>
\ No newline at end of file +{{ ApiRef() }} + +### Résumé + +Affiche un dialogue d'alerte contenant le texte spécifié. + +### Syntaxe + + window.alert(message); + +- `message` est une chaîne contenant le texte à afficher dans le dialogue d'alerte. + +### Exemple + + window.alert("Bonjour !"); + +produira : + + + +### Notes + +Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message. + +Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). + +Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). + +### Spécification + +{{ DOM0() }} + +### Voir aussi + +- [confirm](/fr/DOM/window.confirm) +- [prompt](/fr/DOM/window.prompt) diff --git a/files/fr/web/api/window/applicationcache/index.md b/files/fr/web/api/window/applicationcache/index.md index 7518fb40ed..1366a2ac23 100644 --- a/files/fr/web/api/window/applicationcache/index.md +++ b/files/fr/web/api/window/applicationcache/index.md @@ -3,33 +3,24 @@ title: Window.applicationCache slug: Web/API/Window/applicationCache translation_of: Web/API/Window/applicationCache --- -<div class="warning"> -<p><strong>Attention :</strong> Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> à la place.</p> -</div> +> **Attention :** Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place. -<p>{{APIRef}}</p> +{{APIRef}} -<p>Retourne une référence à l'objet du cache d'application pour la fenêtre.</p> +Retourne une référence à l'objet du cache d'application pour la fenêtre. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>cache</var> = window.applicationCache -</pre> + cache = window.applicationCache -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<ul> - <li><code>cache</code> est une référence objet pour un {{domxref("OfflineResourceList")}}.</li> -</ul> +- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}. -<h2 id="Specification">Spécification</h2> +## Spécification -<ul> - <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li> -</ul> +- {{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li> -</ul> +- [Using Application Cache](/en-US/docs/HTML/Using_the_application_cache) diff --git a/files/fr/web/api/window/back/index.md b/files/fr/web/api/window/back/index.md index 9743d49f37..7a120fec02 100644 --- a/files/fr/web/api/window/back/index.md +++ b/files/fr/web/api/window/back/index.md @@ -13,47 +13,45 @@ tags: - back translation_of: Web/API/Window/back --- -<div>{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}}</div> +{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}} -<p>La méthode obsolète et non standard <code>back()</code> sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31.</p> +La méthode obsolète et non standard `back()` sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31. -<div class="blockIndicator note"> -<p><strong>Note:</strong> Utilisez plutôt la méthode standard {{domxref("history.back")}}.</p> -</div> +> **Note :** Utilisez plutôt la méthode standard {{domxref("history.back")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">window.back();</pre> + window.back(); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<p>Aucun.</p> +Aucun. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p><code>undefined</code>.</p> +`undefined`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Cet exemple simple gère un clic sur un bouton "Retour" en rappelant <code>back()</code>.</p> +Cet exemple simple gère un clic sur un bouton "Retour" en rappelant `back()`. -<pre class="brush:js">function boutonRetour() { +```js +function boutonRetour() { if (peutRevenirEnArriere) { window.back(); } -}</pre> +} +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Cela ne fait partie d'aucune spécification.</p> +Cela ne fait partie d'aucune spécification. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31.</p> +Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31. -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("History.back()")}}</li> - <li>{{domxref("History.forward()")}}</li> -</ul> +- {{domxref("History.back()")}} +- {{domxref("History.forward()")}} diff --git a/files/fr/web/api/window/beforeprint_event/index.md b/files/fr/web/api/window/beforeprint_event/index.md index b0e96ca975..fbf8c38b2a 100644 --- a/files/fr/web/api/window/beforeprint_event/index.md +++ b/files/fr/web/api/window/beforeprint_event/index.md @@ -7,69 +7,40 @@ tags: translation_of: Web/API/Window/beforeprint_event original_slug: Web/Events/beforeprint --- -<p>L'événement <code><strong>beforeprint</strong></code> est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé.</p> +L'événement **`beforeprint`** est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé. -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> +- Spécification + - : [HTML5](https://html.spec.whatwg.org/multipage/webappapis.html#printing) +- Interface + - : Event +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : DefaultView (`<window>`) +- Action par défaut + - : Aucune -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>En utilisant <code>window.addEventListener()</code> :</p> +En utilisant `window.addEventListener()` : -<pre class="notranslate">window.addEventListener("beforeprint", (evenement) => { - console.log("Before print"); -});</pre> + window.addEventListener("beforeprint", (evenement) => { + console.log("Before print"); + }); -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li><a href="/en-US/docs/Mozilla_event_reference/afterprint">afterprint</a></li> -</ul> +- [afterprint](/en-US/docs/Mozilla_event_reference/afterprint) diff --git a/files/fr/web/api/window/beforeunload_event/index.md b/files/fr/web/api/window/beforeunload_event/index.md index 249644f9e3..69f36f86e4 100644 --- a/files/fr/web/api/window/beforeunload_event/index.md +++ b/files/fr/web/api/window/beforeunload_event/index.md @@ -4,137 +4,89 @@ slug: Web/API/Window/beforeunload_event translation_of: Web/API/Window/beforeunload_event original_slug: Web/Events/beforeunload --- -<p>L'événement <strong><code>beforeunload</code></strong> est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.</p> +L'événement **`beforeunload`** est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés. -<p>Lorsqu'une chaîne de caractères est assignée à la propriété <code>returnValue</code> de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.</p> +Lorsqu'une chaîne de caractères est assignée à la propriété `returnValue` de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement. -<div class="note"> -<p><strong>Note :</strong> Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires <code>beforeunload</code>.</p> -</div> +> **Note :** Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires `beforeunload`. -<div class="warning"> -<p><strong>Attention :</strong> Attacher un gestionnaire d'événement <code>beforeunload</code> à <code>window</code> ou à <code>document</code> empêche les navigateurs d'utiliser leur mémoire cache ; consulter <a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5">Utilisation du cache de Firefox 1.5</a> ou <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a> (en anglais).</p> -</div> +> **Attention :** Attacher un gestionnaire d'événement `beforeunload` à `window` ou à `document` empêche les navigateurs d'utiliser leur mémoire cache ; consulter [Utilisation du cache de Firefox 1.5](/fr/docs/Utilisation_du_cache_de_Firefox_1.5) ou [WebKit's Page Cache](https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/) (en anglais). <table class="properties"> - <tbody> - <tr> - <td>Propagation</td> - <td>Non</td> - </tr> - <tr> - <td>Annulable</td> - <td>Oui</td> - </tr> - <tr> - <td>Object cible</td> - <td>defaultView</td> - </tr> - <tr> - <td>Interface</td> - <td>{{domxref("Event")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td>Propagation</td> + <td>Non</td> + </tr> + <tr> + <td>Annulable</td> + <td>Oui</td> + </tr> + <tr> + <td>Object cible</td> + <td>defaultView</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> </table> -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type de l'événement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readOnlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Est-ce que l'événement se propage ?</td> - </tr> - <tr> - <td><code>cancelable</code> {{readOnlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Est-il possible d'annuler l'événement ?</td> - </tr> - <tr> - <td><code>returnValue</code></td> - <td>{{domxref("DOMString")}}</td> - <td>La valeur de retour de l'événement (le message à afficher à l'utlisateur)</td> - </tr> - </tbody> -</table> +## Propriétés + +| Propriété | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------- | +| `target` {{readOnlyInline}} | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM). | +| `type` {{readOnlyInline}} | {{domxref("DOMString")}} | Le type de l'événement. | +| `bubbles` {{readOnlyInline}} | {{jsxref("Boolean")}} | Est-ce que l'événement se propage ? | +| `cancelable` {{readOnlyInline}} | {{jsxref("Boolean")}} | Est-il possible d'annuler l'événement ? | +| `returnValue` | {{domxref("DOMString")}} | La valeur de retour de l'événement (le message à afficher à l'utlisateur) | -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush:js;">window.addEventListener("beforeunload", function (event) { +```js +window.addEventListener("beforeunload", function (event) { event.returnValue = "\o/"; }); // est équivalent à window.addEventListener("beforeunload", function (event) { event.preventDefault(); -});</pre> +}); +``` -<p>Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:</p> +Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit: -<pre class="brush: js">window.addEventListener("beforeunload", function (e) { +```js +window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+ - return confirmationMessage; // Gecko, WebKit, Chrome <34 -});</pre> - -<h2 id="Notes">Notes</h2> - -<p>Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}.</p> - -<p>Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">specification HTML5 </a> pour plus de détails.</p> - -<p>Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>Première définition</td> - </tr> - </tbody> -</table> + return confirmationMessage; // Gecko, WebKit, Chrome <34 +}); +``` + +## Notes + +Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}. + +Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir [specification HTML5 ](http://www.w3.org/TR/html5/webappapis.html#user-prompts)pour plus de détails. + +Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}} | {{Spec2("HTML5 W3C")}} | Première définition | -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{Event("DOMContentLoaded")}}</li> - <li>{{Event("readystatechange")}}</li> - <li>{{Event("load")}}</li> - <li>{{Event("unload")}}</li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li> - <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51</a></li> -</ul> +- {{Event("DOMContentLoaded")}} +- {{Event("readystatechange")}} +- {{Event("load")}} +- {{Event("unload")}} +- [Unloading Documents — Prompt to unload a document](http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document) +- [Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51](https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs) diff --git a/files/fr/web/api/window/blur/index.md b/files/fr/web/api/window/blur/index.md index 75091cf2a6..190281c682 100644 --- a/files/fr/web/api/window/blur/index.md +++ b/files/fr/web/api/window/blur/index.md @@ -8,39 +8,30 @@ tags: - Méthode translation_of: Web/API/Window/blur --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>Éloigne la mise au point de la fenêtre.</p> +Éloigne la mise au point de la fenêtre. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><code>window.blur()</code></pre> + window.blur() -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">window.blur();</pre> +```js +window.blur(); +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>La méthode <code>window.blur()</code> est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.</p> +La méthode `window.blur()` est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentair</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentair | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | +| {{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.blur")}}</p> +{{Compat("api.Window.blur")}} diff --git a/files/fr/web/api/window/cancelanimationframe/index.md b/files/fr/web/api/window/cancelanimationframe/index.md index a0c27fc7eb..7091fd2664 100644 --- a/files/fr/web/api/window/cancelanimationframe/index.md +++ b/files/fr/web/api/window/cancelanimationframe/index.md @@ -11,24 +11,21 @@ tags: - Window translation_of: Web/API/Window/cancelAnimationFrame --- -<div>{{APIRef}}</div> +{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}. -<div>La méthode <code><strong>window.cancelAnimationFrame()</strong></code> met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.</div> +## Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> + window.cancelAnimationFrame(requestID); -<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>);</pre> +### Paramètres -<h3 id="Paramètres">Paramètres</h3> +- `requestID` + - : L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback) -<dl> - <dt><code>requestID</code></dt> - <dd>L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)</dd> -</dl> +## Exemples -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || +```js +var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; @@ -40,7 +37,7 @@ var myReq; // Déclarer la variable globalement avant de lancer l'animation function step(timestamp) { var progress = timestamp - start; d.style.left = Math.min(progress / 10, 200) + 'px'; - if (progress < 2000) { + if (progress < 2000) { // Ne pas oublier de récupérer l'identifiant à chaque appel de la fonction myReq = requestAnimationFrame(step); } @@ -48,30 +45,19 @@ function step(timestamp) { myReq = requestAnimationFrame(step); // L'annulation utilise le dernier identifiant cancelAnimationFrame(myReq); -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</td> - </tr> - </tbody> -</table> +| Spécification | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.cancelAnimationFrame")}}</p> +{{Compat("api.Window.cancelAnimationFrame")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.mozAnimationStartTime")}}</li> - <li>{{domxref("window.requestAnimationFrame()")}}</li> -</ul> +- {{domxref("window.mozAnimationStartTime")}} +- {{domxref("window.requestAnimationFrame()")}} diff --git a/files/fr/web/api/window/cancelidlecallback/index.md b/files/fr/web/api/window/cancelidlecallback/index.md index 39c94deb9a..126c343b54 100644 --- a/files/fr/web/api/window/cancelidlecallback/index.md +++ b/files/fr/web/api/window/cancelidlecallback/index.md @@ -3,38 +3,25 @@ title: window.cancelIdleCallback() slug: Web/API/Window/cancelIdleCallback translation_of: Web/API/Window/cancelIdleCallback --- -<div>{{APIRef}}{{SeeCompatTable}}</div> +{{APIRef}}{{SeeCompatTable}} -<p>La méthode <strong><code>window.cancelIdleCallback()</code></strong> annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.</p> +La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">window.cancelIdleCallback(<em>idleCallbackId</em>);</pre> + window.cancelIdleCallback(idleCallbackId); -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<dl> - <dt>idleCallbackId</dt> - <dd>L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.</dd> -</dl> +- idleCallbackId + - : L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Status</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Background Tasks')}}</td> - <td>{{Spec2('Background Tasks')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Status | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Background Tasks')}} | {{Spec2('Background Tasks')}} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.cancelIdleCallback")}}</p> +{{Compat("api.Window.cancelIdleCallback")}} diff --git a/files/fr/web/api/window/captureevents/index.md b/files/fr/web/api/window/captureevents/index.md index cac350b130..4e79f89499 100644 --- a/files/fr/web/api/window/captureevents/index.md +++ b/files/fr/web/api/window/captureevents/index.md @@ -9,24 +9,24 @@ tags: - Non-standard translation_of: Web/API/Window/captureEvents --- -<div>{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}}</div> +{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}} -<p>La méthode <code><strong>Window.captureEvents()</strong></code> enregistre la fenêtre pour capturer tous les événements du type spécifié.</p> +La méthode **`Window.captureEvents()`** enregistre la fenêtre pour capturer tous les événements du type spécifié. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">window.captureEvents(<em>eventType</em>) -</pre> + window.captureEvents(eventType) -<p><code>eventType</code> est une combinaison des valeurs suivantes: <code>Event.ABORT</code>, <code>Event.BLUR</code>, <code>Event.CLICK</code>, <code>Event.CHANGE</code>, <code>Event.DBLCLICK</code>, <code>Event.DRAGDDROP</code>, <code>Event.ERROR</code>, <code>Event.FOCUS</code>, <code>Event.KEYDOWN</code>, <code>Event.KEYPRESS</code>, <code>Event.KEYUP</code>, <code>Event.LOAD</code>, <code>Event.MOUSEDOWN</code>, <code>Event.MOUSEMOVE</code>, <code>Event.MOUSEOUT</code>, <code>Event.MOUSEOVER</code>, <code>Event.MOUSEUP</code>, <code>Event.MOVE</code>, <code>Event.RESET</code>, <code>Event.RESIZE</code>, <code>Event.SELECT</code>, <code>Event.SUBMIT</code>, <code>Event.UNLOAD</code>.</p> +`eventType` est une combinaison des valeurs suivantes: `Event.ABORT`, `Event.BLUR`, `Event.CLICK`, `Event.CHANGE`, `Event.DBLCLICK`, `Event.DRAGDDROP`, `Event.ERROR`, `Event.FOCUS`, `Event.KEYDOWN`, `Event.KEYPRESS`, `Event.KEYUP`, `Event.LOAD`, `Event.MOUSEDOWN`, `Event.MOUSEMOVE`, `Event.MOUSEOUT`, `Event.MOUSEOVER`, `Event.MOUSEUP`, `Event.MOVE`, `Event.RESET`, `Event.RESIZE`, `Event.SELECT`, `Event.SUBMIT`, `Event.UNLOAD`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:html"><!DOCTYPE html> -<html lang="fr"> -<head> -<!-- ... --> -<script> +```html +<!DOCTYPE html> +<html lang="fr"> +<head> +<!-- ... --> +<script> function reg() { window.captureEvents(Event.CLICK); window.onclick = page_click; @@ -35,23 +35,23 @@ function reg() { function page_click() { alert('événement de clic sur la page détecté!'); } -</script> -</head> +</script> +</head> -<body onload="reg();"> -<p>cliquez n'importe où sur cette page.</p> -</body> -</html> -</pre> +<body onload="reg();"> +<p>cliquez n'importe où sur cette page.</p> +</body> +</html> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la <a href="/en-US/docs/Web/API/Window"><code>window</code></a> de haut niveau et les objets de<code> </code><a href="/en-US/docs/Web/API/document"><code>document</code></a> avant d'arriver à l'objet qui a déclenché l'événement.</p> +Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la [`window`](/en-US/docs/Web/API/Window) de haut niveau et les objets de` `[`document`](/en-US/docs/Web/API/document) avant d'arriver à l'objet qui a déclenché l'événement. -<p>Lorsque vous appelez la méthode <code>captureEvents()</code> sur <a href="/en-US/docs/Web/API/Window"><code>window</code></a>, événements du type que vous spécifier (par exemple, <code>Event.CLICK</code>) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler<code> </code><a href="/en-US/docs/Web/API/window.releaseEvents"><code>window.releaseEvents()</code></a> ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements.</p> +Lorsque vous appelez la méthode `captureEvents()` sur [`window`](/en-US/docs/Web/API/Window), événements du type que vous spécifier (par exemple, `Event.CLICK`) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler` `[`window.releaseEvents()`](/en-US/docs/Web/API/window.releaseEvents) ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements. -<p>Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : <code>window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)</code>.</p> +Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : `window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)`. -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Cela ne fait partie d'aucune spécification.</p> +Cela ne fait partie d'aucune spécification. diff --git a/files/fr/web/api/window/clearimmediate/index.md b/files/fr/web/api/window/clearimmediate/index.md index 886d10eb4f..453c55bedb 100644 --- a/files/fr/web/api/window/clearimmediate/index.md +++ b/files/fr/web/api/window/clearimmediate/index.md @@ -8,58 +8,41 @@ tags: - Window translation_of: Web/API/Window/clearImmediate --- -<p>{{APIRef("HTML DOM")}}{{Non-standard_header}}</p> +{{APIRef("HTML DOM")}}{{Non-standard_header}} -<p>Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.</p> +Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}. -<div class="note"> -<p><strong>Note :</strong> Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) et <a href="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</p> -</div> +> **Note :** Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de [Gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=686201) (Firefox) et [Webkit](http://code.google.com/p/chromium/issues/detail?id=146172) (Google/Apple). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>window</var>.clearImmediate( <var>immediateID</var> ) -</pre> + window.clearImmediate( immediateID ) -<p>où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.</p> +où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">let immediateID = setImmediate(() => { +```js +let immediateID = setImmediate(() => { // Exécute du code } document.getElementById("bouton") - .addEventListener(() => { + .addEventListener(() => { clearImmediate(immediateID); }); -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://w3c.github.io/setImmediate/#si-setImmediate">Efficient Script Yielding La définition de <code>setImmediate</code> dans cette spécification.</a></td> - <td>Editor's Draft</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | ------------------- | +| [Efficient Script Yielding La définition de `setImmediate` dans cette spécification.](https://w3c.github.io/setImmediate/#si-setImmediate) | Editor's Draft | Initial definition. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.clearImmediate")}}</p> +{{Compat("api.Window.clearImmediate")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{DOMxRef("Window.setImmediate()")}}</li> -</ul> +- {{DOMxRef("Window.setImmediate()")}} diff --git a/files/fr/web/api/window/close/index.md b/files/fr/web/api/window/close/index.md index b5ea2c278c..ee82f5b027 100644 --- a/files/fr/web/api/window/close/index.md +++ b/files/fr/web/api/window/close/index.md @@ -5,18 +5,28 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/close --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Ferme la fenêtre référencée.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre>window.close(); -</pre> -<h3 id="Description">Description</h3> -<p>Lorsque cette méthode est appelée, la fenêtre référencée est fermée.</p> -<p>Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode <a href="fr/DOM/window.open">window.open</a>. Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : <code>Scripts may not close windows that were not opened by script.</code></p> -<h4 id="Exemples">Exemples</h4> -<h5 id="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29">Fermeture d'une fenêtre ouverte avec <code>window.open()</code></h5> -<pre class="brush: html"><script type="text/javascript"> +{{ ApiRef() }} + +### Résumé + +Ferme la fenêtre référencée. + +### Syntaxe + + window.close(); + +### Description + +Lorsque cette méthode est appelée, la fenêtre référencée est fermée. + +Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.` + +#### Exemples + +##### Fermeture d'une fenêtre ouverte avec `window.open()` + +```html +<script type="text/javascript"> // Variable globale pour stocker une référence vers la fenêtre ouverte var fenetreOuverte; @@ -28,19 +38,24 @@ function fermerFenetreOuverte() { fenetreOuverte.close(); } -</script> -</pre> -<h5 id="Fermeture_de_la_fen.C3.AAtre_courante">Fermeture de la fenêtre courante</h5> -<pre class="brush: html"><script type="text/javascript"> +</script> +``` + +##### Fermeture de la fenêtre courante + +```html +<script type="text/javascript"> function fermerFenetreCourante() { window.close(); } -</script> -</pre> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>DOM Level 0. <code>window.close()</code> ne fait partie d'aucune spécification ni recommandation technique du W3C.</p> -<h3 id="R.C3.A9f.C3.A9rence_additionnelle">Référence additionnelle</h3> -<ul> - <li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp">window.close() sur MSDN</a></li> -</ul>
\ No newline at end of file +</script> +``` + +### Spécification + +DOM Level 0. `window.close()` ne fait partie d'aucune spécification ni recommandation technique du W3C. + +### Référence additionnelle + +- [window.close() sur MSDN](http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp) diff --git a/files/fr/web/api/window/closed/index.md b/files/fr/web/api/window/closed/index.md index e01f35054b..02f4358698 100644 --- a/files/fr/web/api/window/closed/index.md +++ b/files/fr/web/api/window/closed/index.md @@ -5,51 +5,61 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/closed --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Cette propriété indique si la fenêtre référencée est fermée ou non.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre>isClosed = window.closed; -</pre> -<p>Cette propriété est en lecture seule.</p> -<h3 id="Valeur_renvoy.C3.A9e">Valeur renvoyée</h3> -<dl> - <dt> - <code>isClosed</code></dt> - <dd> - Un booléen. Les valeurs possibles sont :</dd> -</dl> -<ul> - <li><code>false</code> : La fenêtre est ouverte.</li> - <li><code>true</code> : La fenêtre a été fermée.</li> -</ul> -<h3 id="Exemples">Exemples</h3> -<h4 id="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup">Chargement d'une page dans la fenêtre principale depuis un popup</h4> -<p>L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.</p> -<pre>if (!window.opener.closed) { - // La fenêtre principale est encore là, - // on peut donc y charger une autre page - window.opener.location.href = newURL; -} -</pre> -<h4 id="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment">Appel d'une fonction dans un popup ouvert précédemment</h4> -<p>Dans cette exemple, la fonction <code>refreshPopupWindow()</code> appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.</p> -<pre>var popupWindow = null; - -function refreshPopupWindow() { - if (popupWindow && !popupWindow.closed) { - // Le popup a déjà été ouvert et il l'est encore. - // On peut donc appeler sa fonction doRefresh(). - popupWindow.doRefresh(); - } else { - // Il est nécessaire d'ouvrir d'abord le popup. - popupWindow = window.open("popup.html"); - } -} -</pre> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>DOM Level 0. <code>window.closed</code> ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> -<h3 id="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire">Référence supplémentaire</h3> -<ul> - <li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">window.closed sur MSDN</a></li> -</ul>
\ No newline at end of file +{{ ApiRef() }} + +### Résumé + +Cette propriété indique si la fenêtre référencée est fermée ou non. + +### Syntaxe + + isClosed = window.closed; + +Cette propriété est en lecture seule. + +### Valeur renvoyée + +- `isClosed` + - : Un booléen. Les valeurs possibles sont : + +<!----> + +- `false` : La fenêtre est ouverte. +- `true` : La fenêtre a été fermée. + +### Exemples + +#### Chargement d'une page dans la fenêtre principale depuis un popup + +L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte. + + if (!window.opener.closed) { + // La fenêtre principale est encore là, + // on peut donc y charger une autre page + window.opener.location.href = newURL; + } + +#### Appel d'une fonction dans un popup ouvert précédemment + +Dans cette exemple, la fonction `refreshPopupWindow()` appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert. + + var popupWindow = null; + + function refreshPopupWindow() { + if (popupWindow && !popupWindow.closed) { + // Le popup a déjà été ouvert et il l'est encore. + // On peut donc appeler sa fonction doRefresh(). + popupWindow.doRefresh(); + } else { + // Il est nécessaire d'ouvrir d'abord le popup. + popupWindow = window.open("popup.html"); + } + } + +### Spécification + +DOM Level 0. `window.closed` ne fait partie d'aucune spécification ou recommandation technique du W3C. + +### Référence supplémentaire + +- [window.closed sur MSDN](http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp) diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md index bed8eb3463..ba204b503d 100644 --- a/files/fr/web/api/window/confirm/index.md +++ b/files/fr/web/api/window/confirm/index.md @@ -6,42 +6,36 @@ tags: - DOM_0 translation_of: Web/API/Window/confirm --- -<p>{{ApiRef("Window")}}</p> +{{ApiRef("Window")}} -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> +### Résumé -<p>Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.</p> +Affiche un dialogue modal avec un message et deux boutons, OK et Annuler. -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="eval"><em>resultat</em> = window.confirm(<em>message</em>); -</pre> + resultat = window.confirm(message); -<ul> - <li><code>message</code> est la chaîne contenant le texte à afficher dans le dialogue.</li> - <li><code>resultat</code> est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (<code>true</code> signifie OK).</li> -</ul> +- `message` est la chaîne contenant le texte à afficher dans le dialogue. +- `resultat` est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (`true` signifie OK). -<h3 id="Exemple">Exemple</h3> +### Exemple -<pre class="eval">if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) { - window.open("fenetre.html", "Nouvelle fenêtre", ""); -} -</pre> + if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) { + window.open("fenetre.html", "Nouvelle fenêtre", ""); + } -<h3 id="Notes">Notes</h3> +### Notes -<p>Le texte suivant est commun à cet article, <code>DOM:window.prompt</code> et <code>DOM:window.confirm</code> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p> +Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). -<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p> +Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). -<h3 id="Sp.C3.A9cification">Spécification</h3> +### Spécification -<p>{{ DOM0() }}</p> +{{ DOM0() }} -<h3 id="Voir_aussi">Voir aussi</h3> +### Voir aussi -<ul> - <li><a href="/fr/docs/DOM/window.alert">alert</a></li> - <li><a href="/fr/docs/DOM/window.prompt">prompt</a></li> -</ul>
\ No newline at end of file +- [alert](/fr/docs/DOM/window.alert) +- [prompt](/fr/docs/DOM/window.prompt) diff --git a/files/fr/web/api/window/console/index.md b/files/fr/web/api/window/console/index.md index cbb2e643a9..3478ea9292 100644 --- a/files/fr/web/api/window/console/index.md +++ b/files/fr/web/api/window/console/index.md @@ -10,47 +10,36 @@ tags: - lecture seule translation_of: Web/API/Window/console --- -<p>{{ APIRef }}</p> +{{ APIRef }} -<p>La propriété <strong><code>Window.console</code></strong> en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.</p> +La propriété **`Window.console`** en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; -</pre> + var consoleObj = window.console; -<h2 id="Example">Exemples</h2> +## Exemples -<h3 id="Afficher_dans_la_console">Afficher dans la console</h3> +### Afficher dans la console -<p>Le premier exemple affiche du texte dans la console.</p> +Le premier exemple affiche du texte dans la console. -<pre class="brush: js">console.log("An error occurred while loading the content"); -</pre> +```js +console.log("An error occurred while loading the content"); +``` -<p>L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit:</p> +L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit: -<pre class="brush: js">console.dir(someObject);</pre> +```js +console.dir(someObject); +``` -<p>Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit.</p> +Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Console API')}}</td> - <td>{{Spec2('Console API')}}</td> - <td>Définition Initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Status | Commentaire | +| ------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('Console API')}} | {{Spec2('Console API')}} | Définition Initiale. | -<div class="note"> -<p><strong>Note :</strong> Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.</p> -</div> +> **Note :** Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux. diff --git a/files/fr/web/api/window/content/index.md b/files/fr/web/api/window/content/index.md index ef73a10622..d40f4f7090 100644 --- a/files/fr/web/api/window/content/index.md +++ b/files/fr/web/api/window/content/index.md @@ -5,22 +5,31 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/content --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Renvoie un objet <a href="fr/DOM/window">Window</a> pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un <code><browser></code> (ou <code>tabbrowser</code> ou <code><iframe></code>) avec l'attribut <code>type="content-primary"</code> défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, <code>browser.xul</code>. Dans de tels cas, <code>content</code> renvoie une référence à l'objet <code>Window</code> pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour <code><var>browserRef</var>.contentWindow</code>.</p> -<p>Dans du contenu non privilégié (des pages Web), <code>content</code> est normalement équivalent à <a href="fr/DOM/window.top">top</a> (sauf dans le cas d'une page chargée dans un panneau latéral, où <code>content</code> se réfère à l'objet <code>Window</code> de l'onglet sélectionné).</p> -<p>Certains exemples utilisent <code>_content</code> à la place de <code>content</code>. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser <code>content</code> dans du nouveau code.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval">var <var>windowObject</var> = window.content; -</pre> -<h3 id="Exemple">Exemple</h3> -<p>L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement <code><browser type="content-primary"/></code> dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :</p> -<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; -</pre> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>Ne fait partie d'aucune spécification du W3C.</p> -<h3 id="Voir_aussi">Voir aussi</h3> -<ul> - <li><a href="fr/Travailler_avec_des_fen%c3%aatres_dans_le_chrome">Travailler avec des fenêtres dans le chrome</a></li> - <li>Lorsque vous accédez à des documents depuis du code privilégié, faites attention aux <a href="fr/XPCNativeWrapper">XPCNativeWrapper</a>.</li> -</ul>
\ No newline at end of file +{{ ApiRef() }} + +### Résumé + +Renvoie un objet [Window](fr/DOM/window) pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un `<browser>` (ou `tabbrowser` ou `<iframe>`) avec l'attribut `type="content-primary"` défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, `browser.xul`. Dans de tels cas, `content` renvoie une référence à l'objet `Window` pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour `browserRef.contentWindow`. + +Dans du contenu non privilégié (des pages Web), `content` est normalement équivalent à [top](fr/DOM/window.top) (sauf dans le cas d'une page chargée dans un panneau latéral, où `content` se réfère à l'objet `Window` de l'onglet sélectionné). + +Certains exemples utilisent `_content` à la place de `content`. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser `content` dans du nouveau code. + +### Syntaxe + + var windowObject = window.content; + +### Exemple + +L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur : + + content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; + +### Spécification + +Ne fait partie d'aucune spécification du W3C. + +### Voir aussi + +- [Travailler avec des fenêtres dans le chrome](fr/Travailler_avec_des_fen%c3%aatres_dans_le_chrome) +- Lorsque vous accédez à des documents depuis du code privilégié, faites attention aux [XPCNativeWrapper](fr/XPCNativeWrapper). diff --git a/files/fr/web/api/window/controllers/index.md b/files/fr/web/api/window/controllers/index.md index 9f96ce9c98..9c3f8d093e 100644 --- a/files/fr/web/api/window/controllers/index.md +++ b/files/fr/web/api/window/controllers/index.md @@ -12,29 +12,27 @@ tags: - Window translation_of: Web/API/Window/controllers --- -<div>{{APIRef}}{{non-standard_header}}</div> +{{APIRef}}{{non-standard_header}} -<p>Retourne les contrôleurs XUL de la fenêtre chrome.</p> +Retourne les contrôleurs XUL de la fenêtre chrome. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>controleurs</var> = window.controllers -</pre> + controleurs = window.controllers -<ul> - <li><code>controleurs</code> est un objet de type <a href="/en-US/docs/XULControllers"><code>XULControllers</code></a> (<a href="/en-US/docs/XPCOM_Interface_Reference/nsIControllers"><code>nsIControllers</code></a>).</li> -</ul> +- `controleurs` est un objet de type [`XULControllers`](/en-US/docs/XULControllers) ([`nsIControllers`](/en-US/docs/XPCOM_Interface_Reference/nsIControllers)). -<h2 id="Specification">Spécification</h2> +## Spécification -<p>Spécifique à XUL. Ne fait pas partie de la spécification.</p> +Spécifique à XUL. Ne fait pas partie de la spécification. -<p>Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.</p> +Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre. -<p>Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).</p> +Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js). -<p>Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.<br> - Chaque suppression manquante peut provoquer le</p> -<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>: +Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement. +Chaque suppression manquante peut provoquer le -<pre >ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre>
\ No newline at end of file +[bug 415775](https://bugzilla.mozilla.org/show_bug.cgi?id=415775): + + ASSERTION: XPConnect is being called on a scope without a 'Components' property! diff --git a/files/fr/web/api/window/copy_event/index.md b/files/fr/web/api/window/copy_event/index.md index bde3e7a47c..9f999b2e78 100644 --- a/files/fr/web/api/window/copy_event/index.md +++ b/files/fr/web/api/window/copy_event/index.md @@ -12,64 +12,53 @@ tags: - copy translation_of: Web/API/Window/copy_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>copy</code></strong> se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.</p> +L'événement **`copy`** se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("ClipboardEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événement</th> - <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événement</th> + <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> + </tr> + </tbody> </table> -<p>La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy event</a>.</p> +La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le [Element: copy event](/en-US/docs/Web/API/Element/copy_event). -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">window.addEventListener('copy', (event) => { +```js +window.addEventListener('copy', (event) => { console.log('action de copie lancée') -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Clipboard API', '#clipboard-event-copy')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------ | ------------------------------------ | +| {{SpecName('Clipboard API', '#clipboard-event-copy')}} | {{Spec2('Clipboard API')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.copy_event")}}</p> +{{Compat("api.Window.copy_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}</li> - <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/copy_event", "copy")}}</li> - <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/copy_event", "copy")}}</li> -</ul> +- Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}} +- Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/copy_event", "copy")}} +- Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/copy_event", "copy")}} diff --git a/files/fr/web/api/window/customelements/index.md b/files/fr/web/api/window/customelements/index.md index 7d7d57c203..c51cf430bf 100644 --- a/files/fr/web/api/window/customelements/index.md +++ b/files/fr/web/api/window/customelements/index.md @@ -11,58 +11,47 @@ tags: - custom elements translation_of: Web/API/Window/customElements --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété en lecture seule <code>customElements</code> de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations sur des éléments personnalisés enregistrés.</p> +La propriété en lecture seule `customElements` de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations sur des éléments personnalisés enregistrés. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre>let registreElementsPersonnalises = window.customElements;</pre> + let registreElementsPersonnalises = window.customElements; -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.</p> +Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours. -<h2 id="Examples">Exemples</h2> +## Exemples -<p>L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :</p> +L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple : -<pre>let registreElementsPersonnalises = window.customElements; -registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);</pre> + let registreElementsPersonnalises = window.customElements; + registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise); -<p>Cependant, il est généralement raccourci en quelque chose comme :</p> +Cependant, il est généralement raccourci en quelque chose comme : -<pre>customElements.define('details-element', - class extends HTMLElement { - constructor() { - super(); - const modele = document - .getElementById('modele-details-element') - .content; - const racineOmbre = this.attachShadow({mode: 'open'}) - .appendChild(template.cloneNode(true)); - } -});</pre> + customElements.define('details-element', + class extends HTMLElement { + constructor() { + super(); + const modele = document + .getElementById('modele-details-element') + .content; + const racineOmbre = this.attachShadow({mode: 'open'}) + .appendChild(template.cloneNode(true)); + } + }); -<p>Voir notre repo <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> pour davantage d'exemples d'utilisation.</p> +Voir notre repo [web-components-examples](https://github.com/mdn/web-components-examples/) pour davantage d'exemples d'utilisation. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.customElements")}}</p> +{{Compat("api.Window.customElements")}} diff --git a/files/fr/web/api/window/cut_event/index.md b/files/fr/web/api/window/cut_event/index.md index ad3a5de15d..0b32599b91 100644 --- a/files/fr/web/api/window/cut_event/index.md +++ b/files/fr/web/api/window/cut_event/index.md @@ -11,64 +11,53 @@ tags: - Window translation_of: Web/API/Window/cut_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>cut</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.</p> +L'événement **`cut`** est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("ClipboardEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> + </tr> + </tbody> </table> -<p>La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement <a href="/en-US/docs/Web/API/Element/cut_event">Element: cut event</a>.</p> +La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement [Element: cut event](/en-US/docs/Web/API/Element/cut_event). -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">window.addEventListener('cut', (event) => { +```js +window.addEventListener('cut', (event) => { console.log('cut action initiated') -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Clipboard API', '#clipboard-event-cut')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------ | ------------------------------------ | +| {{SpecName('Clipboard API', '#clipboard-event-cut')}} | {{Spec2('Clipboard API')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.cut_event")}}</p> +{{Compat("api.Window.cut_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Événements liés: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}}</li> - <li>Cet événement sur {{domxref("Element")}} targets: {{domxref("Element/cut_event", "cut")}}</li> - <li>Cet événement sur {{domxref("Document")}} targets: {{domxref("Document/cut_event", "cut")}}</li> -</ul> +- Événements liés: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}} +- Cet événement sur {{domxref("Element")}} targets: {{domxref("Element/cut_event", "cut")}} +- Cet événement sur {{domxref("Document")}} targets: {{domxref("Document/cut_event", "cut")}} diff --git a/files/fr/web/api/window/defaultstatus/index.md b/files/fr/web/api/window/defaultstatus/index.md index 125688eca6..47aea49ff5 100644 --- a/files/fr/web/api/window/defaultstatus/index.md +++ b/files/fr/web/api/window/defaultstatus/index.md @@ -14,37 +14,33 @@ tags: - Window translation_of: Web/API/Window/defaultStatus --- -<p>{{ obsolete_header(23) }}</p> +{{ obsolete_header(23) }} -<p>{{ APIRef() }}</p> +{{ APIRef() }} -<p>Obtient / définit le texte de la barre d'état pour la fenêtre donnée.</p> +Obtient / définit le texte de la barre d'état pour la fenêtre donnée. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>var sMsg</em> = window.defaultStatus; -window.defaultStatus = <em>sMsg;</em> -</pre> + var sMsg = window.defaultStatus; + window.defaultStatus = sMsg; -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<ul> - <li><code>sMsg</code> est une chaîne contenant le texte à afficher par défaut dans la barre d'état.</li> -</ul> +- `sMsg` est une chaîne contenant le texte à afficher par défaut dans la barre d'état. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="notranslate"><html> - <body onload="window.defaultStatus='salut!';"/> - <button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');">confirmer</button> - </body> -</html> -</pre> + <html> + <body onload="window.defaultStatus='salut!';"/> + <button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');">confirmer</button> + </body> + </html> -<h2 id="Notes">Notes</h2> +## Notes -<p>Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.</p> +Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}. -<h2 id="Specification">Spécification</h2> +## Spécification -<p>HTML5</p> +HTML5 diff --git a/files/fr/web/api/window/devicemotion_event/index.md b/files/fr/web/api/window/devicemotion_event/index.md index aa77418513..ed3fc041cb 100644 --- a/files/fr/web/api/window/devicemotion_event/index.md +++ b/files/fr/web/api/window/devicemotion_event/index.md @@ -4,82 +4,40 @@ slug: Web/API/Window/devicemotion_event translation_of: Web/API/Window/devicemotion_event original_slug: FUEL/Window/devicemotion_event --- -<p>L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">DeviceMotionEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> Lecture seule </td> - <td><a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> Lecture seule </td> - <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> Lecture seule </td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not</td> - </tr> - <tr> - <td><code>cancelable</code> Lecture seule </td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not?</td> - </tr> - <tr> - <td><code>acceleration</code> Lecture seule </td> - <td><a href="/fr/docs/Web/API/DeviceAcceleration"><code>DeviceAcceleration</code></a></td> - <td>The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.</td> - </tr> - <tr> - <td><code>accelerationIncludingGravity </code>Lecture seule </td> - <td><a href="/fr/docs/Web/API/DeviceAcceleration"><code>DeviceAcceleration</code></a></td> - <td>The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.</td> - </tr> - <tr> - <td><code>interval</code> Lecture seule </td> - <td>double</td> - <td>The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.</td> - </tr> - <tr> - <td><code>rotationRate</code> Lecture seule </td> - <td><a href="/fr/docs/Web/API/DeviceRotationRate"><code>DeviceRotationRate</code></a></td> - <td>The rates of rotation of the device about all three axes.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: js">function handleMotionEvent(event) { +L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible. + +## Informations générales + +- Spécification + - : [DeviceOrientation Event](http://www.w3.org/TR/orientation-event/#devicemotion) +- Interface + - : DeviceMotionEvent +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : DefaultView (`window`) +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| -------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` Lecture seule | [`EventTarget`](/fr/docs/Web/API/EventTarget) | The event target (the topmost target in the DOM tree). | +| `type` Lecture seule | [`DOMString`](/fr/docs/Web/API/DOMString) | The type of event. | +| `bubbles` Lecture seule | [`Boolean`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean) | Whether the event normally bubbles or not | +| `cancelable` Lecture seule | [`Boolean`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean) | Whether the event is cancellable or not? | +| `acceleration` Lecture seule | [`DeviceAcceleration`](/fr/docs/Web/API/DeviceAcceleration) | The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data. | +| `accelerationIncludingGravity `Lecture seule | [`DeviceAcceleration`](/fr/docs/Web/API/DeviceAcceleration) | The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data. | +| `interval` Lecture seule | double | The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time. | +| `rotationRate` Lecture seule | [`DeviceRotationRate`](/fr/docs/Web/API/DeviceRotationRate) | The rates of rotation of the device about all three axes. | + +## Exemple + +```js +function handleMotionEvent(event) { var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; @@ -89,10 +47,8 @@ original_slug: FUEL/Window/devicemotion_event } window.addEventListener("devicemotion", handleMotionEvent, true); -</pre> +``` -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li><a href="/fr/docs/Mozilla_event_reference/deviceorientation"><code>deviceorientation</code></a></li> -</ul> +- [`deviceorientation`](/fr/docs/Mozilla_event_reference/deviceorientation) diff --git a/files/fr/web/api/window/deviceorientation_event/index.md b/files/fr/web/api/window/deviceorientation_event/index.md index 3978ebe617..1b60a23482 100644 --- a/files/fr/web/api/window/deviceorientation_event/index.md +++ b/files/fr/web/api/window/deviceorientation_event/index.md @@ -9,9 +9,9 @@ tags: translation_of: Web/API/Window/deviceorientation_event original_slug: FUEL/Window/deviceorientation --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <code>deviceorientation</code> est déclenché lorsque des données sont disponibles, à partir d'un capteur d'orientation, sur l'orientation actuelle de l'appareil par rapport au cadre de coordonnées de la Terre. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir <a href="/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Données d'orientation et de mouvement expliquées</a> pour plus de détails.</p> +L'événement `deviceorientation` est déclenché lorsque des données sont disponibles, à partir d'un capteur d'orientation, sur l'orientation actuelle de l'appareil par rapport au cadre de coordonnées de la Terre. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir [Données d'orientation et de mouvement expliquées](/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained) pour plus de détails. <table class="properties"> <tbody> @@ -25,18 +25,27 @@ original_slug: FUEL/Window/deviceorientation </tr> <tr> <th scope="row">Interface</th> - <td><a href="/fr/docs/Web/API/DeviceOrientationEvent"><code>DeviceOrientationEvent</code></a></td> + <td> + <a href="/fr/docs/Web/API/DeviceOrientationEvent" + ><code>DeviceOrientationEvent</code></a + > + </td> </tr> <tr> <th scope="row">Propriété du gestionnaire d'événements</th> - <td><a href="/fr/docs/Web/API/Window/ondeviceorientation"><code>window.ondeviceorientation</code></a></td> + <td> + <a href="/fr/docs/Web/API/Window/ondeviceorientation" + ><code>window.ondeviceorientation</code></a + > + </td> </tr> </tbody> </table> -<h2 id="example">Exemple</h2> +## Exemple -<pre class="brush: js">if (window.DeviceOrientationEvent) { +```js +if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", function(event) { // alpha : rotation autour de l'axe z var rotateDegrees = event.alpha; @@ -51,34 +60,22 @@ original_slug: FUEL/Window/deviceorientation var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) { // faire quelque chose d'étonnant -};</pre> +}; +``` -<h2 id="specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Device Orientation", "#deviceorientation", "l'événement DeviceOrientation")}}</td> - <td>{{Spec2("Device Orientation")}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | +| {{SpecName("Device Orientation", "#deviceorientation", "l'événement DeviceOrientation")}} | {{Spec2("Device Orientation")}} | -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.deviceorientation_event")}}</p> +{{Compat("api.Window.deviceorientation_event")}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'événement <a href="/fr/docs/Web/API/Window/devicemotion_event"><code>devicemotion</code></a></li> - <li><a href="/fr/docs/Web/API/Detecting_device_orientation">Détection de l'orientation des appareils.</a></li> - <li><a href="/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Explication des données d'orientation et de mouvement</a></li> - <li>Simulation d'événements d'orientation sur les navigateurs de bureau avec <a href="https://louisremi.github.com/orientation-devtool/">orientation-devtool</a>.</li> -</ul> +- L'événement [`devicemotion`](/fr/docs/Web/API/Window/devicemotion_event) +- [Détection de l'orientation des appareils.](/fr/docs/Web/API/Detecting_device_orientation) +- [Explication des données d'orientation et de mouvement](/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained) +- Simulation d'événements d'orientation sur les navigateurs de bureau avec [orientation-devtool](https://louisremi.github.com/orientation-devtool/). diff --git a/files/fr/web/api/window/devicepixelratio/index.md b/files/fr/web/api/window/devicepixelratio/index.md index f7a9d3a7bf..fdc4cc14b6 100644 --- a/files/fr/web/api/window/devicepixelratio/index.md +++ b/files/fr/web/api/window/devicepixelratio/index.md @@ -3,43 +3,27 @@ title: Window.devicePixelRatio slug: Web/API/Window/devicePixelRatio translation_of: Web/API/Window/devicePixelRatio --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>La propriété en lecture seule <code>Window.devicePixelRatio</code> retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips").</p> +La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips"). -<p>Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).</p> +Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em><var>valeur</var></em> = window.devicePixelRatio; -</pre> + valeur = window.devicePixelRatio; -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}} | {{Spec2("CSSOM View")}} | Définition initiale | -<h2 id="Browser_compatibility" >Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.devicePixelRatio")}}</p> +{{Compat("api.Window.devicePixelRatio")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li> - <li>PPK a effectué des <a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">recherches sur devicePixelRatio</a></li> -</ul> +- [CSS `resolution` media query](/en-US/docs/Web/CSS/@media/resolution) +- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) diff --git a/files/fr/web/api/window/dialogarguments/index.md b/files/fr/web/api/window/dialogarguments/index.md index 1bd4d4ece5..42e1d49519 100644 --- a/files/fr/web/api/window/dialogarguments/index.md +++ b/files/fr/web/api/window/dialogarguments/index.md @@ -13,14 +13,14 @@ tags: - Window translation_of: Web/API/Window/dialogArguments --- -<p>{{ deprecated_header() }}{{APIRef}}</p> +{{ deprecated_header() }}{{APIRef}} -<p>La propriété <code>dialogArguments</code> renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method. Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.</p> +La propriété `dialogArguments` renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method. Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>valeur</var> = window.dialogArguments;</pre> + valeur = window.dialogArguments; -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.dialogArguments")}}</p> +{{Compat("api.Window.dialogArguments")}} diff --git a/files/fr/web/api/window/directories/index.md b/files/fr/web/api/window/directories/index.md index b0255c82be..da1f64f3e1 100644 --- a/files/fr/web/api/window/directories/index.md +++ b/files/fr/web/api/window/directories/index.md @@ -14,30 +14,32 @@ tags: - Window translation_of: Web/API/Window/directories --- -<p>{{ obsolete_header("2.0") }}</p> +{{ obsolete_header("2.0") }} -<p>{{ APIRef() }}</p> +{{ APIRef() }} -<p>Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.</p> +Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}. -<h3 id="Syntax">Syntaxe</h3> +### Syntaxe -<pre class="brush: js">var <var>dirBar</var> = window.directories; -</pre> +```js +var dirBar = window.directories; +``` -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<p><var>dirBar</var> est un objet du type <code>BarProp</code>.</p> +_dirBar_ est un objet du type `BarProp`. -<h3 id="Example">Exemple</h3> +### Exemple -<pre class="brush: html"><script> +```html +<script> function dirs() { alert(window.directories); } -</script> -</pre> +</script> +``` -<h3 id="Specification">Spécification</h3> +### Spécification -<p>Ne fait pas partie des spécifications.</p> +Ne fait pas partie des spécifications. diff --git a/files/fr/web/api/window/document/index.md b/files/fr/web/api/window/document/index.md index 70769ed0b9..c5635556ba 100644 --- a/files/fr/web/api/window/document/index.md +++ b/files/fr/web/api/window/document/index.md @@ -9,37 +9,23 @@ tags: - Window translation_of: Web/API/Window/document --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><strong><code>window.document</code></strong> renvoie une référence au <a href="/en-US/docs/Web/API/document">document</a> contenu dans la fenêtre.</p> +**`window.document`** renvoie une référence au [document](/en-US/docs/Web/API/document) contenu dans la fenêtre. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">console.log(window.document.title); -</pre> +```js +console.log(window.document.title); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécifications</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécifications | Statut | Commentaires | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.document")}}</p> +{{Compat("api.Window.document")}} diff --git a/files/fr/web/api/window/domcontentloaded_event/index.md b/files/fr/web/api/window/domcontentloaded_event/index.md index a2e989049d..0a6a6b4917 100644 --- a/files/fr/web/api/window/domcontentloaded_event/index.md +++ b/files/fr/web/api/window/domcontentloaded_event/index.md @@ -4,78 +4,64 @@ slug: Web/API/Window/DOMContentLoaded_event translation_of: Web/API/Window/DOMContentLoaded_event original_slug: Web/Events/DOMContentLoaded --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L’évènement <strong><code>DOMContentLoaded</code></strong> est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.</p> +L’évènement **`DOMContentLoaded`** est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bouillonne</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui (bien que spécifié comme évènement simple non annulable)</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestion de l’évènement</th> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bouillonne</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui (bien que spécifié comme évènement simple non annulable)</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestion de l’évènement</th> + <td>Aucune</td> + </tr> + </tbody> </table> -<p>La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface <code>Window</code> pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}.</p> +La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface `Window` pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}. -<p>L’évènement <a href="/fr/docs/Web/Events/load"><code>load</code></a>, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser <a href="/fr/docs/Web/Events/load"> <code>load</code> </a>là où <code>DOMContentLoaded</code> serait beaucoup plus approprié.</p> +L’évènement [`load`](/fr/docs/Web/Events/load), très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser [`load` ](/fr/docs/Web/Events/load)là où `DOMContentLoaded` serait beaucoup plus approprié. -<div class="note"> -<p><strong>Note :</strong> Le JavaScript synchrone interromp l’analyse du DOM.</p> -</div> +> **Note :** Le JavaScript synchrone interromp l’analyse du DOM. -<div class="note"> -<p><strong>Note :</strong> Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.</p> -</div> +> **Note :** Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt. -<h2 id="Accélérer">Accélérer</h2> +## Accélérer -<p>Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">rendre votre JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimiser le chargement des feuilles de style</a>. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.</p> +Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_basique">Utilisation basique</h3> +### Utilisation basique -<pre class="brush: js">window.addEventListener("DOMContentLoaded", (event) => { +```js +window.addEventListener("DOMContentLoaded", (event) => { console.log("DOM entièrement chargé et analysé"); }); -</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> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +``` + +## Spécifications + +| Spécification | Statut | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p> +{{Compat("api.Window.DOMContentLoaded_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}}</li> - <li>Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}</li> -</ul> +- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}} +- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}} diff --git a/files/fr/web/api/window/dump/index.md b/files/fr/web/api/window/dump/index.md index 8a44c0818d..6eb59b8b00 100644 --- a/files/fr/web/api/window/dump/index.md +++ b/files/fr/web/api/window/dump/index.md @@ -7,19 +7,28 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/dump --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Affiche des messages dans la console (native).</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval">dump(<em>message</em>); -</pre> -<ul> - <li><code>message</code> est le message texte à afficher.</li> -</ul> -<h3 id="Notes">Notes</h3> -<p><code>dump</code> est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser <a href="/fr/Components.utils.reportError">Components.utils.reportError</a> et <a href="/fr/nsIConsoleService">nsIConsoleService</a> pour afficher des messages dans la <a href="/fr/Console_JavaScript">console JavaScript</a>.</p> -<p>Dans <a href="/fr/Gecko">Gecko</a>, <code>dump</code> est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que <code>dump</code> écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence <code>browser.dom.window.dump.enabled</code> à <code>true</code>. Vous pouvez définir cette préférence dans <a href="http://kb.mozillazine.org/About:config">about:config</a> ou dans un <a href="http://kb.mozillazine.org/User.js_file">fichier user.js</a>.</p> -<p>Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre <code>-console</code> à la ligne de commande.</p> -<p><code>dump</code> est également disponible au composants XPCOM implémentés en JavaScript, même si <a href="/fr/DOM/window">window</a> n'est pas l'objet global dans ce contexte.</p> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }}</p>
\ No newline at end of file +{{ ApiRef() }} + +### Résumé + +Affiche des messages dans la console (native). + +### Syntaxe + + dump(message); + +- `message` est le message texte à afficher. + +### Notes + +`dump` est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser [Components.utils.reportError](/fr/Components.utils.reportError) et [nsIConsoleService](/fr/nsIConsoleService) pour afficher des messages dans la [console JavaScript](/fr/Console_JavaScript). + +Dans [Gecko](/fr/Gecko), `dump` est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que `dump` écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence `browser.dom.window.dump.enabled` à `true`. Vous pouvez définir cette préférence dans [about:config](http://kb.mozillazine.org/About:config) ou dans un [fichier user.js](http://kb.mozillazine.org/User.js_file). + +Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre `-console` à la ligne de commande. + +`dump` est également disponible au composants XPCOM implémentés en JavaScript, même si [window](/fr/DOM/window) n'est pas l'objet global dans ce contexte. + +### Spécification + +{{ DOM0() }} diff --git a/files/fr/web/api/window/event/index.md b/files/fr/web/api/window/event/index.md index 9876f88745..ff87d30b37 100644 --- a/files/fr/web/api/window/event/index.md +++ b/files/fr/web/api/window/event/index.md @@ -11,39 +11,24 @@ tags: - Window translation_of: Web/API/Window/event --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours <code>undefined</code>.</p> +L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours `undefined`. -<p>Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code.</p> +Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code. -<div class="note"> -<p><strong>Note:</strong> Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles <code>l'événement</code> renvoyé n'est pas la valeur attendue. De plus, <code>Window.event</code> n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}.</p> -</div> +> **Note :** Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles `l'événement` renvoyé n'est pas la valeur attendue. De plus, `Window.event` n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', "#dom-window-event", "Window.event")}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', "#dom-window-event", "Window.event")}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.event")}}</p> +{{Compat("api.Window.event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("Event.srcElement")}}</li> -</ul> +- {{domxref("Event.srcElement")}} diff --git a/files/fr/web/api/window/find/index.md b/files/fr/web/api/window/find/index.md index b9743102e6..3c0ea82ff3 100644 --- a/files/fr/web/api/window/find/index.md +++ b/files/fr/web/api/window/find/index.md @@ -13,66 +13,65 @@ tags: - find translation_of: Web/API/Window/find --- -<div>{{ApiRef}}{{Non-standard_Header}}</div> +{{ApiRef}}{{Non-standard_Header}} -<div class="blockIndicator note"> -<p><strong>Note:</strong> La prise en charge de <code>Window.find()</code> pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}.</p> -</div> +> **Note :** La prise en charge de `Window.find()` pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}. -<p>La méthode <code><strong>Window.find()</strong></code> trouve une chaîne dans une fenêtre.</p> +La méthode **`Window.find()`** trouve une chaîne dans une fenêtre. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>, - <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>);</pre> + window.find(aString, aCaseSensitive, aBackwards, aWrapAround, + aWholeWord, aSearchInFrames, aShowDialog); -<dl> - <dt><code>aString</code></dt> - <dd>La chaîne de caractère à rechercher.</dd> - <dt><code>aCaseSensitive</code></dt> - <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche sensible à la casse.</dd> - <dt><code>aBackwards</code></dt> - <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche vers l'arrière.</dd> - <dt><code>aWrapAround</code></dt> - <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche enveloppante.</dd> - <dt><code>aWholeWord</code> {{Unimplemented_Inline}}</dt> - <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}.</dd> - <dt><code>aSearchInFrames</code></dt> - <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche dans les cadres.</dd> -</dl> +- `aString` + - : La chaîne de caractère à rechercher. +- `aCaseSensitive` + - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche sensible à la casse. +- `aBackwards` + - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche vers l'arrière. +- `aWrapAround` + - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche enveloppante. +- `aWholeWord` {{Unimplemented_Inline}} + - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}. +- `aSearchInFrames` + - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche dans les cadres. -<h3 id="Retourne">Retourne</h3> +### Retourne -<p><code>true</code> si la chaîne est trouvé; autrement, <code>false</code>.</p> +`true` si la chaîne est trouvé; autrement, `false`. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">findString = function findText(text) { +```js +findString = function findText(text) { alert("String \x22" + text + "\x22 found? " + window.find(text)); -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p>Apples, Bananas, and Oranges.</p> -<button type="button" onClick='findString("Apples")'>Search for Apples</button> -<button type="button" onClick='findString("Banana")'>Search for Banana</button> -<button type="button" onClick='findString("Orange")'>Search for Orange</button> -</pre> +```html +<p>Apples, Bananas, and Oranges.</p> +<button type="button" onClick='findString("Apples")'>Search for Apples</button> +<button type="button" onClick='findString("Banana")'>Search for Banana</button> +<button type="button" onClick='findString("Orange")'>Search for Orange</button> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Example")}}</p> +{{EmbedLiveSample("Example")}} -<h2 id="Notes">Notes</h2> +## Notes -<p>Dans certains navigateurs, <code>Window.find()</code> sélectionne (met en évidence) le contenu trouvé sur le site.</p> +Dans certains navigateurs, `Window.find()` sélectionne (met en évidence) le contenu trouvé sur le site. -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Cela ne fait partie d'aucune spécification.</p> +Cela ne fait partie d'aucune spécification. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari.</p> +Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari. diff --git a/files/fr/web/api/window/focus/index.md b/files/fr/web/api/window/focus/index.md index 02c25eb163..708c13bd59 100644 --- a/files/fr/web/api/window/focus/index.md +++ b/files/fr/web/api/window/focus/index.md @@ -3,35 +3,22 @@ title: Window.focus() slug: Web/API/Window/focus translation_of: Web/API/Window/focus --- -<p>{{APIRef}}</p> +{{APIRef}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode.</p> +Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">window.focus() -</pre> + window.focus() -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="eval">if (clicked) { window.focus(); } -</pre> + if (clicked) { window.focus(); } -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table>
\ No newline at end of file +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} | | diff --git a/files/fr/web/api/window/frameelement/index.md b/files/fr/web/api/window/frameelement/index.md index 4a36ff3fd6..393e2459ed 100644 --- a/files/fr/web/api/window/frameelement/index.md +++ b/files/fr/web/api/window/frameelement/index.md @@ -9,58 +9,41 @@ tags: - Window translation_of: Web/API/Window/frameElement --- -<div>{{ApiRef}}</div> +{{ApiRef}} -<p>La propriété <code><strong>Window.frameElement</strong></code> renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.</p> +La propriété **`Window.frameElement`** renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée. -<div class="note"> -<p><strong>Note:</strong> Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.</p> -</div> +> **Note :** Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">const <em>frameEl</em> = window.frameElement -</pre> + const frameEl = window.frameElement -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place.</p> +L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">const frameEl = window.frameElement; +```js +const frameEl = window.frameElement; // Si nous sommes incorporés, modifiez l'URL de l'élément contenant en 'http://mozilla.org/' if (frameEl) { frameEl.src = 'http://mozilla.org/'; } -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}</td> - <td>{{ Spec2('WebRTC 1.0') }}</td> - <td>Spécification initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------- | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}} | {{ Spec2('WebRTC 1.0') }} | Spécification initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.frameElement")}}</p> +{{Compat("api.Window.frameElement")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("window.frames")}} renvoie un objet de type tableau, listant les sous-cadres directs de la fenêtre courante.</li> - <li>{{domxref("window.parent")}} renvoie la fenêtre parente, qui est la fenêtre contenant le <code>frameElement</code> de la fenêtre enfant.</li> -</ul> +- {{domxref("window.frames")}} renvoie un objet de type tableau, listant les sous-cadres directs de la fenêtre courante. +- {{domxref("window.parent")}} renvoie la fenêtre parente, qui est la fenêtre contenant le `frameElement` de la fenêtre enfant. diff --git a/files/fr/web/api/window/frames/index.md b/files/fr/web/api/window/frames/index.md index 9a1c20a92f..d9e60bcb8c 100644 --- a/files/fr/web/api/window/frames/index.md +++ b/files/fr/web/api/window/frames/index.md @@ -13,31 +13,29 @@ tags: - Reference translation_of: Web/API/Window/frames --- -<p>{{ApiRef("Window")}}</p> +{{ApiRef("Window")}} -<p>Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.</p> +Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>frameList</em> = window.frames; -</pre> + frameList = window.frames; -<ul> - <li><code>frameList</code> est une liste d'objets frame, semblable à un tableau grâce à la propriété <code>length</code> . Ses éléments sont accessibles en utilisant la notation <code>{{ mediawiki.external('i') }}</code>.</li> - <li><code>frameList === window</code> est évalué à <code>true</code>.</li> - <li>Chaque élément de <code>window.frames</code> est un pseudo tableau représentant l'objet <a href="/en/DOM/window">window</a> correspondant au contenu de la <a href="/en/HTML/Element/frame"><frame></a> ou <a href="/en/HTML/Element/iframe"><iframe></a> , et non au DOM element (i)frame (ex., <code>window.frames[ 0 ]</code> équivaut à <code>document.getElementsByTagName( "iframe" )[ 0 ].contentWindow</code>).</li> - <li>pour plus de détails sur la valeur retournée, se référer au <a href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1">fil de discussion sur mozilla.dev.platform</a>.</li> -</ul> +- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation `{{ mediawiki.external('i') }}`. +- `frameList === window` est évalué à `true`. +- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`). +- pour plus de détails sur la valeur retournée, se référer au [fil de discussion sur mozilla.dev.platform](http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1). -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">var frames = window.frames; // ou // var frames = window.parent.frames; -for (var i = 0; i < frames.length; i++) { +```js +var frames = window.frames; // ou // var frames = window.parent.frames; +for (var i = 0; i < frames.length; i++) { // faire quelque chose avec chaque subframe en tant que frames[i] frames[i].document.body.style.background = "red"; } -</pre> +``` -<h2 id="Specification">Spécifications</h2> +## Spécifications -<p>{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}</p>
\ No newline at end of file +{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}} diff --git a/files/fr/web/api/window/fullscreen/index.md b/files/fr/web/api/window/fullscreen/index.md index dbd330f4f5..e46e50b9ec 100644 --- a/files/fr/web/api/window/fullscreen/index.md +++ b/files/fr/web/api/window/fullscreen/index.md @@ -7,26 +7,34 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/fullScreen --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval">var <var>isInFullScreen</var> = <var>windowRef</var>.fullScreen; -</pre> -<p>Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.</p> -<h3 id="Valeur_de_retour">Valeur de retour</h3> -<dl> - <dt> - <code>isInFullScreen</code></dt> - <dd> - Une valeur booléenne. Signification des valeurs :</dd> -</dl> -<ul> - <li><code>true</code> : La fenêtre est en mode plein écran.</li> - <li><code>false</code> : La fenêtre n'est pas en mode plein écran.</li> -</ul> -<h3 id="Exemples">Exemples</h3> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }}</p> -<h3 id="Notes">Notes</h3> -<p>Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours <code>false</code>, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).</p>
\ No newline at end of file +{{ ApiRef() }} + +### Résumé + +Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas. + +### Syntaxe + + var isInFullScreen = windowRef.fullScreen; + +Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner. + +### Valeur de retour + +- `isInFullScreen` + - : Une valeur booléenne. Signification des valeurs : + +<!----> + +- `true` : La fenêtre est en mode plein écran. +- `false` : La fenêtre n'est pas en mode plein écran. + +### Exemples + +### Spécification + +{{ DOM0() }} + +### Notes + +Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours `false`, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}). diff --git a/files/fr/web/api/window/gamepadconnected_event/index.md b/files/fr/web/api/window/gamepadconnected_event/index.md index 4452ac1892..f4eaef2e5b 100644 --- a/files/fr/web/api/window/gamepadconnected_event/index.md +++ b/files/fr/web/api/window/gamepadconnected_event/index.md @@ -3,84 +3,51 @@ title: gamepadconnected slug: Web/API/Window/gamepadconnected_event translation_of: Web/API/Window/gamepadconnected_event --- -<p>L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois.<br> - </p> +L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois. -<h2 id="Informations_générales">Informations générales</h2> -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> -<h2 id="Propriétés">Propriétés</h2> +## Informations générales -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>gamepad</code> {{readonlyInline}}</td> - <td>{{domxref("Gamepad")}}</td> - <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td> - </tr> - </tbody> -</table> +- Spécification + - : [Gamepad](http://www.w3.org/TR/gamepad/#the-gamepadconnected-event) +- Interface + - : Event +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : DefaultView (`<window>`) +- Action par défaut + - : Aucune -<h2 id="Exemple">Exemple</h2> +## Propriétés -<pre class="brush:js;">// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `gamepad` {{readonlyInline}} | {{domxref("Gamepad")}} | The single gamepad attribute provides access to the associated gamepad data for this event. | + +## Exemple + +```js +// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant window.addEventListener("gamepadconnected", function( event ) { // Toutes la valeurs d'axes et les buttons sont accessibles à travers: event.gamepad; }); -</pre> +``` -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li><a href="/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li> -</ul> +- [gamepaddisconnected](/en-US/docs/Web/Reference/Events/gamepaddisconnected) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li> -</ul> +- [Utilisation de l'API Gamepad](/fr/docs/API/Gamepad/Using_Gamepad_API) diff --git a/files/fr/web/api/window/gamepaddisconnected_event/index.md b/files/fr/web/api/window/gamepaddisconnected_event/index.md index e4c36c1ece..08c091cfe9 100644 --- a/files/fr/web/api/window/gamepaddisconnected_event/index.md +++ b/files/fr/web/api/window/gamepaddisconnected_event/index.md @@ -3,72 +3,37 @@ title: gamepaddisconnected slug: Web/API/Window/gamepaddisconnected_event translation_of: Web/API/Window/gamepaddisconnected_event --- -<p>L'événement <code>gamepaddisconnected</code> est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.</p> +L'événement `gamepaddisconnected` est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée. -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> +- Spécification + - : [Gamepad](http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event) +- Interface + - : {{domxref("Event")}} +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : DefaultView (`<window>`) +- Action par défaut + - : Aucune -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>gamepad</code> {{readonlyInline}}</td> - <td>{{domxref("Gamepad")}}</td> - <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td> - </tr> - </tbody> -</table> +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `gamepad` {{readonlyInline}} | {{domxref("Gamepad")}} | The single gamepad attribute provides access to the associated gamepad data for this event. | -<h2 id="Evénements_liés">Evénements liés</h2> +## Evénements liés -<ul> - <li><a href="/fr/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li> -</ul> +- [gamepadconnected](/fr/docs/Web/Reference/Events/gamepadconnected) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li> -</ul> +- [Utilisation de l'API Gamepad](/fr/docs/API/Gamepad/Using_Gamepad_API) diff --git a/files/fr/web/api/window/getcomputedstyle/index.md b/files/fr/web/api/window/getcomputedstyle/index.md index 2c4294f100..c5f3694105 100644 --- a/files/fr/web/api/window/getcomputedstyle/index.md +++ b/files/fr/web/api/window/getcomputedstyle/index.md @@ -3,61 +3,60 @@ title: window.getComputedStyle slug: Web/API/Window/getComputedStyle translation_of: Web/API/Window/getComputedStyle --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p><code>La méthode window.getComputedStyle() </code>donne la <a href="/en/CSS/used_value">valeur calculée finale</a> de toutes les propriétés CSS sur un élément.</p> +`La méthode window.getComputedStyle() `donne la [valeur calculée finale](/en/CSS/used_value) de toutes les propriétés CSS sur un élément. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);</pre> + var style = window.getComputedStyle(element[, pseudoElt]); -<dl> - <dt>element</dt> - <dd>L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.</dd> - <dt>pseudoElt {{ optional_inline() }}</dt> - <dd>Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être <code>null</code> (ou non spécifiée) pour les éléments communs.</dd> -</dl> +- element + - : L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée. +- pseudoElt {{ optional_inline() }} + - : Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être `null` (ou non spécifiée) pour les éléments communs. -<div class="note"> - <p><strong>Note :</strong> Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre <code>pseudoElt</code> était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.</p> -</div> +> **Note :** Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre `pseudoElt` était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs. -<p>La valeur de retour <code>style</code> est un objet <a href="/en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p> +La valeur de retour `style` est un objet [`CSSStyleDeclaration`](/en/DOM/CSSStyleDeclaration). -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var elem1 = document.getElementById("elemId"); +```js +var elem1 = document.getElementById("elemId"); var style = window.getComputedStyle(elem1, null); // Ce qui équivaut à : // var style = document.defaultView.getComputedStyle(elem1, null); -</pre> +``` -<pre class="brush: html"><style> +```html +<style> #elem-container{ position: absolute; left: 100px; top: 200px; height: 100px; } -</style> +</style> -<div id="elem-container">dummy</div> -<div id="output"></div> +<div id="elem-container">dummy</div> +<div id="output"></div> -<script> +<script> function getTheStyle(){ var elem = document.getElementById("elem-container"); var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height"); document.getElementById("output").innerHTML = theCSSprop; } getTheStyle(); -</script> -</pre> +</script> +``` -<pre class="brush: js">function dumpComputedStyles(elem,prop) { +```js +function dumpComputedStyles(elem,prop) { var cs = window.getComputedStyle(elem,null); if (prop) { @@ -65,52 +64,34 @@ var style = window.getComputedStyle(elem1, null); return; } var len = cs.length; - for (var i=0;i<len;i++) { + for (var i=0;i<len;i++) { var style = cs[i]; console.log(style+" : "+cs.getPropertyValue(style)); } -}</pre> - -<h2 id="Description">Description</h2> - -<p>L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode <code>getComputedStyle</code> est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément <code><style></code> ou une feuille de style externe. L'objet <code>elt.style</code> doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.</p> - -<p>Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: <code>url("http://foo.com/bar.jpg")</code>.</p> - -<h2 id="Specification">Spécification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td> - <td>{{Spec2("CSSOM")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", - "getComputedStyle()")}}</td> - <td>{{Spec2("DOM2 Style")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.getComputedStyle")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("window.getDefaultComputedStyle")}}</li> - <li>{{cssxref("resolved_value", "Valeur résolue")}}</li> -</ul> +} +``` + +## Description + +L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode `getComputedStyle` est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément `<style>` ou une feuille de style externe. L'objet `elt.style` doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné. + +Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: `url("http://foo.com/bar.jpg")`. + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}} | {{Spec2("CSSOM")}} | | +| {{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", + "getComputedStyle()")}} | {{Spec2("DOM2 Style")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Window.getComputedStyle")}} + +## Voir aussi + +- {{domxref("window.getDefaultComputedStyle")}} +- {{cssxref("resolved_value", "Valeur résolue")}} diff --git a/files/fr/web/api/window/getdefaultcomputedstyle/index.md b/files/fr/web/api/window/getdefaultcomputedstyle/index.md index 7c2363a4e4..f7769ecc86 100644 --- a/files/fr/web/api/window/getdefaultcomputedstyle/index.md +++ b/files/fr/web/api/window/getdefaultcomputedstyle/index.md @@ -8,80 +8,81 @@ tags: - Reference translation_of: Web/API/window/getDefaultComputedStyle --- -<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div> +{{APIRef("CSSOM")}}{{Non-standard_header}} -<p><code>getDefaultComputedStyle()</code> fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte.</p> +`getDefaultComputedStyle()` fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>miseEnForme</em> = window.getDefaultComputedStyle(<em>element</em>[, <em>pseudoElt</em>]); -</pre> + var miseEnForme = window.getDefaultComputedStyle(element[, pseudoElt]); -<dl> - <dt>element</dt> - <dd>L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée.</dd> - <dt>pseudoElt {{optional_inline}}</dt> - <dd>Une chaîne indiquant le pseudo-élément à rechercher. Doit être <code>null</code> (ou non indiqué) pour les éléments ordinaires.</dd> -</dl> +- element + - : L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée. +- pseudoElt {{optional_inline}} + - : Une chaîne indiquant le pseudo-élément à rechercher. Doit être `null` (ou non indiqué) pour les éléments ordinaires. -<p>Le <code>style</code> retourné est un objet <a href="/fr-FR/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p> +Le `style` retourné est un objet [`CSSStyleDeclaration`](/fr-FR/docs/Web/API/CSSStyleDeclaration). -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">var elem1 = document.getElementById("IdElem"); +```js +var elem1 = document.getElementById("IdElem"); var miseEnForme = window.getDefaultComputedStyle(elem1); -</pre> +``` -<pre class="brush: html"><style> +```html +<style> #conteneur-elem { position: absolute; left: 100px; top: 200px; height: 100px; } -</style> +</style> -<div id="conteneur-elem">factice</div> -<div id="sortie"></div> +<div id="conteneur-elem">factice</div> +<div id="sortie"></div> -<script> +<script> var elem = document.getElementById("conteneur-elem"); var laPropCSS = window.getDefaultComputedStyle(elem).position; document.getElementById("sortie").innerHTML = laPropCSS; // affichera "static" -</script> </pre> +</script> +``` -<h2 id="Description">Description</h2> +## Description -<p>L'objet retourné est du même type que l'objet retourné par <code>getComputedStyle</code>, mais il ne prend en compte que les règles user-agent et user.</p> +L'objet retourné est du même type que l'objet retourné par `getComputedStyle`, mais il ne prend en compte que les règles user-agent et user. -<h2 id="Utilisation_avec_des_pseudo-éléments">Utilisation avec des pseudo-éléments</h2> +## Utilisation avec des pseudo-éléments -<p><code>getDefaultComputedStyle</code> peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before).</p> +`getDefaultComputedStyle` peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before). -<pre class="brush: html"><style> +```html +<style> h3:after { content: ' déchire !'; } -</style> +</style> -<h3>contenu généré</h3> +<h3>contenu généré</h3> -<script> +<script> var h3 = document.querySelector('h3'), resultat = getDefaultComputedStyle(h3, ':after').content; console.log('le contenu généré est : ', resultat); // retourne 'none' -</script> -</pre> +</script> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur <code>:visited</code>. Voir <a href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> et <a href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/</a> pour le détail des exemples de la manière dont cela est implémenté.</p> +La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur `:visited`. Voir <http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/> et [http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/](http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/) pour le détail des exemples de la manière dont cela est implémenté. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<p>Proposé au groupe de travail CSS.</p> +Proposé au groupe de travail CSS. -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.getDefaultComputedStyle")}}</p> +{{Compat("api.Window.getDefaultComputedStyle")}} diff --git a/files/fr/web/api/window/getselection/index.md b/files/fr/web/api/window/getselection/index.md index 579af3f9a0..6b2f7b3796 100644 --- a/files/fr/web/api/window/getselection/index.md +++ b/files/fr/web/api/window/getselection/index.md @@ -3,45 +3,39 @@ title: window.getSelection slug: Web/API/Window/getSelection translation_of: Web/API/Window/getSelection --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p>Renvoie un objet selection représentant le ou les objets sélectionnés.</p> +Renvoie un objet selection représentant le ou les objets sélectionnés. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="eval"><em>selection</em> = window.getSelection() -</pre> + selection = window.getSelection() -<h2 id="Param.C3.A8tres">Paramètres</h2> +## Paramètres -<ul> - <li><code>selection</code> est un objet de type {{DOMxRef("Selection")}}.</li> -</ul> +- `selection` est un objet de type {{DOMxRef("Selection")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="eval">function foo() { - var selObj = window.getSelection(); - alert(selObj); - var selRange = selObj.getRangeAt(0); - // travailler avec la sélection -} -</pre> + function foo() { + var selObj = window.getSelection(); + alert(selObj); + var selRange = selObj.getRangeAt(0); + // travailler avec la sélection + } -<h2 id="Notes">Notes</h2> +## Notes -<p>En <a href="fr/JavaScript">JavaScript</a>, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode <code><a href="fr/DOM/Selection/toString">toString</a></code> de l'objet Selection qui est passée. Dans l'exemple ci-dessus, <code>selObj</code> est automatiquement « convertie » lorsqu'elle est passée à <a href="fr/DOM/window.alert">window.alert</a>. Cependant, pour utiliser une propriété ou méthode JavaScript de <a href="fr/JS/String">String</a> comme <code><a href="fr/JS/String.prototype.length">length</a></code> ou <code><a href="fr/JS/String.prototype.substr">substr</a></code>, il est nécessaire d'appeler manuellement la méthode <code>toString</code>. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</p> +En [JavaScript](fr/JavaScript), lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian -<h2 id="Sp.C3.A9cification">Spécification</h2> +## Spécification -<p>DOM Level 0. Ne fait partie d'aucune spécification.</p> +DOM Level 0. Ne fait partie d'aucune spécification. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="../Selection_API">Selection API</a></li> - <li><a href="../Selection"><code>Selection</code></a></li> - <li><a href="../Range"><code>Range</code></a></li> - <li><a href="../Document/getSelection"><code>Document.getSelection()</code></a></li> - <li><a href="../HTMLInputElement/setSelectionRange"><code>HTMLInputElement.setSelectionRange()</code></a></li> -</ul> +- [Selection API](../Selection_API) +- [`Selection`](../Selection) +- [`Range`](../Range) +- [`Document.getSelection()`](../Document/getSelection) +- [`HTMLInputElement.setSelectionRange()`](../HTMLInputElement/setSelectionRange) diff --git a/files/fr/web/api/window/hashchange_event/index.md b/files/fr/web/api/window/hashchange_event/index.md index 59f62fcdd1..56fcf7bcb1 100644 --- a/files/fr/web/api/window/hashchange_event/index.md +++ b/files/fr/web/api/window/hashchange_event/index.md @@ -6,80 +6,48 @@ tags: - Web translation_of: Web/API/Window/hashchange_event --- -<p>L'événement <code>hashchange</code> est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même).</p> +L'événement `hashchange` est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même). <table class="properties"> - <tbody> - <tr> - <td>Bulles</td> - <td>Oui</td> - </tr> - <tr> - <td>Annulable</td> - <td>Non</td> - </tr> - <tr> - <td>Objets cibles</td> - <td>{{domxref("Window")}}</td> - </tr> - <tr> - <td>Interface</td> - <td>{{domxref("HashChangeEvent")}}</td> - </tr> - <tr> - <td>Action par défaut</td> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <td>Bulles</td> + <td>Oui</td> + </tr> + <tr> + <td>Annulable</td> + <td>Non</td> + </tr> + <tr> + <td>Objets cibles</td> + <td>{{domxref("Window")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("HashChangeEvent")}}</td> + </tr> + <tr> + <td>Action par défaut</td> + <td>Aucune</td> + </tr> + </tbody> </table> -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The browsing context (<code>window</code>).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Type de l'évènement</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>oldURL</code> {{readonlyInline}}</td> - <td>{{jsxref("String")}}</td> - <td>The previous URL from which the window was navigated.</td> - </tr> - <tr> - <td>newURL {{readonlyInline}}</td> - <td>{{jsxref("String")}}</td> - <td></td> - </tr> - </tbody> -</table> +## Propriétés + +| Propriété | Type | Description | +| ------------------------------------- | ------------------------------------ | ----------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The browsing context (`window`). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | Type de l'évènement | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `oldURL` {{readonlyInline}} | {{jsxref("String")}} | The previous URL from which the window was navigated. | +| newURL {{readonlyInline}} | {{jsxref("String")}} | | -<p>Il existe plusieurs scripts de secours listés sur <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">cette page</a>. Fondamentalement, ces scripts vérifient le <code>location.hash</code> à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété <code>window.onhashchange</code>:</p> +Il existe plusieurs scripts de secours listés sur [cette page](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Fondamentalement, ces scripts vérifient le `location.hash` à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété `window.onhashchange`: -<pre class="brush:js;">;(function(window) { +```js +;(function(window) { // Sortir si le navigateur implémente cet événement if ("onhashchange" in window) { return; } @@ -94,7 +62,7 @@ translation_of: Web/API/Window/hashchange_event newHash = location.hash; // Si le hash a été changé et qu'un gestionnaire a été lié... - if (newHash != oldHash && typeof window.onhashchange === "function") { + if (newHash != oldHash && typeof window.onhashchange === "function") { // exécute le gestionnaire window.onhashchange({ type: "hashchange", @@ -108,32 +76,19 @@ translation_of: Web/API/Window/hashchange_event }, 100); })(window); -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +``` + +## Spécifications + +| Spécification | Status | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}} | {{Spec2('HTML WHATWG')}} | Définition initiale | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.hashchange_event")}}</p> +{{Compat("api.Window.hashchange_event")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/Mozilla_event_reference/popstate"><code>popstate</code></a></li> - <li><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">WindowEventHandlers.onhashchange</a></li> -</ul> +- [`popstate`](/en-US/docs/Mozilla_event_reference/popstate) +- [WindowEventHandlers.onhashchange](/en-US/docs/Web/API/WindowEventHandlers/onhashchange) diff --git a/files/fr/web/api/window/history/index.md b/files/fr/web/api/window/history/index.md index 80fc573e76..d89aba868c 100644 --- a/files/fr/web/api/window/history/index.md +++ b/files/fr/web/api/window/history/index.md @@ -3,51 +3,35 @@ title: Window.history slug: Web/API/Window/history translation_of: Web/API/Window/history --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété en lecture seule <strong><code>Window.history</code></strong> renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).</p> +La propriété en lecture seule **`Window.history`** renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée). -<p>L'objet <code>History</code> obtenu a les méthodes suivantes : voir <a href="/en/DOM/Manipulating_the_browser_history">la manipulation de l'historique du navigateur</a> pour avoir plus de détails ainsi que des exemples.<br> - En particulier, cet article explique les caractéristiques des méthodes <code>pushState()</code> et <code>replaceState()</code>qu'il est utile de connaître avant de les utiliser.</p> +L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples. +En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">history.back(); // similaire au bouton de retour +```js +history.back(); // similaire au bouton de retour history.go(-1); // similaire à history.back(); -</pre> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet <code>History</code>, situé dans le menu déroulant près des boutons précédent et suivant.</p> +Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant. -<p>Pour des raisons de sécurité, l'objet <code>History</code> n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.</p> +Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer. -<p>Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode <a href="/en/DOM/window.location#replace">location.replace()</a>, permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.</p> +Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Specification | Status | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.Window.history")}}</p> +{{Compat("api.Window.history")}} diff --git a/files/fr/web/api/window/home/index.md b/files/fr/web/api/window/home/index.md index 856f95067c..6a101e557c 100644 --- a/files/fr/web/api/window/home/index.md +++ b/files/fr/web/api/window/home/index.md @@ -11,26 +11,26 @@ tags: - Window translation_of: Web/API/Window/home --- -<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div> +{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }} -<p>La méthode <code><strong>Window.home()</strong></code> renvoie la fenêtre à la page d'accueil.</p> +La méthode **`Window.home()`** renvoie la fenêtre à la page d'accueil. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>window</em>.home(); -</pre> + window.home(); -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">function goHome() { +```js +function goHome() { window.home(); } -</pre> +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p> +DOM Niveau 0. Ne fait pas partie de la spécification. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.home")}}</p> +{{Compat("api.Window.home")}} diff --git a/files/fr/web/api/window/index.md b/files/fr/web/api/window/index.md index d5c5e70052..0ef4ef3e54 100644 --- a/files/fr/web/api/window/index.md +++ b/files/fr/web/api/window/index.md @@ -10,559 +10,543 @@ tags: - Window translation_of: Web/API/Window --- -<p>{{APIRef}}</p> - -<p>L'objet <code>window</code> représente une fenêtre contenant un document DOM ; la propriété <code>document</code> pointe vers le <a href="/fr-FR/docs/DOM/document">document DOM</a> chargé dans cette fenêtre. Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.</p> - -<p>Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM <code>window</code>. L'objet <code>window</code> implémente l'interface <code>Window</code>, qui à son tour hérite de l'interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la <a href="/fr-FR/docs/JavaScript/Reference">Référence JavaScript</a> et la <a href="/fr-FR/docs/Web/API/Document_Object_Model">Référence DOM</a>.</p> - -<p>Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet <code>window</code> (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet <code>window</code> séparé — consultez <a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code#Fen.C3.AAtres_de_contenu">Travailler avec des fenêtres dans du code chrome</a> pour plus d'informations). C'est-à-dire que l'objet <code>window</code> n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet <code>window</code> appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Propriétés">Propriétés</h2> - -<p><em>Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}.</em></p> - -<p>Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous.</p> - -<dl> - <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> - <dd>Cette propriété indique si la fenêtre en cours est fermée ou non.</dd> - <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur.</dd> - <dt>{{domxref("Window.content")}} et <code>Window._content</code> {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> - <dd>Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web.</dd> - <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.</dd> - <dt>{{domxref("Window.customElements")}}{{ReadOnlyInline}}</dt> - <dd>renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.</dd> - <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> - <dd>Retourne l'objet crypto du navigateur.</dd> - <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> - <dd>Récupère / définit le texte de la barre d'état pour la fenêtre donnée.</dd> - <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours.</dd> - <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt> - <dd>Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}.</dd> - <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> - <dd>Synonyme de {{domxref("window.personalbar")}}</dd> - <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie une référence au document que la fenêtre contient.</dd> - <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd> - <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd> - <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd> - <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd> - <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés.</dd> - <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> - <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle.</dd> - <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> - <dd>Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée.</dd> - <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> - <dd>Renvoie un tableau des sous-cadres dans la fenêtre en cours.</dd> - <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>Cette propriété indique si la fenêtre est affichée en plein écran ou non.</dd> - <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> - <dd>Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place.<br> - Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages.</dd> - <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> - <dd>Retourne une référence à l'objet d'historique.</dd> - <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> - <dd>Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale.</dd> - <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> - <dd>Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale.</dd> - <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> - <dd>Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés.</dd> - <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> - <dd>Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}.</dd> - <dt>{{domxref("Window.location")}}</dt> - <dd>Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre.</dd> - <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre.</dd> - <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.</dd> - <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre.</dd> - <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Renvoie l'objet <a href="/fr-FR/docs/The_message_manager">gestionnaire de messages</a> pour cette fenêtre.</dd> - <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> - <dd>Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé.</dd> - <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd> - <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd> - <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage.</dd> - <dt>{{domxref("Window.name")}}</dt> - <dd>Récupère / définit le nom de la fenêtre.</dd> - <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> - <dd>Renvoie une référence à l'objet navigateur.</dd> - <dt>{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. </dd> - <dt>{{domxref("Window.opener")}}</dt> - <dd>Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours.</dd> - <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> - <dd>Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique.</dd> - <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> - <dd>Récupère la hauteur de l'extérieur de la fenêtre du navigateur.</dd> - <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> - <dd>Récupère la largeur de l'extérieur de la fenêtre du navigateur.</dd> - <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> - <dd>Un alias pour {{domxref("window.scrollX")}}.</dd> - <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> - <dd>Un alias pour {{domxref("window.scrollY")}}</dd> - <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> - <dd>Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées..</dd> - <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> - <dd>Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours.</dd> - <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> - <dd>Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi <a href="/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Utilisation de Chronométrage de Navigation</a> pour plus d'informations et d'exemples.</dd> - <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> - <dd>Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre.</dd> - <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> - <dd>Fournissait précédemment un accès pour installer et supprimer des modules PKCS11.</dd> - <dt>{{domxref("Window.returnValue")}}</dt> - <dd>La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale.</dd> - <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> - <dd>Renvoie une référence à l'objet écran associé à la fenêtre.</dd> - <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> - <dd>Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran.</dd> - <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> - <dd>Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran.</dd> - <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> - <dd>Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre.</dd> - <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue.</dd> - <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue).</dd> - <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> - <dd>Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement.</dd> - <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> - <dd>Renvoie le nombre de pixels dont le document a déjà été décalé verticalement.</dd> - <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie une référence d'objet à l'objet fenêtre lui-même.</dd> - <dt>{{domxref("Window.sessionStorage")}}</dt> - <dd>Renvoie un objet de stockage pour stocker des données dans une session de page unique.</dd> - <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Renvoie une référence à l'objet fenêtre de la barre latérale.</dd> - <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'<a href="/fr-FR/docs/Web/API/Web_Speech_API">API Web Speech</a>.</dd> - <dt>{{domxref("Window.status")}}</dt> - <dd>Récupère/définit le texte dans la barre d'état en bas du navigateur.</dd> - <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> - <dd>Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre.</dd> - <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> - <dd>Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre.</dd> - <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> - <dd>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule.</dd> - <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> - <dd>Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée.</dd> - <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie une référence à la fenêtre en cours.</dd> - <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> - <dd>Renvoie une référence à l'objet <code>window</code> dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails.</dd> -</dl> - -<h3 id="Propriétés_implémentées_depuis_ailleurs">Propriétés implémentées depuis ailleurs</h3> - -<dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> - <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> - <dd>Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> - <dd>Renvoie un booléen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou non (<code>false</code>).</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> - <dd>Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)</dd> -</dl> - -<h2 id="M.C3.A9thodes">Méthodes</h2> - -<p><em>Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("Window.alert()")}}</dt> - <dd>Affiche une boîte de message d'alerte.</dd> - <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Recule d'une page dans l'historique de la fenêtre.</dd> - <dt>{{domxref("Window.blur()")}}</dt> - <dd>Déplace la focalisation hors de la fenêtre.</dd> - <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> - <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.</dd> - <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.</dd> - <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.</dd> - <dt>{{domxref("Window.clearImmediate()")}}</dt> - <dd>Annule l'exécution répétée définie en utilisant <code>setImmediate</code>.</dd> - <dt>{{domxref("Window.close()")}}</dt> - <dd>Ferme la fenêtre en cours.</dd> - <dt>{{domxref("Window.confirm()")}}</dt> - <dd>Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.</dd> - <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.dispatchEvent()")}}</dt> - <dd>Utilisé pour déclencher un évènement.</dd> - <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> - <dd>Écrit un message à la console.</dd> - <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.find()")}}</dt> - <dd>Recherche la chaîne de caractères donnée dans une fenêtre.</dd> - <dt>{{domxref("Window.focus()")}}</dt> - <dd>Donne la focalisation à la fenêtre en cours.</dd> - <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Avance la fenêtre d'un document dans l'historique.</dd> - <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Fait flasher l'icône de l'application.</dd> - <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.getComputedStyle()")}}</dt> - <dd>Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.</dd> - <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> - <dd>Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.</dd> - <dt>{{domxref("Window.getSelection()")}}</dt> - <dd>Renvoie l'objet de sélection représentant les éléments sélectionnés.</dd> - <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Renvoie le navigateur à la page d'accueil.</dd> - <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.</dd> - <dt>{{domxref("Window.maximize()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> - <dd>Minimize la fenêtre.</dd> - <dt>{{domxref("Window.moveBy()")}}</dt> - <dd>Déplace la fenêtre en cours de la quantité indiquée.</dd> - <dt>{{domxref("Window.moveTo()")}}</dt> - <dd>Déplace la fenêtre vers les coordonnées spécifiées.</dd> - <dt>{{domxref("Window.open()")}}</dt> - <dd>Ouvre une nouvelle fenêtre.</dd> - <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Ouvre une nouvelle fenêtre de dialogue.</dd> - <dt>{{domxref("Window.postMessage()")}}</dt> - <dd>Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.</dd> - <dt>{{domxref("Window.prompt()")}}</dt> - <dd>Ouvre la boîte de dialogue d'impression du document en cours.</dd> - <dt>{{domxref("Window.prompt()")}}</dt> - <dd>Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.</dd> - <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>Annule la capture des évènements d'un certain type par la fenêtre.</dd> - <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.</dd> - <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Active la planification de tâches pendant les périodes d'inactivité du navigateur.</dd> - <dt>{{domxref("Window.resizeBy()")}}</dt> - <dd>Redimensionne la fenêtre en cours d'une certaine quantité.</dd> - <dt>{{domxref("Window.resizeTo()")}}</dt> - <dd>Redimensionne dynamiquement la fenêtre.</dd> - <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.scroll()")}}</dt> - <dd>Fait défiler la fenêtre à un endroit particulier dans le document.</dd> - <dt>{{domxref("Window.scrollBy()")}}</dt> - <dd>Fait défiler le document dans la fenêtre de la quantité indiquée.</dd> - <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> - <dd>Fait défiler le document du nombre de lignes indiqué.</dd> - <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> - <dd>Fait défiler le document en cours du nombre de pages indiqué.</dd> - <dt>{{domxref("Window.scrollTo()")}}</dt> - <dd>Fait défiler à un jeu de coordonnées particulier dans le document.</dd> - <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> - <dd>Change le curseur pour la fenêtre en cours.</dd> - <dt>{{domxref("Window.setImmediate()")}}</dt> - <dd>Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes</dd> - <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> - <dd>Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.</dd> - <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> - <dd>Dimensionne la fenêtre en fonction de son contenu.</dd> - <dt>{{domxref("Window.stop()")}}</dt> - <dd>Cette méthode arrête le chargement de la fenêtre.</dd> - <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> - <dd>Met à jour l'état des commandes de la fenêtre chrome en cours (IU).</dd> -</dl> - -<h3 id="Méthodes_implémentées_depuis_ailleurs">Méthodes implémentées depuis ailleurs</h3> - -<dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> - <dd>Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> - <dd>Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> - <dd>Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> - <dd>Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> - <dd>Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> - <dd>Démarre le processus de récupération d'une ressource à partir du réseau.</dd> - <dt>{{domxref("EventTarget.removeEventListener")}}</dt> - <dd>Supprime un gestionnaire d'événement de la fenêtre.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> - <dd>Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> - <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd> -</dl> - -<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3> - -<dl> - <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> - <dd>Affiche un dialogue modal. <strong>Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55</strong>.</dd> -</dl> - -<h2 id=".C3.89v.C3.A8nements">Gestionnaires d'évènements</h2> - -<p>Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.</p> - -<p><em>Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}.</em></p> - -<div class="note"> -<p><strong>Note :</strong> à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe <code>if ("onabort" in window)</code> pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails.</p> -</div> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> - <dt> </dt> - <dd>Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours.</dd> -</dl> - -<dl> - <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> - <dd>Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> - <dd>Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}.</dd> - <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> - <dd>Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> - <dd>Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> - <dd>Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> - <dd>Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> - <dd>Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché.</dd> -</dl> - -<dl> - <dt>{domxref("GlobalEventHandlers.ondblclick")}}</dt> - <dd>Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris.</dd> - <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> - <dd>Appelé après la fermeture de la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> - <dd>Appelé lorsque le bouton DROIT de la souris est enfoncé.</dd> -</dl> - -<dl> - <dt>{{domxref("Window.ondevicelight")}}</dt> - <dd>Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante.</dd> - <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles).</dd> - <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Appelé lorsque l'orientation est modifiée (pour les appareils mobiles).</dd> - <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> - <dd>Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil.</dd> - <dt>{{domxref("Window.ondeviceproximity")}}</dt> - <dd>Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> - <dd>Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> - <dd>Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change.</dd> - <dt>{{domxref("Window.onappinstalled")}}</dt> - <dd>Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}.</dd> - <dt>{{domxref("Window.ongamepadconnected")}}</dt> - <dd>Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche).</dd> - <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> - <dd>Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche).</dd> - <dt>{{domxref("Window.oninput")}}</dt> - <dd>Appelée lorsque la valeur d'un élément <input> change.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> - <dd>Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> - <dd>Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> - <dd>Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> - <dd>Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre.</dd> - <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> - <dd>Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> - <dd>Appelé quand un bouton QUELCONQUE de la souris est pressé.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> - <dd>Appelé en continu quand la souris est déplacée dans la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> - <dd>Appelé lorsque le pointeur quitte la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> - <dd>Appelé lorsque le pointeur entre dans la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> - <dd>Appelé quand un bouton QUELCONQUE de la souris est relâché.</dd> -</dl> - -<dl> - <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}.</dd> - <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> - <dd>Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}.</dd> - <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> - <dd>Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}.</dd> - <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> - <dd>Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}.</dd> - <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> - <dd>Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}.</dd> - <dt>{{domxref("Window.onpaint")}}</dt> - <dd>Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Appelé quand le bouton arrière est pressé.</dd> - <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> - <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés.</dd> - <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> - <dd>Appelé lorsqu'un formulaire est réinitialisé</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> - <dd>Appelé en continu lorsque vous redimensionnez la fenêtre.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> - <dd>Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> - <dd>Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque.</dd> - <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> - <dd>Appelé après le texte dans un champ de saisie est sélectionné.</dd> -</dl> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché.</dd> - <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> - <dd>Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}.</dd> - <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> - <dd>Appelé lorsqu'un formulaire est soumis.</dd> -</dl> - -<dl> - <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> - <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés.</dd> - <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> - <dd>Appelé lorsque l'utilisateur quitte la page.</dd> -</dl> - -<dl> - <dt>{{domxref("Window.onuserproximity")}}</dt> - <dd>Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur.</dd> - <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> - <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche).</dd> - <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> - <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche).</dd> - <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> - <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi.</dd> - <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> - <dd>Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité.</dd> - <dt>{{domxref("Window.onvrdisplayblur")}}</dt> - <dd>Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience.</dd> - <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> - <dd>Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche).</dd> - <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> - <dd>Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche).</dd> -</dl> - -<h2 id="Constructeurs">Constructeurs</h2> - -<p>Voir aussi les <a href="/fr-FR/docs/DOM/DOM_Reference">Interfaces DOM</a>.</p> - -<dl> - <dt>{{domxref("DOMParser")}}</dt> - <dd><code>DOMParser</code> peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un <a href="/fr-FR/docs/DOM/document">Document</a> DOM. <code>DOMParser</code> est spécifié dans <a href="https://w3c.github.io/DOM-Parsing/">DOM Parsing et Serialization</a>.</dd> - <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Image")}}</dt> - <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> - <dt>{{domxref("Option")}}</dt> - <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> - <dt>{{domxref("Window.QueryInterface")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XMLSerializer")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Worker")}}</dt> - <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> - <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> -</dl> - -<h2 id="Interfaces">Interfaces</h2> - -<p>Voir <a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code">Travailler avec des fenêtres dans le code chrome</a></li> -</ul> +{{APIRef}} + +L'objet `window` représente une fenêtre contenant un document DOM ; la propriété `document` pointe vers le [document DOM](/fr-FR/docs/DOM/document) chargé dans cette fenêtre. Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}. + +Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM `window`. L'objet `window` implémente l'interface `Window`, qui à son tour hérite de l'interface [`AbstractView`](http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView). Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la [Référence JavaScript](/fr-FR/docs/JavaScript/Reference) et la [Référence DOM](/fr-FR/docs/Web/API/Document_Object_Model). + +Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet `window` (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet `window` séparé — consultez [Travailler avec des fenêtres dans du code chrome](/fr/docs/Mozilla/Working_with_windows_in_chrome_code#Fen.C3.AAtres_de_contenu) pour plus d'informations). C'est-à-dire que l'objet `window` n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet `window` appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place. + +{{InheritanceDiagram}} + +## Propriétés + +_Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}._ + +Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous. + +- {{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}} + - : Cette propriété indique si la fenêtre en cours est fermée ou non. +- {{domxref("Window.console")}} {{ReadOnlyInline}} + - : Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur. +- {{domxref("Window.content")}} et `Window._content` {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}} + - : Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web. +- {{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}} + - : Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours. +- {{domxref("Window.customElements")}}{{ReadOnlyInline}} + - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés. +- {{domxref("Window.crypto")}} {{readOnlyInline}} + - : Retourne l'objet crypto du navigateur. +- {{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}} + - : Récupère / définit le texte de la barre d'état pour la fenêtre donnée. +- {{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}} + - : Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours. +- {{domxref("Window.dialogArguments")}} {{ReadOnlyInline}} + - : Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}. +- {{domxref("Window.directories")}} {{obsolete_inline}} + - : Synonyme de {{domxref("window.personalbar")}} +- {{domxref("Window.document")}} {{ReadOnlyInline}} + - : Renvoie une référence au document que la fenêtre contient. +- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées. +- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées. +- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés. +- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}} + - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle. +- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle. +- {{domxref("Window.frameElement")}} {{readOnlyInline}} + - : Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée. +- {{domxref("Window.frames")}} {{readOnlyInline}} + - : Renvoie un tableau des sous-cadres dans la fenêtre en cours. +- {{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}} + - : Cette propriété indique si la fenêtre est affichée en plein écran ou non. +- {{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}} + - : Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place. + Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages. +- {{domxref("Window.history")}} {{ReadOnlyInline}} + - : Retourne une référence à l'objet d'historique. +- {{domxref("Window.innerHeight")}} {{readOnlyInline}} + - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale. +- {{domxref("Window.innerWidth")}} {{readOnlyInline}} + - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale. +- {{domxref("Window.isSecureContext")}} {{readOnlyInline}} + - : Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés. +- {{domxref("Window.length")}} {{readOnlyInline}} + - : Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}. +- {{domxref("Window.location")}} + - : Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre. +- {{domxref("Window.locationbar")}} {{ReadOnlyInline}} + - : Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre. +- {{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}} + - : Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées. +- {{domxref("Window.menubar")}} {{ReadOnlyInline}} + - : Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre. +- {{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}} + - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre. +- {{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}} + - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé. +- {{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} + - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. +- {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} + - : Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. +- {{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} + - : Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage. +- {{domxref("Window.name")}} + - : Récupère / définit le nom de la fenêtre. +- {{domxref("Window.navigator")}} {{readOnlyInline}} + - : Renvoie une référence à l'objet navigateur. +- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. +- {{domxref("Window.opener")}} + - : Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours. +- {{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}} + - : Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique. +- {{domxref("Window.outerHeight")}} {{readOnlyInline}} + - : Récupère la hauteur de l'extérieur de la fenêtre du navigateur. +- {{domxref("Window.outerWidth")}} {{readOnlyInline}} + - : Récupère la largeur de l'extérieur de la fenêtre du navigateur. +- {{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}} + - : Un alias pour {{domxref("window.scrollX")}}. +- {{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}} + - : Un alias pour {{domxref("window.scrollY")}} +- {{domxref("Window.sessionStorage")}} {{readOnlyInline}} + - : Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.. +- {{domxref("Window.parent")}} {{readOnlyInline}} + - : Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours. +- {{domxref("Window.performance")}} {{readOnlyInline}} + - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples. +- {{domxref("Window.personalbar")}} {{readOnlyInline}} + - : Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre. +- {{domxref("Window.pkcs11")}} {{obsolete_inline(29)}} + - : Fournissait précédemment un accès pour installer et supprimer des modules PKCS11. +- {{domxref("Window.returnValue")}} + - : La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale. +- {{domxref("Window.screen")}} {{readOnlyInline}} + - : Renvoie une référence à l'objet écran associé à la fenêtre. +- {{domxref("Window.screenX")}} {{readOnlyInline}} + - : Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran. +- {{domxref("Window.screenY")}} {{readOnlyInline}} + - : Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran. +- {{domxref("Window.scrollbars")}} {{readOnlyInline}} + - : Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre. +- {{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}} + - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue. +- {{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}} + - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue). +- {{domxref("Window.scrollX")}} {{readOnlyInline}} + - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement. +- {{domxref("Window.scrollY")}} {{readOnlyInline}} + - : Renvoie le nombre de pixels dont le document a déjà été décalé verticalement. +- {{domxref("Window.self")}} {{ReadOnlyInline}} + - : Renvoie une référence d'objet à l'objet fenêtre lui-même. +- {{domxref("Window.sessionStorage")}} + - : Renvoie un objet de stockage pour stocker des données dans une session de page unique. +- {{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}} + - : Renvoie une référence à l'objet fenêtre de la barre latérale. +- {{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}} + - : Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'[API Web Speech](/fr-FR/docs/Web/API/Web_Speech_API). +- {{domxref("Window.status")}} + - : Récupère/définit le texte dans la barre d'état en bas du navigateur. +- {{domxref("Window.statusbar")}} {{readOnlyInline}} + - : Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre. +- {{domxref("Window.toolbar")}} {{readOnlyInline}} + - : Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre. +- {{domxref("Window.top")}} {{readOnlyInline}} + - : Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule. +- {{domxref("Window.visualViewport")}} {{readOnlyInline}} + - : Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée. +- {{domxref("Window.window")}} {{ReadOnlyInline}} + - : Renvoie une référence à la fenêtre en cours. +- `window[0]`,` window[1]`, etc. + - : Renvoie une référence à l'objet `window` dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails. + +### Propriétés implémentées depuis ailleurs + +- {{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}} + - : Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes. +- {{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}} + - : Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}. +- {{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}} + - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`). +- {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}} + - : Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.) + +## Méthodes + +_Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}._ + +- {{domxref("Window.alert()")}} + - : Affiche une boîte de message d'alerte. +- {{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}} + - : Recule d'une page dans l'historique de la fenêtre. +- {{domxref("Window.blur()")}} + - : Déplace la focalisation hors de la fenêtre. +- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}} + - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}. +- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}} + - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}. +- {{domxref("Window.captureEvents()")}} {{Deprecated_inline}} + - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié. +- {{domxref("Window.clearImmediate()")}} + - : Annule l'exécution répétée définie en utilisant `setImmediate`. +- {{domxref("Window.close()")}} + - : Ferme la fenêtre en cours. +- {{domxref("Window.confirm()")}} + - : Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre. +- {{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.dispatchEvent()")}} + - : Utilisé pour déclencher un évènement. +- {{domxref("Window.dump()")}} {{Non-standard_inline}} + - : Écrit un message à la console. +- {{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.find()")}} + - : Recherche la chaîne de caractères donnée dans une fenêtre. +- {{domxref("Window.focus()")}} + - : Donne la focalisation à la fenêtre en cours. +- {{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}} + - : Avance la fenêtre d'un document dans l'historique. +- {{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}} + - : Fait flasher l'icône de l'application. +- {{domxref("Window.getAttentionWithCycleCount()")}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.getComputedStyle()")}} + - : Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément. +- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}} + - : Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur. +- {{domxref("Window.getSelection()")}} + - : Renvoie l'objet de sélection représentant les éléments sélectionnés. +- {{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}} + - : Renvoie le navigateur à la page d'accueil. +- {{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}} + - : Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée. +- {{domxref("Window.maximize()")}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.minimize()")}} (top-level XUL windows only) + - : Minimize la fenêtre. +- {{domxref("Window.moveBy()")}} + - : Déplace la fenêtre en cours de la quantité indiquée. +- {{domxref("Window.moveTo()")}} + - : Déplace la fenêtre vers les coordonnées spécifiées. +- {{domxref("Window.open()")}} + - : Ouvre une nouvelle fenêtre. +- {{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}} + - : Ouvre une nouvelle fenêtre de dialogue. +- {{domxref("Window.postMessage()")}} + - : Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première. +- {{domxref("Window.prompt()")}} + - : Ouvre la boîte de dialogue d'impression du document en cours. +- {{domxref("Window.prompt()")}} + - : Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite. +- {{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}} + - : Annule la capture des évènements d'un certain type par la fenêtre. +- {{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}} + - : Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante. +- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}} + - : Active la planification de tâches pendant les périodes d'inactivité du navigateur. +- {{domxref("Window.resizeBy()")}} + - : Redimensionne la fenêtre en cours d'une certaine quantité. +- {{domxref("Window.resizeTo()")}} + - : Redimensionne dynamiquement la fenêtre. +- {{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.scroll()")}} + - : Fait défiler la fenêtre à un endroit particulier dans le document. +- {{domxref("Window.scrollBy()")}} + - : Fait défiler le document dans la fenêtre de la quantité indiquée. +- {{domxref("Window.scrollByLines()")}} {{Non-standard_inline}} + - : Fait défiler le document du nombre de lignes indiqué. +- {{domxref("Window.scrollByPages()")}} {{Non-standard_inline}} + - : Fait défiler le document en cours du nombre de pages indiqué. +- {{domxref("Window.scrollTo()")}} + - : Fait défiler à un jeu de coordonnées particulier dans le document. +- {{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only) + - : Change le curseur pour la fenêtre en cours. +- {{domxref("Window.setImmediate()")}} + - : Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes +- {{domxref("Window.setResizable()")}} {{Non-standard_inline}} + - : Inverse la possibilité pour un utilisateur de redimensionner une fenêtre. +- {{domxref("Window.sizeToContent()")}} {{Non-standard_inline}} + - : Dimensionne la fenêtre en fonction de son contenu. +- {{domxref("Window.stop()")}} + - : Cette méthode arrête le chargement de la fenêtre. +- {{domxref("Window.updateCommands()")}} {{Non-standard_inline}} + - : Met à jour l'état des commandes de la fenêtre chrome en cours (IU). + +### Méthodes implémentées depuis ailleurs + +- {{domxref("EventTarget.addEventListener()")}} + - : Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre. +- {{domxref("WindowOrWorkerGlobalScope.atob()")}} + - : Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64. +- {{domxref("WindowOrWorkerGlobalScope.btoa()")}} + - : Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires. +- {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} + - : Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}. +- {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} + - : Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}. +- {{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}} + - : Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh. +- {{domxref("WindowOrWorkerGlobalScope.fetch()")}} + - : Démarre le processus de récupération d'une ressource à partir du réseau. +- {{domxref("EventTarget.removeEventListener")}} + - : Supprime un gestionnaire d'événement de la fenêtre. +- {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} + - : Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé. +- {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} + - : Planifie une fonction à exécuter dans un laps de temps donné. + +### Méthodes obsolètes + +- {{domxref("Window.showModalDialog()")}} {{obsolete_inline}} + - : Affiche un dialogue modal. **Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55**. + +## Gestionnaires d'évènements + +Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes. + +_Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}._ + +> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails. + +- {{domxref("GlobalEventHandlers.onabort")}} + + + + - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours. + +<!----> + +- {{domxref("WindowEventHandlers.onafterprint")}} + - : Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}. +- {{domxref("WindowEventHandlers.onbeforeprint")}} + - : Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}. +- {{domxref("Window.onbeforeinstallprompt")}} + - : Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile. +- {{domxref("WindowEventHandlers.onbeforeunload")}} + - : Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre. + +<!----> + +- {{domxref("GlobalEventHandlers.onblur")}} + - : Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle. + +<!----> + +- {{domxref("GlobalEventHandlers.onchange")}} + - : Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre. + +<!----> + +- {{domxref("GlobalEventHandlers.onclick")}} + - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché. + +<!----> + +- {domxref("GlobalEventHandlers.ondblclick")}} + - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris. +- {{domxref("GlobalEventHandlers.onclose")}} + - : Appelé après la fermeture de la fenêtre. + +<!----> + +- {{domxref("GlobalEventHandlers.oncontextmenu")}} + - : Appelé lorsque le bouton DROIT de la souris est enfoncé. + +<!----> + +- {{domxref("Window.ondevicelight")}} + - : Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante. +- {{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}} + - : Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles). +- {{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}} + - : Appelé lorsque l'orientation est modifiée (pour les appareils mobiles). +- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only + - : Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil. +- {{domxref("Window.ondeviceproximity")}} + - : Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil. + +<!----> + +- {{domxref("GlobalEventHandlers.onerror")}} + - : Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}. + +<!----> + +- {{domxref("GlobalEventHandlers.onfocus")}} + - : Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}. + +<!----> + +- {{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}} + - : Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change. +- {{domxref("Window.onappinstalled")}} + - : Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}. +- {{domxref("Window.ongamepadconnected")}} + - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche). +- {{domxref("Window.ongamepaddisconnected")}} + - : Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche). +- {{domxref("Window.oninput")}} + - : Appelée lorsque la valeur d'un élément \<input> change. +- {{domxref("GlobalEventHandlers.onkeydown")}} + - : Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}. + +<!----> + +- {{domxref("GlobalEventHandlers.onkeypress")}} + - : Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}. + +<!----> + +- {{domxref("GlobalEventHandlers.onkeyup")}} + - : Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}. + +<!----> + +- {{domxref("WindowEventHandlers.onlanguagechange")}} + - : Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre. +- {{domxref("GlobalEventHandlers.onload")}} + - : Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière. + +<!----> + +- {{domxref("GlobalEventHandlers.onmousedown")}} + - : Appelé quand un bouton QUELCONQUE de la souris est pressé. + +<!----> + +- {{domxref("GlobalEventHandlers.onmousemove")}} + - : Appelé en continu quand la souris est déplacée dans la fenêtre. + +<!----> + +- {{domxref("GlobalEventHandlers.onmouseout")}} + - : Appelé lorsque le pointeur quitte la fenêtre. + +<!----> + +- {{domxref("GlobalEventHandlers.onmouseover")}} + - : Appelé lorsque le pointeur entre dans la fenêtre. + +<!----> + +- {{domxref("GlobalEventHandlers.onmouseup")}} + - : Appelé quand un bouton QUELCONQUE de la souris est relâché. + +<!----> + +- {{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}} + - : Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}. +- {{domxref("WindowEventHandlers.onoffline")}} + - : Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}. +- {{domxref("WindowEventHandlers.ononline")}} + - : Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}. +- {{domxref("WindowEventHandlers.onpagehide")}} + - : Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}. +- {{domxref("WindowEventHandlers.onpageshow")}} + - : Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}. +- {{domxref("Window.onpaint")}} + - : Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre. + +<!----> + +- {{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}} + - : Appelé quand le bouton arrière est pressé. +- {{domxref("Window.onrejectionhandled")}} {{experimental_inline}} + - : Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés. +- {{domxref("GlobalEventHandlers.onreset")}} + - : Appelé lorsqu'un formulaire est réinitialisé + +<!----> + +- {{domxref("GlobalEventHandlers.onresize")}} + - : Appelé en continu lorsque vous redimensionnez la fenêtre. + +<!----> + +- {{domxref("GlobalEventHandlers.onscroll")}} + - : Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué. + +<!----> + +- {{domxref("GlobalEventHandlers.onwheel")}} + - : Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque. +- {{domxref("GlobalEventHandlers.onselect")}} + - : Appelé après le texte dans un champ de saisie est sélectionné. + +<!----> + +- {{domxref("GlobalEventHandlers.onselectionchange")}} + - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché. +- {{domxref("WindowEventHandlers.onstorage")}} + - : Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}. +- {{domxref("GlobalEventHandlers.onsubmit")}} + - : Appelé lorsqu'un formulaire est soumis. + +<!----> + +- {{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}} + - : Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés. +- {{domxref("WindowEventHandlers.onunload")}} + - : Appelé lorsque l'utilisateur quitte la page. + +<!----> + +- {{domxref("Window.onuserproximity")}} + - : Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur. +- {{domxref("Window.onvrdisplayconnect")}} + - : Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche). +- {{domxref("Window.onvrdisplaydisconnect")}} + - : Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche). +- {{domxref("Window.onvrdisplayactivate")}} + - : Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi. +- {{domxref("Window.onvrdisplaydeactivate")}} + - : Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité. +- {{domxref("Window.onvrdisplayblur")}} + - : Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience. +- {{domxref("Window.onvrdisplayfocus")}} + - : Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche). +- {{domxref("Window.onvrdisplaypresentchange")}} + - : Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche). + +## Constructeurs + +Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). + +- {{domxref("DOMParser")}} + - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/). +- {{domxref("Window.GeckoActiveXObject")}} + - : {{todo("NeedsContents")}} +- {{domxref("Image")}} + - : Used for creating an {{domxref("HTMLImageElement")}}. +- {{domxref("Option")}} + - : Used for creating an {{domxref("HTMLOptionElement")}} +- {{domxref("Window.QueryInterface")}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.XMLSerializer")}} + - : {{todo("NeedsContents")}} +- {{domxref("Worker")}} + - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers) +- {{domxref("Window.XPCNativeWrapper")}} + - : {{todo("NeedsContents")}} +- {{domxref("Window.XPCSafeJSObjectWrapper")}} + - : {{todo("NeedsContents")}} + +## Interfaces + +Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) + +## Voir aussi + +- [Travailler avec des fenêtres dans le code chrome](/fr/docs/Mozilla/Working_with_windows_in_chrome_code) diff --git a/files/fr/web/api/window/innerheight/index.md b/files/fr/web/api/window/innerheight/index.md index 19e63c1f54..b6e9ff08c1 100644 --- a/files/fr/web/api/window/innerheight/index.md +++ b/files/fr/web/api/window/innerheight/index.md @@ -10,35 +10,31 @@ tags: - Window translation_of: Web/API/Window/innerHeight --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p>Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.</p> +Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale. -<div class="note"> -<p><strong>Note :</strong> La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.</p> -</div> +> **Note :** La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre>var hauteur = window.innerHeight; -</pre> + var hauteur = window.innerHeight; -<h3 id="Valeur_renvoy.C3.A9e">Valeur</h3> +### Valeur -<p>Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété <code>window.innerHeight</code> est accessible en lecture seulement ; elle n'a pas de valeur par défaut.</p> +Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut. -<h2 id="Notes">Notes</h2> +## Notes -<ul> - <li>La propriété <code>window.innerHeight</code> est supportée par tout objet assimilé à une fenêtre <em>{{domxref("window")}}</em>, un cadre <em>frame </em>, un ensemble de cadres <em>frameset</em>, ou une fenêtre secondaire.</li> - <li>Il existe un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">algorithme</a> pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée.</li> -</ul> +- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire. +- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée. -<h2 id="Attention">Exemples</h2> +## Exemples -<h3 id="Code">Sur un <em>frameset</em></h3> +### Sur un _frameset_ -<pre class="brush:js">var intFrameHeight = window.innerHeight; // ou +```js +var intFrameHeight = window.innerHeight; // ou var intFrameHeight = self.innerHeight; // retournera la hauteur de la partie visible du cadre dans frameset @@ -48,48 +44,31 @@ var intFramesetHeight = parent.innerHeight; var intOuterFramesetHeight = top.innerHeight; // retournera la hauteur de la partie visible du frameset le plus éloigné -</pre> +``` -<p>{{todo("ajouter ici un lien vers une démo interactive")}}</p> +{{todo("ajouter ici un lien vers une démo interactive")}} -<ul> - <li>Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</li> - <li>Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}.</li> -</ul> +- Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. +- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}. -<h3 id="Exemple_graphique">Exemple graphique</h3> +### Exemple graphique -<p>L'illustration suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p> +L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`. -<p><img alt="Illustration de la différence entre innerHeight et outerHeight" src="firefoxinnervsouterheight2.png"></p> + -<h2 id="Spécification">Spécification</h2> +## Spécification -<table> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}} | {{Spec2('CSSOM View')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.innerHeight")}}</p> +{{Compat("api.Window.innerHeight")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.innerWidth")}}</li> - <li>{{domxref("window.outerHeight")}}</li> - <li>{{domxref("window.outerWidth")}}</li> -</ul> +- {{domxref("window.innerWidth")}} +- {{domxref("window.outerHeight")}} +- {{domxref("window.outerWidth")}} diff --git a/files/fr/web/api/window/innerwidth/index.md b/files/fr/web/api/window/innerwidth/index.md index a76af5343a..882ae4d79e 100644 --- a/files/fr/web/api/window/innerwidth/index.md +++ b/files/fr/web/api/window/innerwidth/index.md @@ -3,66 +3,50 @@ title: window.innerWidth slug: Web/API/Window/innerWidth translation_of: Web/API/Window/innerWidth --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> +## Résumé -<p>Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.<br> - Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.</p> +Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical. +Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre>var largeur = window.innerWidth; -</pre> + var largeur = window.innerWidth; -<p>Voir aussi : <a href="/fr/docs/Web/API/Window/innerHeight">window.innerHeight</a>, <a href="/fr/docs/Web/API/Window/outerHeight">window.outerHeight</a> and <a href="/fr/docs/Web/API/Window/outerWidth">window.outerWidth</a>.</p> +Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth). -<h2 id="Valeur_renvoy.C3.A9e">Valeur renvoyée</h2> +## Valeur renvoyée -<dl> - <dt><code>innerWidth </code></dt> - <dd>un entier (nombre de pixels);</dd> -</dl> +- `innerWidth` + - : un entier (nombre de pixels); -<h2 id="Notes">Notes</h2> +## Notes -<p>La propriété <code>innerWidth</code> est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire.</p> +La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire. -<h2 id="Example">Example</h2> +## Example -<pre>// Retourne la largeur de la fenêtre -var largeur = window.innerWidth; + // Retourne la largeur de la fenêtre + var largeur = window.innerWidth; -// Retourn la largeur de la fenêtre à l'intérieur d'une "frameset" -var largeur = self.innerWidth; + // Retourn la largeur de la fenêtre à l'intérieur d'une "frameset" + var largeur = self.innerWidth; -// Retourne la largeur de la fenêtre du "frameset" parent -var largeurDeLaFrame = parent.innerWidth; + // Retourne la largeur de la fenêtre du "frameset" parent + var largeurDeLaFrame = parent.innerWidth; -// Retourne la largeur de la fenêtre du "frameset" principal -var largeurDuFrameset = top.innerWidth;</pre> + // Retourne la largeur de la fenêtre du "frameset" principal + var largeurDuFrameset = top.innerWidth; -<p>Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}.</p> +Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}} | {{Spec2('CSSOM View')}} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.innerWidth")}}</p> +{{Compat("api.Window.innerWidth")}} diff --git a/files/fr/web/api/window/issecurecontext/index.md b/files/fr/web/api/window/issecurecontext/index.md index dd6a2dbbc3..0e998ab741 100644 --- a/files/fr/web/api/window/issecurecontext/index.md +++ b/files/fr/web/api/window/issecurecontext/index.md @@ -9,50 +9,39 @@ tags: - Window translation_of: Web/API/Window/isSecureContext --- -<p>{{APIRef}}{{SeeCompatTable}}</p> +{{APIRef}}{{SeeCompatTable}} -<p>La propriété en lecteur seule <code><strong>window.isSecureContext</strong></code> indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des <a href="/en-US/docs/Web/Security/Secure_Contexts">contextes sécurisés</a>.</p> +La propriété en lecteur seule **`window.isSecureContext`** indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des [contextes sécurisés](/en-US/docs/Web/Security/Secure_Contexts). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>isSecure</em> = window.isSecureContext</pre> + var isSecure = window.isSecureContext -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Détection_des_fonctionnalités">Détection des fonctionnalités</h3> +### Détection des fonctionnalités -<p>Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen <code>isSecureContext</code> qui est exposé sur la portée globale.</p> +Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen `isSecureContext` qui est exposé sur la portée globale. -<pre class="brush: js">if (window.isSecureContext) { +```js +if (window.isSecureContext) { // La page est un contexte sécurisé afin que les techniciens de service soient désormais disponibles navigator.serviceWorker.register("/offline-worker.js").then(function () { ... }); -}</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Statut</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Secure Contexts')}}</td> - <td>{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}</td> - <td>Spécification initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.isSecureContext")}}</p> - -<h2 id="Voir_également">Voir également</h2> - -<ul> - <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Contextes sécurisés</a></li> -</ul> +} +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------- | +| {{SpecName('Secure Contexts')}} | {{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}} | Spécification initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Window.isSecureContext")}} + +## Voir également + +- [Contextes sécurisés](/en-US/docs/Web/Security/Secure_Contexts) diff --git a/files/fr/web/api/window/languagechange_event/index.md b/files/fr/web/api/window/languagechange_event/index.md index a55d83a36d..4cbeeb670e 100644 --- a/files/fr/web/api/window/languagechange_event/index.md +++ b/files/fr/web/api/window/languagechange_event/index.md @@ -9,71 +9,64 @@ tags: - Window translation_of: Web/API/Window/languagechange_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>languagechange</code></strong> est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.</p> +L'événement **`languagechange`** est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td>{{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Vous pouvez utiliser l'événement <code>languagechange</code> dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :</p> +Vous pouvez utiliser l'événement `languagechange` dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} : -<pre class="brush: js">window.addEventListener('languagechange', function() { +```js +window.addEventListener('languagechange', function() { console.log('languagechange event detected!'); -});</pre> +}); +``` -<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> :</p> +Ou utilisez la propriété du gestionnaire d'événements [`onlanguagechange`](/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange) : -<pre class="brush: js">window.onlanguagechange = function(event) { +```js +window.onlanguagechange = function(event) { console.log('languagechange event detected!'); -};</pre> +}; +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | +| {{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }} | {{ Spec2('HTML WHATWG') }} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.languagechange_event")}}</p> +{{Compat("api.Window.languagechange_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("NavigatorLanguage.language", "navigator.language")}}</li> - <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("Window.onlanguagechange")}}</li> -</ul> +- {{domxref("NavigatorLanguage.language", "navigator.language")}} +- {{domxref("NavigatorLanguage.languages", "navigator.languages")}} +- {{domxref("Navigator")}} +- {{domxref("Window.onlanguagechange")}} diff --git a/files/fr/web/api/window/length/index.md b/files/fr/web/api/window/length/index.md index af1ee54111..31f70f5c81 100644 --- a/files/fr/web/api/window/length/index.md +++ b/files/fr/web/api/window/length/index.md @@ -3,25 +3,24 @@ title: Window.length slug: Web/API/Window/length translation_of: Web/API/Window/length --- -<div>{{ ApiRef() }}</div> +{{ ApiRef() }} -<p>Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.</p> +Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>nombreDeFrames</em>= window.length; -</pre> + nombreDeFrames= window.length; -<ul> - <li><em>nombreDeFrames est égal au nombre de frames présent sur la page.</em></li> -</ul> +- _nombreDeFrames est égal au nombre de frames présent sur la page._ -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">if (window.length) { +```js +if (window.length) { // La page contient des frames -}</pre> +} +``` -<h2 id="Specification">Specification</h2> +## Specification -<p>{{DOM0}}</p> +{{DOM0}} diff --git a/files/fr/web/api/window/load_event/index.md b/files/fr/web/api/window/load_event/index.md index 9226d9630b..1504360f08 100644 --- a/files/fr/web/api/window/load_event/index.md +++ b/files/fr/web/api/window/load_event/index.md @@ -7,85 +7,50 @@ tags: translation_of: Web/API/Window/load_event original_slug: Web/Events/load --- -<p>L’évènement <code>load</code> est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt>Spécification</dt> - <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> - <dt>Interface</dt> - <dd>UIEvent</dd> - <dt>Bouillonne</dt> - <dd>Non</dd> - <dt>Annulable</dt> - <dd>Non</dd> - <dt>Cible</dt> - <dd>Document, Element</dd> - <dt>Action par défaut</dt> - <dd>Aucune.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>target</td> - <td><a href="/fr/docs/Web/API/EventTarget">EventTarget</a></td> - <td>La cible de l’évènement (la cible la plus haute dans l’arbre <a href="/fr/docs/Comment_cr%C3%A9er_un_arbre_DOM">DOM</a>)</td> - </tr> - <tr> - <td>type</td> - <td><a href="/fr/docs/Web/API/DOMString">DOMString</a></td> - <td>Le type de l’évènement</td> - </tr> - <tr> - <td>bubbles</td> - <td>boolean</td> - <td>Si l’évènement bouillonne ou non</td> - </tr> - <tr> - <td>cancelable</td> - <td>boolean</td> - <td>Si l’évènement est annulable ou non</td> - </tr> - <tr> - <td>view</td> - <td><a href="/fr/docs/Web/API/WindowProxy">WindowProxy</a></td> - <td><a href="/fr/docs/Web/API/Document/defaultView">document.defaultView</a> (la fenêtre du document)</td> - </tr> - <tr> - <td>detail</td> - <td>long (float)</td> - <td>0.</td> - </tr> - </tbody> -</table> - -<p>Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><script> +L’évènement `load` est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées. + +## Informations générales + +- Spécification + - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load) +- Interface + - : UIEvent +- Bouillonne + - : Non +- Annulable + - : Non +- Cible + - : Document, Element +- Action par défaut + - : Aucune. + +## Propriétés + +| Propriété | Type | Description | +| ---------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | +| target | [EventTarget](/fr/docs/Web/API/EventTarget) | La cible de l’évènement (la cible la plus haute dans l’arbre [DOM](/fr/docs/Comment_cr%C3%A9er_un_arbre_DOM)) | +| type | [DOMString](/fr/docs/Web/API/DOMString) | Le type de l’évènement | +| bubbles | boolean | Si l’évènement bouillonne ou non | +| cancelable | boolean | Si l’évènement est annulable ou non | +| view | [WindowProxy](/fr/docs/Web/API/WindowProxy) | [document.defaultView](/fr/docs/Web/API/Document/defaultView) (la fenêtre du document) | +| detail | long (float) | 0. | + +Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur. + +## Exemple + +```html +<script> window.addEventListener("load", function(event) { console.log("Toutes les ressources sont chargées !"); }); -</script></pre> +</script> +``` -<h2 id="Évènements_liés">Évènements liés</h2> +## Évènements liés -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> +- {{event("DOMContentLoaded")}} +- {{event("readystatechange")}} +- {{event("load")}} +- {{event("beforeunload")}} +- {{event("unload")}} diff --git a/files/fr/web/api/window/localstorage/index.md b/files/fr/web/api/window/localstorage/index.md index 3385e051fb..e8ccb332ec 100644 --- a/files/fr/web/api/window/localstorage/index.md +++ b/files/fr/web/api/window/localstorage/index.md @@ -13,79 +13,71 @@ tags: - localStorage translation_of: Web/API/Window/localStorage --- -<p>{{APIRef("Web Storage API")}}</p> +{{APIRef("Web Storage API")}} -<p>La propriété <code>localStorage</code> vous permet d'accéder à un objet local {{domxref("Storage")}}. Le <code>localStorage</code> est similaire au <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. La seule différence : les données stockées dans le <code>localStorage</code> n'ont pas de délai d'expiration, alors que les données stockées dans le <code>sessionStorage</code> sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur.</p> +La propriété `localStorage` vous permet d'accéder à un objet local {{domxref("Storage")}}. Le `localStorage` est similaire au [`sessionStorage`](/en-US/docs/Web/API/Window.sessionStorage). La seule différence : les données stockées dans le `localStorage` n'ont pas de délai d'expiration, alors que les données stockées dans le `sessionStorage` sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur. -<p>Il convient de noter que les données stockées dans <code>localStorage</code> ou <code>sessionStorage</code> <strong>sont spécifiques au protocole de la page.</strong></p> +Il convient de noter que les données stockées dans `localStorage` ou `sessionStorage` **sont spécifiques au protocole de la page.** -<p>Les clés et les valeurs <strong>sont toujours</strong> des chaînes de caractères (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).</p> +Les clés et les valeurs **sont toujours** des chaînes de caractères (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">monStockage = localStorage;</pre> +```js +monStockage = localStorage; +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle.</p> +Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle. -<h3 id="Exceptions">Exceptions</h3> +### Exceptions -<dl> - <dt><code>SecurityError</code></dt> - <dd>La demande viole une décision politique, ou l'origine n'est pas <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">un schéma/hôte/port valide</a> (cela peut se produire si l'origine utilise le shéma <code>file:</code> ou <code>data:</code>, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée.</dd> -</dl> +- `SecurityError` + - : La demande viole une décision politique, ou l'origine n'est pas [un schéma/hôte/port valide](/fr/docs/Web/Security/Same_origin_policy_for_JavaScript) (cela peut se produire si l'origine utilise le shéma `file:` ou `data:`, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}.</p> +L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}. -<pre class="brush: js">localStorage.setItem('monChat', 'Tom');</pre> +```js +localStorage.setItem('monChat', 'Tom'); +``` -<p>La syntaxe pour la lecture de l'article <code>localStorage</code> est la suivante :</p> +La syntaxe pour la lecture de l'article `localStorage` est la suivante : -<pre class="brush: js">var cat = localStorage.getItem('myCat');</pre> +```js +var cat = localStorage.getItem('myCat'); +``` -<p>La syntaxe pour la suppression de l'élément <code>localStorage</code> est la suivante :</p> +La syntaxe pour la suppression de l'élément `localStorage` est la suivante : -<pre class="brush: js">localStorage.removeItem('myCat');</pre> +```js +localStorage.removeItem('myCat'); +``` -<p>La syntaxe pour supprimer tous les éléments de <code>localStorage</code> est la suivante :</p> +La syntaxe pour supprimer tous les éléments de `localStorage` est la suivante : -<pre class="brush: js">// Effacer tous les éléments +```js +// Effacer tous les éléments localStorage.clear(); -</pre> - -<div class="note"> -<p><strong>Note :</strong> Se référer à l'article <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> pour voir un exemple complet.</p> -</div> - -<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">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> - -<p>{{Compat("api.Window.localStorage")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> - <li>{{domxref("Storage/LocalStorage")}}</li> - <li>{{domxref("Window/SessionStorage")}}</li> - <li>{{domxref("Window.sessionStorage")}}</li> -</ul> +``` + +> **Note :** Se référer à l'article [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) pour voir un exemple complet. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}} | {{Spec2("HTML WHATWG")}} | | + +## Compatibilité navigateurs + +{{Compat("api.Window.localStorage")}} + +## Voir aussi + +- [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +- {{domxref("Storage/LocalStorage")}} +- {{domxref("Window/SessionStorage")}} +- {{domxref("Window.sessionStorage")}} diff --git a/files/fr/web/api/window/location/index.md b/files/fr/web/api/window/location/index.md index f8074f97f9..081d5b2c86 100644 --- a/files/fr/web/api/window/location/index.md +++ b/files/fr/web/api/window/location/index.md @@ -4,61 +4,60 @@ slug: Web/API/Window/location translation_of: Web/API/Window/location browser-compat: api.Window.location --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>La propriété en lecture seule <strong><code>Window.location</code></strong> renvoie un objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a> qui contient des informations à propos de l'emplacement courant du document.</p> +La propriété en lecture seule **`Window.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location) qui contient des informations à propos de l'emplacement courant du document. -<p>Bien que <code>Window.location</code> soit un objet <code>Location</code> en <em>lecture seule</em>, on peut lui affecter une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>. Cela signifie qu'on peut, la plupart du temps, manipuler <code>location</code> comme une chaîne de caractères : <code>location = 'http://www.example.com'</code> est par exemple synonyme de <code>location.href = 'http://www.example.com'</code>.</p> +Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`. -<p>Voir la page de l'interface <a href="/fr/docs/Web/API/Location"><code>Location</code></a> pour connaître l'ensemble des propriétés disponibles.</p> +Voir la page de l'interface [`Location`](/fr/docs/Web/API/Location) pour connaître l'ensemble des propriétés disponibles. -<h2 id="syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"> -var <var>oldLocation</var> = location; -location = <var>newLocation</var>; -</pre> +```js +var oldLocation = location; +location = newLocation; +``` -<h2 id="exemples">Exemples</h2> +## Exemples -<h3 id="exemple_simple">Exemple simple</h3> +### Exemple simple -<pre class="brush: js"> +```js console.log(location); // affiche "https://developer.mozilla.org/fr/docs/Web/API/Window/location" dans la console -</pre> +``` -<h3 id="premier_exemple_naviguer_sur_une_nouvelle_page">Premier exemple : naviguer sur une nouvelle page</h3> +### Premier exemple : naviguer sur une nouvelle page -<p>Lorsqu'une nouvelle valeur est affectée à l'objet <code>location</code>, un document sera chargé en utilisant l'URL comme si <code>location.assign()</code> avait été invoquée avec l'URL modifiée.</p> +Lorsqu'une nouvelle valeur est affectée à l'objet `location`, un document sera chargé en utilisant l'URL comme si `location.assign()` avait été invoquée avec l'URL modifiée. -<div class="notecard note"> - <p><strong>Note :</strong> <a - href="https://html.spec.whatwg.org/multipage/browsers.html#allowed-to-navigate">Les marqueurs de bac à sable relatifs à la navigation</a> pourront lever une exception et empêcher la navigation.</p> -</div> +> **Note :** [Les marqueurs de bac à sable relatifs à la navigation](https://html.spec.whatwg.org/multipage/browsers.html#allowed-to-navigate) pourront lever une exception et empêcher la navigation. -<pre class="brush: js"> +```js location.assign("http://www.mozilla.org"); // ou location = "http://www.mozilla.org"; -</pre> +``` -<h3 id="deuxième_exemple_recharger_la_page_courante">Deuxième exemple : recharger la page courante</h3> +### Deuxième exemple : recharger la page courante -<pre class="brush: js">location.reload();</pre> +```js +location.reload(); +``` -<h3 id="troisième_exemple">Troisième exemple</h3> +### Troisième exemple -<p>Dans cet exemple, on recharge la page avec la méthode <a href="/fr/docs/Web/API/Location/replace"><code>replace()</code></a> afin d'insérer la valeur de <code>location.pathname</code> dans l'ancre :</p> +Dans cet exemple, on recharge la page avec la méthode [`replace()`](/fr/docs/Web/API/Location/replace) afin d'insérer la valeur de `location.pathname` dans l'ancre : -<pre class="brush: js"> +```js function reloadPageWithHash() { var initialPage = location.pathname; location.replace('http://example.com/#' + initialPage); } -</pre> +``` -<h3 id="quatrième_exemple_afficher_les_propriétés_de_l_url_courante">Quatrième exemple : afficher les propriétés de l'URL courante</h3> +### Quatrième exemple : afficher les propriétés de l'URL courante -<pre class="brush: js"> +```js function showLoc() { var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ]; for (var sProp in oLocation){ @@ -66,29 +65,29 @@ function showLoc() { } console.log(aLog.join("\n")); } -</pre> +``` -<h3 id="cinquième_exemple_envoyer_une_chaîne_de_données_au_serveur_en_modifiant_la_propriété_search">Cinquième exemple : envoyer une chaîne de données au serveur en modifiant la propriété search</h3> +### Cinquième exemple : envoyer une chaîne de données au serveur en modifiant la propriété search -<pre class="brush: js"> +```js function sendData (sData) { location.search = sData; } -// Dans le HTML: <button onclick="sendData('Des données');">Envoyer des données</button> -</pre> +// Dans le HTML: <button onclick="sendData('Des données');">Envoyer des données</button> +``` -<p>On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée.</p> +On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée. -<h3 id="sixième_exemple_utiliser_les_marques-pages_sans_changer_la_propriété_hash">Sixième exemple : utiliser les marques-pages sans changer la propriété <code>hash</code></h3> +### Sixième exemple : utiliser les marques-pages sans changer la propriété `hash` -<pre class="brush: html"> -<!doctype html> - <html> - <head> - <meta charset="UTF-8"/> - <title>Exemple MDN</title> - <script> +```html +<!doctype html> + <html> + <head> + <meta charset="UTF-8"/> + <title>Exemple MDN</title> + <script> function showNode (oNode) { document.documentElement.scrollTop = oNode.offsetTop; document.documentElement.scrollLeft = oNode.offsetLeft; @@ -99,47 +98,47 @@ function showBookmark (sBookmark, bUseHash) { var oBookmark = document.querySelector(sBookmark); if (oBookmark) { showNode(oBookmark); } } - </script> - <style> + </script> + <style> span.intLink { cursor: pointer; color: #0000ff; text-decoration: underline; } - </style> - </head> - -<body> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> - <p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p> - <p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Aller au marque-page n°2</span>&nbsp;]</p> - <p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p> - <p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p> - <p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> - <p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p> - <p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p> - <p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p> - <p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Aller au marque-page n°1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Aller au marque-page n°1 sans utiliser location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Aller au marque-page n°3</span>&nbsp;]</p> - <p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p> - <p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p> - <p id="myBookmark3"><em>Voici le marque-page n°3</em></p> - <p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p> - <p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p> - <p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p> - <p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p> - <p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p> - <p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p> - <p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p> - <p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p> - <p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p> - <p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p> -</body> -</html> -</pre> - -<p>La même chose mais avec un défilement animé :</p> - -<pre class="brush: js"> + </style> + </head> + +<body> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> + <p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p> + <p id="myBookmark1">[ <span class="intLink" onclick="showBookmark('#myBookmark2');">Aller au marque-page n°2</span> ]</p> + <p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p> + <p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p> + <p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> + <p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p> + <p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p> + <p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p> + <p id="myBookmark2">[ <span class="intLink" onclick="showBookmark('#myBookmark1');">Aller au marque-page n°1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Aller au marque-page n°1 sans utiliser location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Aller au marque-page n°3</span> ]</p> + <p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p> + <p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p> + <p id="myBookmark3"><em>Voici le marque-page n°3</em></p> + <p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p> + <p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p> + <p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p> + <p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p> + <p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p> + <p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p> + <p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p> + <p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p> + <p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p> + <p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p> +</body> +</html> +``` + +La même chose mais avec un défilement animé : + +```js var showBookmark = (function () { var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, /* @@ -149,17 +148,17 @@ var showBookmark = (function () { nDuration = 200, nFrames = 10; function _next () { - if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; } + if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; } _isBot = true; document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames); document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames); - if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; } + if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; } _itFrame++; } function _chkOwner () { if (_isBot) { _isBot = false; return; } - if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; } + if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; } } if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); } @@ -177,21 +176,19 @@ var showBookmark = (function () { if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); } }; })(); -</pre> +``` -<h2 id="spécifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui décrit la valeur renvoyée par cette propriété : <a href="/fr/docs/Web/API/Location"><code>Location</code></a>.</li> - <li>Une information similaire, mais attachée au document courant : <a href="/fr/docs/Web/API/Document/location"><code>Document.location</code></a>.</li> - <li><a href="/fr/docs/Web/API/History_API">Manipuler l'historique du navigateur avec l'API History</a></li> - <li><a href="/fr/docs/Web/API/Window/hashchange_event"><code>hashchange</code></a></li> -</ul> +- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location). +- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location). +- [Manipuler l'historique du navigateur avec l'API History](/fr/docs/Web/API/History_API) +- [`hashchange`](/fr/docs/Web/API/Window/hashchange_event) diff --git a/files/fr/web/api/window/locationbar/index.md b/files/fr/web/api/window/locationbar/index.md index 294652fb88..3a7a8cc795 100644 --- a/files/fr/web/api/window/locationbar/index.md +++ b/files/fr/web/api/window/locationbar/index.md @@ -9,64 +9,47 @@ tags: - Window translation_of: Web/API/Window/locationbar --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>Renvoie l'objet <code>locationbar</code>, dont la visibilité peut être vérifiée.</p> +Renvoie l'objet `locationbar`, dont la visibilité peut être vérifiée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>objRef</var> = window.locationbar -</pre> + objRef = window.locationbar -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>locationbar</code> est utilisée.</p> +L'exemple HTML complet suivant montre comment la propriété `visible` de l'objet `locationbar` est utilisée. -<pre class="brush:html"><!DOCTYPE html> -<html lang="fr"> -<head> -<meta charset="UTF-8" /> -<title>Divers tests DOM</title> +```html +<!DOCTYPE html> +<html lang="fr"> +<head> +<meta charset="UTF-8" /> +<title>Divers tests DOM</title> -<script> +<script> var visible = window.locationbar.visible; -</script> +</script> -</head> -<body> - <p>Divers tests DOM</p> -</body> -</html> -</pre> +</head> +<body> + <p>Divers tests DOM</p> +</body> +</html> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.locationbar")}}</p> +{{Compat("api.Window.locationbar")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li> -</ul> +- {{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}} diff --git a/files/fr/web/api/window/matchmedia/index.md b/files/fr/web/api/window/matchmedia/index.md index 77fea4b292..bc1748b1cc 100644 --- a/files/fr/web/api/window/matchmedia/index.md +++ b/files/fr/web/api/window/matchmedia/index.md @@ -3,49 +3,43 @@ title: window.matchMedia slug: Web/API/Window/matchMedia translation_of: Web/API/Window/matchMedia --- -<div>{{ApiRef}}</div> - -<p>Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères <a href="/en-US/docs/CSS/Media_queries">media query</a> spécifiée.</p> -<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre> -<p>Ici, <code>mediaQueryString</code> est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.</p> -<h2 id="Example">Exemple</h2> -<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) { +{{ApiRef}} + +Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères [media query](/en-US/docs/CSS/Media_queries) spécifiée. + +## Syntaxe + + mql = window.matchMedia(mediaQueryString) + +Ici, `mediaQueryString` est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}. + +## Exemple + +```js +if (window.matchMedia("(min-width: 400px)").matches) { /* the view port is at least 400 pixels wide */ } else { /* the view port is less than 400 pixels wide */ -}</pre> -<p>Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.</p> -<p>Voir <a href="/en-US/docs/DOM/Using_media_queries_from_code">Utiliser les media queries avec du code</a> pour plus d'exemples.</p> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td> - <td>{{Spec2("CSSOM View")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.matchMedia")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li> - <li><a href="/en-US/docs/DOM/Using_media_queries_from_code">Using media queries from code</a></li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("MediaQueryListListener")}}</li> -</ul> +} +``` + +Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large. + +Voir [Utiliser les media queries avec du code](/en-US/docs/DOM/Using_media_queries_from_code) pour plus d'exemples. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}} | {{Spec2("CSSOM View")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Window.matchMedia")}} + +## Voir aussi + +- [Media queries](/en-US/docs/CSS/Media_queries) +- [Using media queries from code](/en-US/docs/DOM/Using_media_queries_from_code) +- {{domxref("MediaQueryList")}} +- {{domxref("MediaQueryListListener")}} diff --git a/files/fr/web/api/window/menubar/index.md b/files/fr/web/api/window/menubar/index.md index 6e5fc9371d..8744ac7367 100644 --- a/files/fr/web/api/window/menubar/index.md +++ b/files/fr/web/api/window/menubar/index.md @@ -9,64 +9,47 @@ tags: - Window translation_of: Web/API/Window/menubar --- -<div>{{ APIRef() }}</div> +{{ APIRef() }} -<p>La propriété <code><strong>Window.menubar</strong></code> renvoie l'objet <code>menubar</code>, dont la visibilité peut être vérifiée.</p> +La propriété **`Window.menubar`** renvoie l'objet `menubar`, dont la visibilité peut être vérifiée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>objRef</em> = <em>window</em>.menubar -</pre> + objRef = window.menubar -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>menubar</code> est utilisée.</p> +L'exemple HTML complet suivant montre comment la propriété `visible` de l'objet `menubar` est utilisée. -<pre class="brush:html"><html> -<head> - <title>Divers Tests DOM</title> - <script> +```html +<html> +<head> + <title>Divers Tests DOM</title> + <script> var visible = window.menubar.visible; - </script> -</head> -<body> - <p>Divers Tests DOM</p> -</body> -</html> -</pre> + </script> +</head> +<body> + <p>Divers Tests DOM</p> +</body> +</html> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.menubar")}}</p> +{{Compat("api.Window.menubar")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("Window.locationbar")}}</li> - <li>{{domxref("Window.personalbar")}}</li> - <li>{{domxref("Window.scrollbars")}}</li> - <li>{{domxref("Window.statusbar")}}</li> - <li>{{domxref("Window.toolbar")}}</li> -</ul> +- {{domxref("Window.locationbar")}} +- {{domxref("Window.personalbar")}} +- {{domxref("Window.scrollbars")}} +- {{domxref("Window.statusbar")}} +- {{domxref("Window.toolbar")}} diff --git a/files/fr/web/api/window/message_event/index.md b/files/fr/web/api/window/message_event/index.md index 7122fbb2d9..f4e019bd9b 100644 --- a/files/fr/web/api/window/message_event/index.md +++ b/files/fr/web/api/window/message_event/index.md @@ -6,77 +6,78 @@ tags: - Window translation_of: Web/API/Window/message_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <code>message</code> est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> depuis un autre contexte de navigation.</p> +L'événement `message` est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a [`Window.postMessage()`](/en-US/docs/Web/API/Window/postMessage) depuis un autre contexte de navigation. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MessageEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td><code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MessageEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + <code + ><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage" + >onmessage</a + ></code + > + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, en utilisant un code comme celui-ci:</p> +Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe), en utilisant un code comme celui-ci: -<pre class="brush: js">const targetFrame = window.top.frames[1]; +```js +const targetFrame = window.top.frames[1]; const targetOrigin = 'https://exemple.org'; const windowMessageButton = document.querySelector('#window-message'); -windowMessageButton.addEventListener('click', () => { +windowMessageButton.addEventListener('click', () => { targetFrame.postMessage('bonjour', targetOrigin); -});</pre> +}); +``` -<p>Le récepteur peut écouter le message en utilisant <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> avec un code comme celui-ci:</p> +Le récepteur peut écouter le message en utilisant [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) avec un code comme celui-ci: -<pre class="brush: js">window.addEventListener('message', (event) => { +```js +window.addEventListener('message', (event) => { console.log(`Message reçu: ${event.data}`); -});</pre> +}); +``` -<p>Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code>:</p> +Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements [`onmessage`](/en-US/docs/Web/API/WindowEventHandlers/onmessage): -<pre class="brush: js">window.onmessage = (event) => { +```js +window.onmessage = (event) => { console.log(`Message reçu: ${event.data}`); -};</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> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +}; +``` + +## Spécifications + +| Spécification | Statut | +| ---------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'indices.html#event-message')}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.message_event")}}</p> +{{Compat("api.Window.message_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Événements liés: <code><a href="/docs/Web/API/Window/messageerror_event">messageerror</a></code>.</li> - <li><code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code>.</li> -</ul> +- Événements liés: [`messageerror`](/docs/Web/API/Window/messageerror_event). +- [`Window.postMessage()`](/en-US/docs/Web/API/Window/postMessage). diff --git a/files/fr/web/api/window/messageerror_event/index.md b/files/fr/web/api/window/messageerror_event/index.md index 0f63b05e44..96b06cc4b7 100644 --- a/files/fr/web/api/window/messageerror_event/index.md +++ b/files/fr/web/api/window/messageerror_event/index.md @@ -9,69 +9,62 @@ tags: - Window translation_of: Web/API/Window/messageerror_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <code>messageerror</code> est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé.</p> +L'événement `messageerror` est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("MessageEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td>{{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MessageEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Écoutez <code>messageerror</code> en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :</p> +Écoutez `messageerror` en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} : -<pre class="brush: js">window.addEventListener('messageerror', (event) => { +```js +window.addEventListener('messageerror', (event) => { console.error(event); -});</pre> +}); +``` -<p>Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :</p> +Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} : -<pre class="brush: js">window.onmessageerror = (event) => { +```js +window.onmessageerror = (event) => { console.error(event); -};</pre> +}; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.messageerror_event")}}</p> +{{Compat("api.Window.messageerror_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("Window.postMessage()")}}</li> - <li>Événements liés: {{domxref("Window/message_event", "message")}}.</li> -</ul> +- {{domxref("Window.postMessage()")}} +- Événements liés: {{domxref("Window/message_event", "message")}}. diff --git a/files/fr/web/api/window/mozinnerscreenx/index.md b/files/fr/web/api/window/mozinnerscreenx/index.md index 3cce6881b6..ec50d45c98 100644 --- a/files/fr/web/api/window/mozinnerscreenx/index.md +++ b/files/fr/web/api/window/mozinnerscreenx/index.md @@ -10,38 +10,32 @@ tags: - Window translation_of: Web/API/Window/mozInnerScreenX --- -<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div> +{{APIRef}}{{gecko_minversion_header("1.9.2")}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p> +Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran. -<div class="note"> - <p><strong>Note :</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</p> -</div> +> **Note :** Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété[ `nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>screenX</var> = window.mozInnerScreenX;</pre> + screenX = window.mozInnerScreenX; -<h3 id="Valeur">Valeur</h3> +### Valeur -<ul> - <li><var>screenX</var> stocke la valeur de la propriété <code>window.mozInnerScreenX</code>.</li> - <li>La propriété <code>window.mozInnerScreenX</code> est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.</li> -</ul> +- _screenX_ stocke la valeur de la propriété `window.mozInnerScreenX`. +- La propriété `window.mozInnerScreenX` est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut. -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> +Ne fait partie d'aucune spécification ou recommandation technique du W3C. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.mozInnerScreenX")}}</p> +{{Compat("api.Window.mozInnerScreenX")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("window.mozInnerScreenY")}}</li> - <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li> -</ul> +- {{domxref("window.mozInnerScreenY")}} +- [`nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils) diff --git a/files/fr/web/api/window/mozinnerscreeny/index.md b/files/fr/web/api/window/mozinnerscreeny/index.md index 2b9ebd8564..08dc02589e 100644 --- a/files/fr/web/api/window/mozinnerscreeny/index.md +++ b/files/fr/web/api/window/mozinnerscreeny/index.md @@ -10,38 +10,32 @@ tags: - Window translation_of: Web/API/Window/mozInnerScreenY --- -<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div> +{{APIRef}}{{gecko_minversion_header("1.9.2")}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p> +Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran. -<div class="note"> - <p><strong>Note :</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</p> -</div> +> **Note :** Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété[ `nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>screenY</var> = window.mozInnerScreenY;</pre> + screenY = window.mozInnerScreenY; -<h3 id="Valeur">Valeur</h3> +### Valeur -<ul> - <li><var>screenY</var> stocke la valeur de la propriété <code>window.mozInnerScreenY</code>.</li> - <li>La propriété <code>window.mozInnerScreenY</code> est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.</li> -</ul> +- _screenY_ stocke la valeur de la propriété `window.mozInnerScreenY`. +- La propriété `window.mozInnerScreenY` est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut. -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> +Ne fait partie d'aucune spécification ou recommandation technique du W3C. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.mozInnerScreenY")}}</p> +{{Compat("api.Window.mozInnerScreenY")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("window.mozInnerScreenX")}}</li> - <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li> -</ul> +- {{domxref("window.mozInnerScreenX")}} +- [`nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils) diff --git a/files/fr/web/api/window/mozpaintcount/index.md b/files/fr/web/api/window/mozpaintcount/index.md index a6f3d9eb7c..4b28a2bb09 100644 --- a/files/fr/web/api/window/mozpaintcount/index.md +++ b/files/fr/web/api/window/mozpaintcount/index.md @@ -3,7 +3,7 @@ title: Window.mozPaintCount slug: Web/API/Window/mozPaintCount tags: - API - - 'API:Mozilla Extensions' + - API:Mozilla Extensions - Déprécié - HTML DOM - NeedsExample @@ -13,23 +13,21 @@ tags: - Window translation_of: Web/API/Window/mozPaintCount --- -<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}}</p> +{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}} -<p>Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.</p> +Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre> + var paintCount = window.mozPaintCount; -<ul> - <li><code><em>paintCount</em></code> stocke la valeur de la propriété <code>window.mozPaintCount</code>.</li> - <li>La valeur <code>window.mozPaintCount</code> est <code>longue</code>, et commence à zéro lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.</li> -</ul> +- `paintCount` stocke la valeur de la propriété `window.mozPaintCount`. +- La valeur `window.mozPaintCount` est `longue`, et commence à zéro lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint. -<h2 id="Specification">Spécification</h2> +## Spécification -<p>Ne fait partie d'aucune spécification ou recommandation du <abbr>W3C</abbr>.</p> +Ne fait partie d'aucune spécification ou recommandation du W3C. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.mozPaintCount")}}</p> +{{Compat("api.Window.mozPaintCount")}} diff --git a/files/fr/web/api/window/name/index.md b/files/fr/web/api/window/name/index.md index ef7efa9448..73ab042772 100644 --- a/files/fr/web/api/window/name/index.md +++ b/files/fr/web/api/window/name/index.md @@ -8,47 +8,34 @@ tags: - Reference translation_of: Web/API/Window/name --- -<div>{{APIRef}}</div> +{{APIRef}} -<h2 id="En_bref">En bref</h2> +## En bref -<p>Récupère ou définit le nom de la fenêtre.</p> +Récupère ou définit le nom de la fenêtre. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><var>string</var> = window.name; -window.name = <var>string</var>; -</pre> +```js +string = window.name; +window.name = string; +``` -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">window.name = "lab_view"; -</pre> +```js +window.name = "lab_view"; +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.</p> +Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées. -<p>Les noms de fenêtres ont en outre été utilisés par quelques <em>frameworks </em>pour le support des échanges de messages inter-domaines (par exemple <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> et <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a> de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'<a href="/fr/docs/Web/API/Window/postMessage">API postMessage</a> pour les échanges de messages inter-domaines plutôt que s'appuyer sur <code>window.name</code>.</p> +Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML5 W3C')}} | | diff --git a/files/fr/web/api/window/navigator/index.md b/files/fr/web/api/window/navigator/index.md index 2f763caa88..b28e338f41 100644 --- a/files/fr/web/api/window/navigator/index.md +++ b/files/fr/web/api/window/navigator/index.md @@ -10,39 +10,29 @@ tags: - Window translation_of: Web/API/Window/navigator --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété en lecture-seule <strong><code>Window.navigator</code></strong> renvoie une référence à un objet qui est une instance de {{domxref("Navigator")}} et possède des méthodes et propriétés à propos de l'application qui exécute le script.</p> +La propriété en lecture-seule **`Window.navigator`** renvoie une référence à un objet qui est une instance de {{domxref("Navigator")}} et possède des méthodes et propriétés à propos de l'application qui exécute le script. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><var>navigatorObject</var> = window.navigator</pre> +```js +navigatorObject = window.navigator +``` -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">var sUsrAg = navigator.userAgent; +```js +var sUsrAg = navigator.userAgent; console.log("Voici l'agent utilisateur du navigateur courant", sUsrAg); -</pre> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.navigator")}}</p> +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Window.navigator")}} diff --git a/files/fr/web/api/window/offline_event/index.md b/files/fr/web/api/window/offline_event/index.md index fa7752a90c..98bd7cc28f 100644 --- a/files/fr/web/api/window/offline_event/index.md +++ b/files/fr/web/api/window/offline_event/index.md @@ -9,65 +9,57 @@ tags: - Window translation_of: Web/API/Window/offline_event --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>L'événement <strong><code>offline</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à <code>false</code>.</p> +L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à `false`. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td>{{domxref("GlobalEventHandlers.onoffline", "onoffline")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + {{domxref("GlobalEventHandlers.onoffline", "onoffline")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">//version addEventListener -window.addEventListener('offline', (event) => { +```js +//version addEventListener +window.addEventListener('offline', (event) => { console.log("La Connexion au réseau est perdu."); }); // onoffline version -window.onoffline = (event) => { +window.onoffline = (event) => { console.log("La Connexion au réseau a été perdue."); }; -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2> +## Compatibilité des Navigateurs -<p>{{Compat("api.Window.offline_event")}}</p> +{{Compat("api.Window.offline_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en-US/docs/Web/API/Window/online_event"><code>online</code></a></li> -</ul> +- [`online`](/en-US/docs/Web/API/Window/online_event) diff --git a/files/fr/web/api/window/online_event/index.md b/files/fr/web/api/window/online_event/index.md index c2c93916c8..ff17737057 100644 --- a/files/fr/web/api/window/online_event/index.md +++ b/files/fr/web/api/window/online_event/index.md @@ -9,69 +9,59 @@ tags: - Window translation_of: Web/API/Window/online_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>online</code></strong> de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à <code>true</code>.</p> +L'événement **`online`** de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à `true`. -<div class="note"> - <p><strong>Note :</strong> Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.</p> -</div> +> **Note :** Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td>{{domxref("GlobalEventHandlers.ononline", "ononline")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + {{domxref("GlobalEventHandlers.ononline", "ononline")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">// addEventListener version -window.addEventListener('online', (event) => { +```js +// addEventListener version +window.addEventListener('online', (event) => { console.log("Vous êtes maintenant connecté au réseau."); }); // ononline version -window.ononline = (event) => { +window.ononline = (event) => { console.log("Vous êtes maintenant connecté au réseau."); }; -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.online_event")}}</p> +{{Compat("api.Window.online_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en-US/docs/Web/API/Window/offline_event"><code>offline</code></a></li> -</ul> +- [`offline`](/en-US/docs/Web/API/Window/offline_event) diff --git a/files/fr/web/api/window/onpaint/index.md b/files/fr/web/api/window/onpaint/index.md index d7ae9b979d..df976cce31 100644 --- a/files/fr/web/api/window/onpaint/index.md +++ b/files/fr/web/api/window/onpaint/index.md @@ -9,29 +9,24 @@ tags: - Propriété translation_of: Web/API/Window/onpaint --- -<div>{{ ApiRef() }} {{Non-standard_header}}</div> +{{ ApiRef() }} {{Non-standard_header}} -<p><code><strong>Window.onpaint</strong></code> est un gestionnaire d'événements pour l'événement <code>paint</code> sur la fenêtre.</p> +**`Window.onpaint`** est un gestionnaire d'événements pour l'événement `paint` sur la fenêtre. -<div class="warning"> -<p><strong>Attention :</strong> Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!</p> -</div> +> **Attention :** Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes! -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">window.onpaint = <em>funcRef</em>; -</pre> + window.onpaint = funcRef; -<ul> - <li><code>funcRef</code> est une fonction de gestionnaire.</li> -</ul> +- `funcRef` est une fonction de gestionnaire. -<h2 id="Notes">Notes</h2> +## Notes -<p><code>onpaint</code> ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}.</p> +`onpaint` ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}. -<p>L'événement <code>paint</code> est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée.</p> +L'événement `paint` est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée. -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Cela ne fait partie d'aucune spécification.</p> +Cela ne fait partie d'aucune spécification. diff --git a/files/fr/web/api/window/open/index.md b/files/fr/web/api/window/open/index.md index 6c44f9dd5c..4aa20d996b 100644 --- a/files/fr/web/api/window/open/index.md +++ b/files/fr/web/api/window/open/index.md @@ -6,45 +6,48 @@ tags: - DOM_0 translation_of: Web/API/Window/open --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h3 id="D.C3.A9finition">Définition</h3> +### Définition -<p>Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.</p> +Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée. -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="brush: js">var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);</pre> +```js +var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]); +``` -<h3 id="Valeur_renvoy.C3.A9e_et_param.C3.A8tres">Valeur renvoyée et paramètres</h3> +### Valeur renvoyée et paramètres -<dl> - <dt><code>WindowObjectReference</code></dt> - <dd>Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode <code>open()</code> ; elle sera à <code>null</code> si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (<em><a href="http://www.mozilla.org/projects/security/components/same-origin.html">Same origin policy</a> security requirements</em> ).</dd> - <dt><code>strUrl</code></dt> - <dd>Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. <var>strUrl</var> peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.</dd> - <dt><code>strWindowName</code></dt> - <dd>Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut <code>target</code> d'un élément <code><a></code> ou d'un élément <code><form></code> est spécifié. Cette chaîne ne peut contenir d'espaces. <var>strWindowName</var> ne spécifie pas le titre de la fenêtre, juste son nom interne.</dd> - <dt><code>strWindowFeatures</code></dt> - <dd>Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.</dd> -</dl> +- `WindowObjectReference` + - : Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode `open()` ; elle sera à `null` si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ). +- `strUrl` + - : Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. _strUrl_ peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur. +- `strWindowName` + - : Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut `target` d'un élément `<a>` ou d'un élément `<form>` est spécifié. Cette chaîne ne peut contenir d'espaces. _strWindowName_ ne spécifie pas le titre de la fenêtre, juste son nom interne. +- `strWindowFeatures` + - : Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères. -<h3 id="Description">Description</h3> +### Description -<p>La méthode <code>open()</code> crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre <var>strUrl</var> spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si <var>strUrl</var> est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL <code>about:blank</code> sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.</p> +La méthode `open()` crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre _strUrl_ spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si _strUrl_ est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL `about:blank` sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale. -<p>Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à <code>window.open()</code> se termine et renvoie sa valeur, la fenêtre contient toujours <code>about:blank</code>. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.</p> +Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à `window.open()` se termine et renvoie sa valeur, la fenêtre contient toujours `about:blank`. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone. -<h4 id="Exemples">Exemples</h4> +#### Exemples -<pre class="brush:js">var windowObjectReference; +```js +var windowObjectReference; var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; function openRequestedPopup() { windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures); -}</pre> +} +``` -<pre class="brush:js">var windowObjectReference; +```js +var windowObjectReference; function openRequestedPopup() { windowObjectReference = window.open( @@ -52,129 +55,123 @@ function openRequestedPopup() { "DescriptiveWindowName", "resizable,scrollbars,status" ); -}</pre> - - - -<p>Si une fenêtre du nom <var>strWindowName</var> existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, <var>strUrl</var> est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et <var>strWindowFeatures</var> est ignorée. Fournir une chaîne vide pour <var>strUrl</var> est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de <code>window.open()</code>, il faut utiliser la nom réservé <var>_blank</var> pour <var>strWindowName</var>.</p> - -<div class="note"> -<p><strong>Note :</strong> À propos de l'utilisation de <code>window.open</code> pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine : Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte. Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec <code>window.open</code>). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande <code>HTMLElement.focus()</code> vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec <code>window.open</code> elles sont inconnues et<code> window.open('',<name>,'')</code> ouvrira alors des doublons. La fonction <code>hw=window.open('',strWindowName<strong> </strong> ,'')</code> est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.</p> -</div> - -<p><var>strWindowFeatures</var> est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si <var>strWindowName</var> ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre <var>strWindowFeatures</var> (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.</p> - -<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment.</p> - -<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également.</p> - -<p><strong>Si le paramètre <var>strWindowFeatures</var> est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées</strong> (à l'exception de <var>titlebar</var> et <var>close</var> qui sont par défaut à <var>yes</var>).</p> - -<div class="note"> -<p><strong>Note :</strong> Si vous utilisez le paramètre <var>strWindowFeatures</var>, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de <var>titlebar</var> et <var>close</var>) seront désactivées ou enlevées.</p> -</div> - -<h4 id="Fonctionnalit.C3.A9s_de_position_et_de_taille">Fonctionnalités de position et de taille</h4> - -<p><a href="#Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</a></p> - -<p>{{bug(176320) }}</p> - -<p><a href="#Note_sur_les_priorit.C3.A9s">Note sur les priorités</a></p> - -<dl> - <dt>left</dt> - <dd>Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd> - <dt>top</dt> - <dd>Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd> - <dt>height</dt> - <dd>Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd> - <dt>width</dt> - <dd>Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd> - <dt>screenX</dt> - <dd>Mozilla.</dd> - <dt>screenY</dt> - <dd>Mozilla.</dd> - <dt>outerHeight</dt> - <dd><p>Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.</p> - <div class="note"><p><strong>Note :</strong> étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.</p></div></dd> - <dt>outerWidth</dt> - <dd>Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.</dd> - <dt>innerHeight</dt> - <dd>de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerHeight</code> comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd> - <dt>innerWidth</dt> - <dd>de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerWidth</code> comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd> -</dl> - -<h4 id="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome">Fonctionnalités de barres d'outils et de chrome</h4> - -<dl> - <dt>menubar</dt> - <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de menus. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant <code>dom.disable_window_open_feature.menubar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> - <dt>toolbar</dt> - <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant <code>dom.disable_window_open_feature.toolbar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> - <dt>location</dt> - <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant <code>dom.disable_window_open_feature.location</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>. Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs <strong>à voir dans les fenêtres pop-up</strong>. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, <strong>IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont</strong>. » provenant de <a href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Better Website Identification</a>. Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }}</p></dd> - <dt>directories</dt> - <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant<code>dom.disable_window_open_feature.directories</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> - <dt>personalbar</dt> - <dd>Similaire à <var>directories</var>, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.</dd> - <dt>status</dt> - <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 (<a href="#Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur la barre d'état avec XP SP2</a>) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.</dd> -</dl> - -<h4 id="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre">Fonctionnalités relatives à la fenêtre</h4> - -<dl> - <dt>resizable</dt> - <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire sera redimensionnable À partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état. Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})</p> -<div class="note"> -<p><strong>Note :</strong> pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p> -</div> - <p>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant <code>dom.disable_window_open_feature.resizable</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p> -</dd> - <dt>scrollbars</dt> - <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.</p> -<div class="note"> -<p><strong>Note :</strong> pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p> -</div> -<p>Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant <code>dom.disable_window_open_feature.scrollbars</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> - <dt>dependent</dt> - <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode <code>showModelessDialog()</code>.</dd> - <dt>modal</dt> - <dd><p><strong>Note</strong> : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à <code>dependent</code>. Si définie à <var>yes</var>, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la <a href="fr/DOM/window.alert">fonction alert()</a>. Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode <code>showModalDialog()</code>.</p></dd> - <dt>dialog</dt> - <dd><p>La fonctionnalité <code>dialog</code> retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de<em>sheets</em>.</p></dd> - <dt>minimizable</dt> - <dd><p>Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite <code>dialog=yes</code>. Si <code>minimizable</code> est défini à <var>yes</var>, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.</p></dd> - <dt>fullscreen</dt> - <dd><p>Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. <code>fullscreen</code> ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec <code>fullscreen</code> est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. <code>fullscreen</code> ne fonctionne plus vraiment dans Internet Explorer 6 SP2.</p></dd> -</dl> - -<h4 id="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges">Fonctionnalités nécessitant des privilèges</h4> - -<p>Les fonctionnalités suivantes nécessitent le privilège <code>UniversalBrowserWrite</code>, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le <a href="fr/PrivilegeManager">PrivilegeManager</a>.</p> - -<dl> - <dt>chrome</dt> - <dd><p><strong>Note</strong> : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à <var>yes</var>, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).</p></dd> - <dt>titlebar</dt> - <dd><p>Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à <var>no</var>, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant<code>dom.disable_window_open_feature.titlebar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> - <dt>alwaysRaised</dt> - <dd>Si défini à <var>yes</var>, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.</dd> - <dt>alwaysLowered</dt> - <dd><p>Si défini à <var>yes</var>, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.</p></dd> - <dt>z-lock</dt> - <dd>Identique à <code>alwaysLowered</code>.</dd> - <dt>close</dt> - <dd><p>Lorsque défini à <var>no</var>, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité <code>dialog</code> activée). <code>close=no</code> a précédence sur <code>minimizable=yes</code>.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant <code>dom.disable_window_open_feature.close</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> -</dl> - -<p>Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de <var>yes</var> (oui) ou <var>no</var> (non) ; il est également possible d'utiliser <var>1</var> à la place de <var>yes</var> et <var>0</var> à la place de <var>no</var>. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne <var>strWindowFeatures</var>. Si vous fournissez le paramètre <var>strWindowFeatures</var>, les fonctionnalités <code>titlebar</code> et <code>close</code> sont toujours à <var>yes</var> par défaut, mais les autres fonctionnalités présentant un choix <var>yes</var>/<var>no</var> seront à <var>no</var> par défaut et seront donc désactivées.</p> - -<p>Exemple :</p> - -<pre class="brush: html"><script type="text/javascript"> +} +``` + +Si une fenêtre du nom _strWindowName_ existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, _strUrl_ est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et _strWindowFeatures_ est ignorée. Fournir une chaîne vide pour _strUrl_ est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de `window.open()`, il faut utiliser la nom réservé _\_blank_ pour _strWindowName_. + +> **Note :** À propos de l'utilisation de `window.open` pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine : Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window\.open avec le même nom va accéder à la fenêtre précédemment ouverte. Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec `window.open`). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande `HTMLElement.focus()` vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec `window.open` elles sont inconnues et` window.open('',<name>,'')` ouvrira alors des doublons. La fonction `hw=window.open('',strWindowName ,'')` est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints. + +_strWindowFeatures_ est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si _strWindowName_ ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre _strWindowFeatures_ (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale. + +Si le paramètre _strWindowFeatures_ est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment. + +Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également. + +**Si le paramètre _strWindowFeatures_ est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées** (à l'exception de _titlebar_ et _close_ qui sont par défaut à _yes_). + +> **Note :** Si vous utilisez le paramètre _strWindowFeatures_, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de _titlebar_ et _close_) seront désactivées ou enlevées. + +#### Fonctionnalités de position et de taille + +[Note sur les corrections d'erreurs de position et de dimension](#Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension) + +{{bug(176320) }} + +[Note sur les priorités](#Note_sur_les_priorit.C3.A9s) + +- left + - : Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran. +- top + - : Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran. +- height + - : Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100. +- width + - : Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100. +- screenX + - : Mozilla. +- screenY + - : Mozilla. +- outerHeight + + - : Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100. + + > **Note :** étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels. + +- outerWidth + - : Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre. +- innerHeight + - : de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur `innerHeight` comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100. +- innerWidth + - : de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur `innerWidth` comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100. + +#### Fonctionnalités de barres d'outils et de chrome + +- menubar + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre de menus. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant `dom.disable_window_open_feature.menubar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). +- toolbar + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant `dom.disable_window_open_feature.toolbar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). +- location + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }} +- directories + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant`dom.disable_window_open_feature.directories` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). +- personalbar + - : Similaire à _directories_, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla. +- status + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 ([Note sur la barre d'état avec XP SP2](#Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat)) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état. + +#### Fonctionnalités relatives à la fenêtre + +- resizable + + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire sera redimensionnable À partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état. Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }}) + + > **Note :** pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à _yes_. + + Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant `dom.disable_window_open_feature.resizable` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). + +- scrollbars + + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre. + + > **Note :** pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à _yes_. + + Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant `dom.disable_window_open_feature.scrollbars` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). + +- dependent + - : Si définie à _yes_, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode `showModelessDialog()`. +- modal + - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la [fonction alert()](fr/DOM/window.alert). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode `showModalDialog()`. +- dialog + - : La fonctionnalité `dialog` retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de*sheets*. +- minimizable + - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée. +- fullscreen + - : Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. `fullscreen` ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec `fullscreen` est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. `fullscreen` ne fonctionne plus vraiment dans Internet Explorer 6 SP2. + +#### Fonctionnalités nécessitant des privilèges + +Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite`, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le [PrivilegeManager](fr/PrivilegeManager). + +- chrome + - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon). +- titlebar + - : Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à _no_, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant`dom.disable_window_open_feature.titlebar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). +- alwaysRaised + - : Si défini à _yes_, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non. +- alwaysLowered + - : Si défini à _yes_, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir. +- z-lock + - : Identique à `alwaysLowered`. +- close + - : Lorsque défini à _no_, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité `dialog` activée). `close=no` a précédence sur `minimizable=yes`.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant `dom.disable_window_open_feature.close` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). + +Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées. + +Exemple : + +```html +<script type="text/javascript"> var WindowObjectReference; // variable globale function openRequestedPopup() { @@ -182,14 +179,15 @@ function openRequestedPopup() { "NomDeFenetreDescriptif", "width=420,height=230,resizable,scrollbars=yes,status=1"); } -</script> -</pre> +</script> +``` -<p>Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.</p> +Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite. -<h3 id="Bonnes_pratiques">Bonnes pratiques</h3> +### Bonnes pratiques -<pre class="brush: html"><script type="text/javascript"> +```html +<script type="text/javascript"> var WindowObjectReference = null; // variable globale function openFFPromotionPopup() { @@ -210,25 +208,26 @@ function openFFPromotionPopup() { ou de recharger la ressource référencée. */ }; } -</script> +</script> (...) -<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir -l'adoption de Firefox</a></p> -</pre> +<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir +l'adoption de Firefox</a></p> +``` -<p>Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (<em>usability</em> ) relatif aux liens ouvrant des fenêtres secondaires. Le but du <code>return false</code> dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ».</p> +Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ». -<p>Plus d'informations sur l'utilisation de l'attribut target :</p> +Plus d'informations sur l'utilisation de l'attribut target : -<p><a href="http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2">HTML 4.01, section 16.3.2 La sémantique de cible</a></p> +[HTML 4.01, section 16.3.2 La sémantique de cible](http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2) -<p><a href="http://www.htmlhelp.com/fr/faq/html/links.html#new-window">Comment créer un lien qui ouvre une nouvelle fenêtre?</a></p> +[Comment créer un lien qui ouvre une nouvelle fenêtre?](http://www.htmlhelp.com/fr/faq/html/links.html#new-window) -<p>Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :</p> +Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web : -<pre class="brush: html"><script type="text/javascript"> +```html +<script type="text/javascript"> var WindowObjectReference = null; // variable globale function openRequestedPopup(strUrl, strWindowName) { @@ -240,15 +239,16 @@ function openRequestedPopup(strUrl, strWindowName) { WindowObjectReference.focus(); }; } -</script> +</script> (...) -<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p> -</pre> +<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p> +``` -<p>Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière :</p> +Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière : -<pre class="brush: html"><script type="text/javascript"> +```html +<script type="text/javascript"> var WindowObjectReference = null; // variable globale var PreviousUrl; /* variable globale qui stockera l'URL actuellement chargée dans la fenêtre secondaire */ @@ -277,242 +277,222 @@ function openRequestedSinglePopup(strUrl) /* explication : on stocke l'URL courante afin de pouvoir la comparer dans le cas d'un autre appel à cette fonction. */ } -</script> +</script> (...) -<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName" +<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName" onclick="openRequestedSinglePopup(this.href); return false;" -title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir -l'adoption de Firefox</a></p> -<p><a href="http://www.mozilla.org/support/firefox/faq" +title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir +l'adoption de Firefox</a></p> +<p><a href="http://www.mozilla.org/support/firefox/faq" target="SingleSecondaryWindowName" onclick="openRequestedSinglePopup(this.href); return false;" -title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">FAQ -de Firefox</a></p> -</pre> +title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">FAQ +de Firefox</a></p> +``` -<h3 id="FAQ">FAQ</h3> +### FAQ -<dl> - <dt>Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?</dt> - <dd>Vous ne pouvez pas. <strong>La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.</strong> La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : <code>"Scripts may not close windows that were not opened by script."</code> Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. <a href="fr/DOM/window.close">Plus de détails sur la méthode window.close()</a></dd> - <dt>Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?</dt> - <dd>Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode <a href="fr/DOM/window.focus">focus()</a>. Il n'y a pas d'autre manière fiable. Un <a href="#Bonnes_pratiques">exemple montrant comment utiliser la méthode focus()</a> est présenté ci-dessus.</dd> - <dt>Comment forcer une fenêtre à être agrandie/maximisée ?</dt> - <dd>Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.</dd> - <dt>Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?</dt> - <dd>Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans <code>about:config</code>. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à <code>yes</code> pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.</dd> - <dt>Comment redimensionner une fenêtre en fonction de son contenu ?</dt> - <dd><p>Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case <code>Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes</code> dans Mozilla ou <code>Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes</code> dans Firefox, ou en positionnant <code>dom.disable_window_move_resize</code> à <var>true</var> dans <kbd>about:config</kbd> ou encore en éditant leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>. En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.</p><p>La méthode <a href="fr/DOM/window.sizeToContent">sizeToContent()</a> de l'objet window est également désactivée si l'utilisateur décoche la préférence <code>Déplacer ou redimensionner des fenêtres existantes</code>. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.</p></dd> - <dt>Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?</dt> - <dd>Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. <a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">propriété target du module CSS3 hyperlien</a> pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.</dd> - <dt>Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?</dt> - <dd>Vous pouvez tester l'existence de la référence à l'objet <code>window</code>, qui est la valeur renvoyée en cas de succès de l'appel à <code>window.open()</code>, et vérifier ensuite que la valeur renvoyée par <var>WindowObjectReference</var>.closed est bien <var>false</var>.</dd> - <dt>Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?</dt> - <dd>Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par <code>window.open()</code> : elle sera <var>null</var> si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.</dd> - <dt>Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?</dt> - <dd>La valeur renvoyée par la méthode <code>window.open()</code> est la propriété <a href="fr/DOM/window.opener">opener</a>. La variable <var>WindowObjectReference</var> lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé <code>opener</code> liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).</dd> - <dt>Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property <property_name or method_name> ». Pourquoi cela ?</dt> - <dd><p>Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée<em>Same Origin Policy</em> , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) <strong>ne peut pas obtenir ou modifier</strong> des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : <a href="http://www.mozilla.org/projects/security/components/same-origin.html">http://www.mozilla.org/projects/secu...me-origin.html</a></p></dd> -</dl> +- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ? + - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close) +- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ? + - : Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode [focus()](fr/DOM/window.focus). Il n'y a pas d'autre manière fiable. Un [exemple montrant comment utiliser la méthode focus()](#Bonnes_pratiques) est présenté ci-dessus. +- Comment forcer une fenêtre à être agrandie/maximisée ? + - : Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter. +- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ? + - : Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans `about:config`. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à `yes` pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs. +- Comment redimensionner une fenêtre en fonction de son contenu ? -<h3 id="Probl.C3.A8mes_d.27utilisabilit.C3.A9">Problèmes d'utilisabilité</h3> + - : Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case `Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes` dans Mozilla ou `Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes` dans Firefox, ou en positionnant `dom.disable_window_move_resize` à _true_ dans <kbd>about:config</kbd> ou encore en éditant leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects. -<h4 id=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29">Évitez de recourir à <code>window.open()</code></h4> + La méthode [sizeToContent()](fr/DOM/window.sizeToContent) de l'objet window est également désactivée si l'utilisateur décoche la préférence `Déplacer ou redimensionner des fenêtres existantes`. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai. -<p>De manière générale, il est préférable d'éviter d'utiliser <code>window.open()</code> pour plusieurs raisons :</p> +- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ? + - : Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. [K-meleon 1.1](http://kmeleon.sourceforge.net/), un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la [propriété target du module CSS3 hyperlien](http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0) pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur. +- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ? + - : Vous pouvez tester l'existence de la référence à l'objet `window`, qui est la valeur renvoyée en cas de succès de l'appel à `window.open()`, et vérifier ensuite que la valeur renvoyée par _WindowObjectReference_.closed est bien _false_. +- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ? + - : Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par `window.open()` : elle sera _null_ si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable. +- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ? + - : La valeur renvoyée par la méthode `window.open()` est la propriété [opener](fr/DOM/window.opener). La variable _WindowObjectReference_ lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé `opener` liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture). +- Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property \<property_name or method_name> ». Pourquoi cela ? + - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html) -<ul> - <li>Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets.</li> - <li>Il existe à présent <a href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update">plusieurs extensions à Mozilla</a> (comme Multizilla) et <a href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing">à Firefox</a> (comme <a href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158">Tabbrowser preferences</a>), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à <code>window.open()</code> en ouvertures d'onglets, et sur la neutralisation des appels à <code>window.open()</code>. En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.</li> - <li>Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable.</li> - <li>L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres.</li> -</ul> +### Problèmes d'utilisabilité -<h4 id="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations">Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations</h4> +#### Évitez de recourir à `window.open()` -<p>Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :</p> +De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons : -<h5 id="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E">N'utilisez <em>jamais</em> ce format de code pour les liens :<br> - <code><a href="javascript:window.open(...)" ...></code></h5> +- Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets. +- Il existe à présent [plusieurs extensions à Mozilla](https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update) (comme Multizilla) et [à Firefox](https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing) (comme [Tabbrowser preferences](https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158)), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à `window.open()` en ouvertures d'onglets, et sur la neutralisation des appels à `window.open()`. En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs. +- Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable. +- L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres. -<p>Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.</p> +#### Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations -<ul> - <li>Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé.</li> - <li>Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc.</li> - <li>Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche.</li> - <li>Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les <abbr>PDA</abbr> ou les navigateurs pour mobiles).</li> - <li>Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs.</li> - <li>Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens.</li> -</ul> +Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées : -<p><strong>Plus d'informations à ce sujet :</strong></p> +##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>` -<ul> - <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, Décembre 2002</li> - <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, Février 2002</li> - <li><a href="http://jibbering.com/faq/#FAQ4_24">FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"</a></li> -</ul> +Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs. -<h5 id="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">N'utilisez jamais <code><a href="#" onclick="window.open(...);"></code></h5> +- Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé. +- Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc. +- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche. +- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles). +- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs. +- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens. -<p>Un tel pseudo-lien met également en péril l'accessibilité des liens. <strong>Utilisez toujours une véritable URL pour la valeur de l'attribut href</strong>, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.</p> +**Plus d'informations à ce sujet :** -<h5 id="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire">Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire</h5> +- [Top Ten Web-Design Mistakes of 2002](http://www.useit.com/alertbox/20021223.html), 6. JavaScript in Links, Jakob Nielsen, Décembre 2002 +- [Links & JavaScript Living Together in Harmony](http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/), Jeff Howden, Février 2002 +- [FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"](http://jibbering.com/faq/#FAQ4_24) -<p>Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut <code>title</code> du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.</p> +##### N'utilisez jamais `<a href="#" onclick="window.open(...);">` -<p>Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable).</p> +Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc. -<blockquote> -<p>« Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton<em>Précédente</em> grisé. »<br> - citation de <a href="http://www.useit.com/alertbox/990530.html">The Top Ten<em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999</p> -</blockquote> +##### Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire -<p>Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).</p> +Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut `title` du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris. -<p><strong>Références</strong></p> +Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable). -<ul> - <li>« Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> - <li>« Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, octobre 1999</li> - <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, janvier 1998</li> -</ul> +> « Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton*Précédente* grisé. » +> citation de [The Top Ten*New* Mistakes of Web Design](http://www.useit.com/alertbox/990530.html): 2. Opening New Browser Windows, Jakob Nielsen, mai 1999 -<h5 id="Utilisez_toujours_l.27attribut_target">Utilisez toujours l'attribut target</h5> +Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non). -<p>Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — <strong>sans l'imposer</strong> — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.</p> +**Références** -<h5 id="N.27utilisez_pas_target.3D.22_blank.22">N'utilisez pas <code>target="_blank"</code></h5> +- « Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm) +- « Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999 +- [Using Link Titles to Help Users Predict Where They Are Going](http://www.useit.com/alertbox/980111.html), Jakob Nielsen, janvier 1998 -<p>Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.</p> +##### Utilisez toujours l'attribut target -<p>Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).</p> +Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — **sans l'imposer** — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale. -<h3 id="Glossaire">Glossaire</h3> +##### N'utilisez pas `target="_blank"` -<dl> - <dt>Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre</dt> - <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.</dd> - <dt>Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre</dt> - <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.</dd> - <dt>Fenêtres popup non sollicitées</dt> - <dd>Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.</dd> -</dl> +Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées. -<h3 id="Sp.C3.A9cification">Spécification</h3> +Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur). -<p>{{ DOM0() }} <code>window.open()</code> ne fait partie d'aucune spécification ou recommandation technique du <abbr>W3C</abbr>.</p> +### Glossaire -<h3 id="Notes">Notes</h3> +- Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre + - : Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre. +- Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre + - : Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée. +- Fenêtres popup non sollicitées + - : Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur. -<h4 id="Note_sur_les_priorit.C3.A9s">Note sur les priorités</h4> +### Spécification -<p>Dans les cas où <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) ont des valeurs contradictoires, <code>left</code> et <code>top</code> ont priorité sur <code>screenX</code> et <code>screenY</code> respectivement. Si <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) sont définies dans la liste <var>strWindowFeatures</var>, les valeurs <code>left</code> (et/ou <code>top</code>) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.</p> +{{ DOM0() }} `window.open()` ne fait partie d'aucune spécification ou recommandation technique du W3C. -<pre class="brush: html"><script type="text/javascript"> +### Notes + +#### Note sur les priorités + +Dans les cas où `left` et `screenX` (et/ou `top` et `screenY`) ont des valeurs contradictoires, `left` et `top` ont priorité sur `screenX` et `screenY` respectivement. Si `left` et `screenX` (et/ou `top` et `screenY`) sont définies dans la liste _strWindowFeatures_, les valeurs `left` (et/ou `top`) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels. + +```html +<script type="text/javascript"> WindowObjectReference = window.open("http://www.lemonde.fr/", "NomDeLaFenetreLeMonde", "left=100,screenX=200,resizable,scrollbars,status"); -</script> -</pre> +</script> +``` -<p>Si <code>left</code> est défini, mais que <code>top</code> n'a aucune valeur mais que <code>screenY</code> en a une, <code>left</code> et <code>screenY</code> seront les coordonnées de positionnement de la fenêtre secondaire.</p> +Si `left` est défini, mais que `top` n'a aucune valeur mais que `screenY` en a une, `left` et `screenY` seront les coordonnées de positionnement de la fenêtre secondaire. -<p><code>outerWidth</code> a priorité sur <code>width</code>, et <code>width</code> a priorité sur <code>innerWidth</code>. <code>outerHeight</code> a priorité sur <code>height</code> et <code>height</code> a priorité sur <code>innerHeight</code>. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels.</p> +`outerWidth` a priorité sur `width`, et `width` a priorité sur `innerWidth`. `outerHeight` a priorité sur `height` et `height` a priorité sur `innerHeight`. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels. -<pre class="brush: html"><script type="text/javascript"> +```html +<script type="text/javascript"> WindowObjectReference = window.open("http://www.wwf.org/", "NomDeLaFenetreWWF", "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"); -</script> -</pre> - -<h4 id="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</h4> +</script> +``` -<p>Les positions et dimensions demandées dans la liste <var>strWindowFeatures</var> ne seront pas respectées et <strong>seront corrigées</strong> si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. <strong>Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.</strong></p> +#### Note sur les corrections d'erreurs de position et de dimension -<p><a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire</a>, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.</p> +Les positions et dimensions demandées dans la liste _strWindowFeatures_ ne seront pas respectées et **seront corrigées** si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. **Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.** -<h4 id="Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</h4> +[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs. -<p>Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :</p> +#### Note sur les barres de défilement -<ul> - <li>l'utilisateur a redimensionné la fenêtre</li> - <li>l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox</li> - <li>l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla.</li> - <li>l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud <code>body</code> dans les différents navigateurs et versions de ceux-ci</li> - <li>l'utilisateur utilise une feuille de style utilisateur (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)</li> - <li>l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation</li> - <li>l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc.</li> - <li>l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier</li> - <li>l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc.</li> - <li>certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation</li> -</ul> +Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web : -<h4 id="Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</h4> +- l'utilisateur a redimensionné la fenêtre +- l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox +- l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla. +- l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud `body` dans les différents navigateurs et versions de ceux-ci +- l'utilisateur utilise une feuille de style utilisateur ([userContent.css in Mozilla-based browsers](http://www.mozilla.org/support/firefox/edit#content)) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut) +- l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation +- l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc. +- l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier +- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc. +- certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation -<p>Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec <abbr>SSL</abbr> (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. <strong>Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.</strong></p> +#### Note sur la barre d'état -<h4 id="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur les problèmes de sécurité liés à la présence de la barre d'état</h4> +Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. **Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.** -<p>Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de <code>window.open()</code> :</p> +#### Note sur les problèmes de sécurité liés à la présence de la barre d'état -<blockquote> -<p>« Pour les fenêtres ouvertes à l'aide de <code>window.open()</code> :<br> - Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. <strong>La barre d'état sera activée par défaut</strong> et fait entre 20 et 25 pixels de haut. (...) »<br> - citation de <a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p> -</blockquote> +Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` : -<blockquote> -<p>« (...) les fenêtres créées à l'aide de la méthode <code>window.open()</code> peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible.<br> - Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...)<br> - <strong>Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.</strong> (...)<br> - Gestion de la barre d'état d'Internet Explorer par les scripts<br> - Description détaillée<br> - <strong>Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer.</strong> (...) Sans ce changement, les fenêtres créées à l'aide de la méthode <code>window.open()</code> peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.<br> - La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"<br> - citation de <a href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p> -</blockquote> +> « Pour les fenêtres ouvertes à l'aide de `window.open()` : +> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) » +> citation de [Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) -<h4 id="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur le plein écran (fullscreen)</h4> +> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible. +> Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...) +> **Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.** (...) +> Gestion de la barre d'état d'Internet Explorer par les scripts +> Description détaillée +> **Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer.** (...) Sans ce changement, les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur. +> La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)" +> citation de [Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions](http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA) -<p>Dans Internet Explorer 6 pour XP SP2 :</p> +#### Note sur le plein écran (fullscreen) -<ul> - <li>« <code>window.open()</code> avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. »</li> - <li>« La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. »</li> -</ul> +Dans Internet Explorer 6 pour XP SP2 : -<p><em>Références :</em></p> +- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. » +- « La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. » -<ul> - <li><a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li> - <li><a href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li> -</ul> +_Références :_ -<h4 id="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height</h4> +- [Fine-Tune Your Web Site for Windows XP Service Pack 2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) +- [Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows](http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA) +#### Note sur la différence entre outerHeight et height -<h3 id="Tutoriels">Tutoriels</h3> +### Tutoriels -<p><strong>en français :</strong></p> +**en français :** -<p><a href="http://openweb.eu.org/articles/popup/">Créer des pop-up intelligentes</a> par Fabrice Bonny, OpenWeb</p> +[Créer des pop-up intelligentes](http://openweb.eu.org/articles/popup/) par Fabrice Bonny, OpenWeb -<p><strong>en anglais :</strong></p> +**en anglais :** -<p><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> par Lasse Reichstein Nielsen</p> +[JavaScript windows (tutorial)](http://www.infimum.dk/HTML/JSwindows.html) par Lasse Reichstein Nielsen -<p><a href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> par Ian Lloyd</p> +[The perfect pop-up (tutorial)](http://www.accessify.com/tutorials/the-perfect-pop-up.asp) par Ian Lloyd -<p><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> par Gérard Talbot</p> +[Popup windows and Firefox (interactive demos)](http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html) par Gérard Talbot -<h3 id="R.C3.A9f.C3.A9rences">Références</h3> +### Références -<p><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p> +[Links Want To Be Links](http://www.cs.tut.fi/~jkorpela/www/links.html) by Jukka K. Korpela -<p><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</p> +[Links & JavaScript Living Together in Harmony](http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/) by Jeff Howden diff --git a/files/fr/web/api/window/opendialog/index.md b/files/fr/web/api/window/opendialog/index.md index 7449c15b30..ce81137926 100644 --- a/files/fr/web/api/window/opendialog/index.md +++ b/files/fr/web/api/window/opendialog/index.md @@ -8,95 +8,98 @@ tags: - boîte de dialogue translation_of: Web/API/Window/openDialog --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p><code>window.openDialog</code> est une extension à <a href="/fr/DOM/window.open">window.open()</a>. Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après<code>windowFeatures</code>, et que<code>windowFeatures</code> est traîté différemment.</p> +`window.openDialog` est une extension à [window.open()](/fr/DOM/window.open). Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après`windowFeatures`, et que`windowFeatures` est traîté différemment. -<p>Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété <code>window.arguments</code>. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement<code>load</code> . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.</p> +Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété `window.arguments`. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement`load` . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite. -<p>Notez que l'appel à la méthode<code>openDialog()</code> se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur<code>modal</code> pour le paramètre f<code>eatures</code>. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.</p> +Notez que l'appel à la méthode`openDialog()` se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur`modal` pour le paramètre f`eatures`. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale. -<h3 id="Syntax">Syntaxe</h3> +### Syntaxe -<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...) -</pre> + newWindow = openDialog(url, name, features, arg1, arg2, ...) -<dl> - <dt>newWindow</dt> - <dd>La nouvelle fenêtre ouverte.</dd> - <dt>url</dt> - <dd>L'URL du document à charger dans la nouvelle fenêtre.</dd> - <dt>name</dt> - <dd>Le nom de la fenêtre (optionnel). Voir la description de<a href="/fr/DOM/window.open">window.open()</a> pour plus de détails.</dd> - <dt>features</dt> - <dd>Voir la description de<a href="/fr/DOM/window.open">window.open()</a> pour la description.</dd> - <dt>arg1, arg2, ... </dt> - <dd>Les arguments à passer à la nouvelle fenêtre (optionnel).</dd> -</dl> +- newWindow + - : La nouvelle fenêtre ouverte. +- url + - : L'URL du document à charger dans la nouvelle fenêtre. +- name + - : Le nom de la fenêtre (optionnel). Voir la description de[window.open()](/fr/DOM/window.open) pour plus de détails. +- features + - : Voir la description de[window.open()](/fr/DOM/window.open) pour la description. +- arg1, arg2, ... + - : Les arguments à passer à la nouvelle fenêtre (optionnel). -<h3 id="Example">Exemple</h3> +### Exemple -<pre class="brush: js">var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre> +```js +var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); +``` -<h3 id="Notes">Notes</h3> +### Notes -<h4 id="New_Features">Nouvelles fonctionnalités</h4> +#### Nouvelles fonctionnalités -<dl> - <dt><code>all</code></dt> - <dd>Active ou désactive (<code>"all=no"</code>) toutes les fonctionnalités (excepté <code>chrome</code>, <code>dialog</code> et<code>modal</code>). Peut être utilisé conjointement avec les autres drapeaux (par exemple, <code>"menubar=no, all"</code> active toutes les fonctionnalités excepté <code>menubar</code>). Ce drapeau est ignorée par la méthode<a href="/fr/DOM/window.open">window.open()</a> mais pas par <code>window.openDialog()</code>.</dd> -</dl> +- `all` + - : Active ou désactive (`"all=no"`) toutes les fonctionnalités (excepté `chrome`, `dialog` et`modal`). Peut être utilisé conjointement avec les autres drapeaux (par exemple, `"menubar=no, all"` active toutes les fonctionnalités excepté `menubar`). Ce drapeau est ignorée par la méthode[window.open()](/fr/DOM/window.open) mais pas par `window.openDialog()`. -<h4 id="Default_behaviour">Comportement</h4> +#### Comportement -<p>La méthode<code>window.openDialog()</code> traite l'absence du paramètre<code>features</code> de la même manière que<a href="/fr/DOM/window.open">window.open()</a> (une chaîne vide désactive toutes les fonctionnalités) excepté pour<code>chrome</code> et<code>dialog</code> qui sont activés par défaut et peuvent être explicitement désactivées par "<code>chrome=no</code>".</p> +La méthode`window.openDialog()` traite l'absence du paramètre`features` de la même manière que[window.open()](/fr/DOM/window.open) (une chaîne vide désactive toutes les fonctionnalités) excepté pour`chrome` et`dialog` qui sont activés par défaut et peuvent être explicitement désactivées par "`chrome=no`". -<h4 id="Passing_extra_parameters_to_the_dialog">Passage de paramètres supplémentaires</h4> +#### Passage de paramètres supplémentaires -<p>Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f<code>eatures</code> :</p> +Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f`eatures` : -<pre class="brush: js">openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre> +```js +openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); +``` -<p>Ces paramètres seront ensuite regroupés dans une propriété <code>arguments</code> de type<a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.</p> +Ces paramètres seront ensuite regroupés dans une propriété `arguments` de type[Array](/en/Core_JavaScript_1.5_Reference/Global_Objects/Array), et cette propriété sera ajoutée à la nouvelle boîte de dialogue. -<p>Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :</p> +Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant : -<pre class="brush: js">var food = window.arguments[0]; -var price = window.arguments[1];</pre> +```js +var food = window.arguments[0]; +var price = window.arguments[1]; +``` -<p>Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).</p> +Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. ([Autre exemple](/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog)). -<h4 id="Returning_values_from_the_dialog">Retourner des arguments depuis la boîte de dialogue</h4> +#### Retourner des arguments depuis la boîte de dialogue -<p>Depuis que<code><a href="/fr/DOM/window.close">window.close()</a></code> efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).</p> +Depuis que[`window.close()`](/fr/DOM/window.close) efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode). -<p>Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode<code>window.close()</code>.</p> +Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode`window.close()`. -<pre class="brush: js">var retVals = { address: null, delivery: null }; -openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);</pre> +```js +var retVals = { address: null, delivery: null }; +openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals); +``` -<p>Si vous modifiez les propriétés de l'objet<code>retVals</code> depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau<code>retVals</code> après l'appel à <code>openDialog()</code>.</p> +Si vous modifiez les propriétés de l'objet`retVals` depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau`retVals` après l'appel à `openDialog()`. -<p>Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :</p> +Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit : -<pre class="brush: js">var retVals = window.arguments[2]; +```js +var retVals = window.arguments[2]; retVals.address = enteredAddress; -retVals.delivery = "immediate";</pre> +retVals.delivery = "immediate"; +``` -<p>Voir aussi<a href="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40">ce message</a>. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).<br> - Voir aussi<a href="/fr/DOM/window.importDialog">window.importDialog()</a>.</p> +Voir aussi[ce message](http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40). ([Autre exemple](/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog)). +Voir aussi[window.importDialog()](/fr/DOM/window.importDialog). -<h3 id="Specification">Spécification</h3> +### Spécification -<p>{{ DOM0() }}</p> +{{ DOM0() }} -<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3> +### Compatibilité des navigateurs -<p>{{Compat("api.Window.openDialog")}}</p> +{{Compat("api.Window.openDialog")}} -<h3 id="Voir_également">Voir également</h3> +### Voir également -<ul> - <li><a href="/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a></li> - <li><a href="/en-US/docs/Archive/Web/Window.importDialog"><code>window.importDialog</code></a> (mobile) {{obsolete_inline}}</li> -</ul>
\ No newline at end of file +- [Another example](/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog) +- [`window.importDialog`](/en-US/docs/Archive/Web/Window.importDialog) (mobile) {{obsolete_inline}} diff --git a/files/fr/web/api/window/opener/index.md b/files/fr/web/api/window/opener/index.md index d1dd3486ce..bee987dab6 100644 --- a/files/fr/web/api/window/opener/index.md +++ b/files/fr/web/api/window/opener/index.md @@ -7,18 +7,26 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/opener --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval"><i>refObj</i> = window.opener -</pre> -<h3 id="Exemple">Exemple</h3> -<pre> if window.opener != indexWin { - referToTop(window.opener); - } -</pre> -<h3 id="Notes">Notes</h3> -<p>Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans <code>window.opener</code>. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie <code>null</code>.</p> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }}</p>
\ No newline at end of file +{{ ApiRef() }} + +### Résumé + +Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante. + +### Syntaxe + + refObj = window.opener + +### Exemple + + if window.opener != indexWin { + referToTop(window.opener); + } + +### Notes + +Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans `window.opener`. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie `null`. + +### Spécification + +{{ DOM0() }} diff --git a/files/fr/web/api/window/orientation/index.md b/files/fr/web/api/window/orientation/index.md index dfe5477598..bd13b9a9ee 100644 --- a/files/fr/web/api/window/orientation/index.md +++ b/files/fr/web/api/window/orientation/index.md @@ -3,33 +3,20 @@ title: Window.orientation slug: Web/API/Window/orientation translation_of: Web/API/Window/orientation --- -<div>{{APIRef}}{{deprecated_header}}</div> +{{APIRef}}{{deprecated_header}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil.</p> +Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil. -<p>Les seules valeurs possibles sont <code>-90</code>, <code>0</code>, <code>90</code>, et <code>180</code>. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire.</p> +Les seules valeurs possibles sont `-90`, `0`, `90`, et `180`. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#dom-window-orientation', 'Window.orientation')}}</td> - <td>{{Spec2('Compat')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------ | +| {{SpecName('Compat', '#dom-window-orientation', 'Window.orientation')}} | {{Spec2('Compat')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.orientation")}}</p> +{{Compat("api.Window.orientation")}} diff --git a/files/fr/web/api/window/outerheight/index.md b/files/fr/web/api/window/outerheight/index.md index 53b6f0637a..892db6a5cb 100644 --- a/files/fr/web/api/window/outerheight/index.md +++ b/files/fr/web/api/window/outerheight/index.md @@ -3,60 +3,44 @@ title: Window.outerHeight slug: Web/API/Window/outerHeight translation_of: Web/API/Window/outerHeight --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><code>Window.outerHeight</code> retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.</p> +`Window.outerHeight` retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles. -<p>Cette propriété n'a pas de valeur par défaut.</p> +Cette propriété n'a pas de valeur par défaut. -<p>Syntaxe</p> +Syntaxe -<pre class="syntaxbox"><var>outWindowHeight</var> = window.outerHeight; -</pre> + outWindowHeight = window.outerHeight; -<p>La valeur retournée correspond à la hauteur extérieure de la fenêtre.</p> +La valeur retournée correspond à la hauteur extérieure de la fenêtre. -<h2 id="Notes">Notes</h2> +## Notes -<p>Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</p> +Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. -<p>Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.</p> +Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}. -<h3 id="Graphical_example">Exemple illustré</h3> +### Exemple illustré -<p>La figure suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p> +La figure suivante montre la différence entre `outerHeight` et `innerHeight`. -<p><img alt="innerHeight vs outerHeight illustration" src="FirefoxInnerVsOuterHeight2.png"></p> + -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }} | {{ Spec2('CSSOM View') }} | | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.outerHeight")}}</p> +{{Compat("api.Window.outerHeight")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.innerHeight")}}</li> - <li>{{domxref("window.innerWidth")}}</li> - <li>{{domxref("window.outerWidth")}}</li> - <li>{{domxref("window.resizeBy()")}}</li> - <li>{{domxref("window.resizeTo()")}}</li> -</ul> +- {{domxref("window.innerHeight")}} +- {{domxref("window.innerWidth")}} +- {{domxref("window.outerWidth")}} +- {{domxref("window.resizeBy()")}} +- {{domxref("window.resizeTo()")}} diff --git a/files/fr/web/api/window/outerwidth/index.md b/files/fr/web/api/window/outerwidth/index.md index 863a26a3ab..aaeb8782da 100644 --- a/files/fr/web/api/window/outerwidth/index.md +++ b/files/fr/web/api/window/outerwidth/index.md @@ -9,51 +9,35 @@ tags: - Reference translation_of: Web/API/Window/outerWidth --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><code>Window.outerWidth</code> récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.</p> +`Window.outerWidth` récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre. -<p>Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.</p> +Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>largeurExterieureFenetre</var> = window.outerWidth; -</pre> + largeurExterieureFenetre = window.outerWidth; -<p>Lors du retour, <code>largeurExterieureFenetre</code> vaut la largeur de l'extérieur de la fenêtre.</p> +Lors du retour, `largeurExterieureFenetre` vaut la largeur de l'extérieur de la fenêtre. -<h2 id="Notes">Notes</h2> +## Notes -<p>Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.</p> +Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}. -<p>Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.</p> +Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }} | {{ Spec2('CSSOM View') }} | Définition initiale. | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.outerWidth")}}</p> +{{Compat("api.Window.outerWidth")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li> - <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li> -</ul> +- {{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}} +- {{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}} diff --git a/files/fr/web/api/window/pagehide_event/index.md b/files/fr/web/api/window/pagehide_event/index.md index 81e2c695f8..5066f6b7d5 100644 --- a/files/fr/web/api/window/pagehide_event/index.md +++ b/files/fr/web/api/window/pagehide_event/index.md @@ -4,67 +4,34 @@ slug: Web/API/Window/pagehide_event translation_of: Web/API/Window/pagehide_event original_slug: Web/Events/pagehide --- -<p>L’évènement <code>pagehide</code> est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée.</p> +L’évènement `pagehide` est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée. -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt>Spécification</dt> - <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></dd> - <dt>Interface</dt> - <dd><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> - <dt>Bouillonne</dt> - <dd>Non</dd> - <dt>Annulable</dt> - <dd>Non</dd> - <dt>Cible</dt> - <dd>Document (dispatché sur Window)</dd> - <dt>Action par défaut</dt> - <dd>Aucune</dd> -</dl> +- Spécification + - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide) +- Interface + - : [PageTransitionEvent](/fr/docs/Web/API/PageTransitionEvent) +- Bouillonne + - : Non +- Annulable + - : Non +- Cible + - : Document (dispatché sur Window) +- Action par défaut + - : Aucune -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type d’évènement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Si l’évènement bouillonne en temps normal ou non.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Si l’évènement est annulable ou non.</td> - </tr> - <tr> - <td><code>persisted</code> {{readonlyInline}}</td> - <td>{{jsxref("boolean")}}</td> - <td>Si l’entrée est chargée depuis le cache ou non.</td> - </tr> - </tbody> -</table> +| Propriété | Type | Description | +| ------------------------------------- | ------------------------------------ | --------------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | La cible de l’évènement (la plus haute dans l’arbre DOM). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | Le type d’évènement. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Si l’évènement bouillonne en temps normal ou non. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Si l’évènement est annulable ou non. | +| `persisted` {{readonlyInline}} | {{jsxref("boolean")}} | Si l’entrée est chargée depuis le cache ou non. | -<h2 id="Évènements_liés">Évènements liés</h2> +## Évènements liés -<ul> - <li><a href="/fr/docs/Web/Events/pageshow"><code>pageshow</code></a></li> - <li><a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pagehide">Utilisation du cache de Firefox 1.5 — L’évènement pagehide</a></li> -</ul> +- [`pageshow`](/fr/docs/Web/Events/pageshow) +- [Utilisation du cache de Firefox 1.5 — L’évènement pagehide](/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pagehide) diff --git a/files/fr/web/api/window/pageshow_event/index.md b/files/fr/web/api/window/pageshow_event/index.md index 4687409333..112cdea1ba 100644 --- a/files/fr/web/api/window/pageshow_event/index.md +++ b/files/fr/web/api/window/pageshow_event/index.md @@ -4,107 +4,61 @@ slug: Web/API/Window/pageshow_event translation_of: Web/API/Window/pageshow_event original_slug: Web/Events/pageshow --- -<p>L’évènement <code>pageshow</code> est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement <code>onload</code>).</p> +L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`). -<h2 id="Informations_générales">Informations générales</h2> +## Informations générales -<dl> - <dt>Spécification</dt> - <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></dd> - <dt>Interface</dt> - <dd><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> - <dt>Bouillonne</dt> - <dd>Non</dd> - <dt>Annulable</dt> - <dd>Non</dd> - <dt>Cible</dt> - <dd>Document (dispatché sur Window)</dd> - <dt>Action par défaut</dt> - <dd>Aucune</dd> -</dl> +- Spécification + - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow) +- Interface + - : [PageTransitionEvent](/fr/docs/Web/API/PageTransitionEvent) +- Bouillonne + - : Non +- Annulable + - : Non +- Cible + - : Document (dispatché sur Window) +- Action par défaut + - : Aucune -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type d’évènement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Si l’évènement bouillonne en temps normal ou non.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Si l’évènement est annulable ou non.</td> - </tr> - <tr> - <td><code>persisted</code> {{readonlyInline}}</td> - <td>{{jsxref("boolean")}}</td> - <td>Si l’entrée est chargée depuis le cache ou non.</td> - </tr> - </tbody> -</table> +| Propriété | Type | Description | +| ------------------------------------- | ------------------------------------ | --------------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | La cible de l’évènement (la plus haute dans l’arbre DOM). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | Le type d’évènement. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Si l’évènement bouillonne en temps normal ou non. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Si l’évènement est annulable ou non. | +| `persisted` {{readonlyInline}} | {{jsxref("boolean")}} | Si l’entrée est chargée depuis le cache ou non. | -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>L’exemple suivant va afficher dans la console des informations sur l’évènement <code>pageshow</code>, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après <code>onload</code> :</p> +L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` : -<pre class="brush: js">window.addEventListener('pageshow', function(event) { +```js +window.addEventListener('pageshow', function(event) { console.log('pageshow:'); console.log(event); -});</pre> +}); +``` -<p>Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise <code><body></code>, de la même manière que <code>onload</code> :</p> +Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` : -<pre class="brush: html"><body onload="myonload()" onpageshow="mypageshowcode()"></pre> +```html +<body onload="myonload()" onpageshow="mypageshowcode()"> +``` -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Spécification initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------- | +| {{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}} | {{Spec2('HTML WHATWG')}} | Spécification initiale. | +| {{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.pageshow_event")}}</p> +{{Compat("api.Window.pageshow_event")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Window.pagehide_event", "pagehide")}}</li> -</ul> +- {{domxref("Window.pagehide_event", "pagehide")}} diff --git a/files/fr/web/api/window/parent/index.md b/files/fr/web/api/window/parent/index.md index 01da0b6b14..907a645d93 100644 --- a/files/fr/web/api/window/parent/index.md +++ b/files/fr/web/api/window/parent/index.md @@ -7,19 +7,28 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/Window/parent --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval"><i>refObj</i> = window.parent -</pre> -<h3 id="Exemple">Exemple</h3> -<pre class="eval">if (window.parent != window.top) { - // on se trouve dans une imbrication de cadres -} -</pre> -<h3 id="Notes">Notes</h3> -<p>Si une fenêtre n'a pas de parent, sa propriété <b>parent</b> est une référence vers elle-même.</p> -<p>Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément <code><frame></code> qui fait référence à la fenêtre).</p> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }}</p> +{{ ApiRef() }} + +### Résumé + +Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant. + +### Syntaxe + + refObj = window.parent + +### Exemple + + if (window.parent != window.top) { + // on se trouve dans une imbrication de cadres + } + +### Notes + +Si une fenêtre n'a pas de parent, sa propriété **parent** est une référence vers elle-même. + +Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément `<frame>` qui fait référence à la fenêtre). + +### Spécification + +{{ DOM0() }} diff --git a/files/fr/web/api/window/paste_event/index.md b/files/fr/web/api/window/paste_event/index.md index 0f215c946e..a8cc5b4a9e 100644 --- a/files/fr/web/api/window/paste_event/index.md +++ b/files/fr/web/api/window/paste_event/index.md @@ -8,64 +8,53 @@ tags: - paste translation_of: Web/API/Window/paste_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>paste</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.</p> +L'événement **`paste`** est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Yes</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Yes</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("ClipboardEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété du gestionnaire d'événements</th> - <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété du gestionnaire d'événements</th> + <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td> + </tr> + </tbody> </table> -<p>La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/paste_event">Element: paste event</a>.</p> +La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le [Element: paste event](/en-US/docs/Web/API/Element/paste_event). -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">window.addEventListener('paste', (event) => { +```js +window.addEventListener('paste', (event) => { console.log('paste action initiated') -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - </tr> - </tbody> -</table> +| Specification | Statut | +| ------------------------------------------------------------------------ | ------------------------------------ | +| {{SpecName('Clipboard API', '#clipboard-event-paste')}} | {{Spec2('Clipboard API')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.paste_event")}}</p> +{{Compat("api.Window.paste_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/copy_event", "copy")}}</li> - <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/paste_event", "paste")}}</li> - <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/paste_event", "paste")}}</li> -</ul> +- Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/copy_event", "copy")}} +- Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/paste_event", "paste")}} +- Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/paste_event", "paste")}} diff --git a/files/fr/web/api/window/popstate_event/index.md b/files/fr/web/api/window/popstate_event/index.md index 9c821b6ea9..de1e53ba98 100644 --- a/files/fr/web/api/window/popstate_event/index.md +++ b/files/fr/web/api/window/popstate_event/index.md @@ -3,73 +3,43 @@ title: popstate slug: Web/API/Window/popstate_event translation_of: Web/API/Window/popstate_event --- -<p>L'événement <code>popstate</code> est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à <code>history.pushState()</code> ou a été affectée par un appel à <code>history.replaceState()</code>, la propriété <code>state</code> de l'événement <code>popstate</code> contient une copie de l'objet <code>state</code> de l'entrée d'historique.</p> - -<p>Notez qu'un appel à <code>history.pushState()</code> ou <code>history.replaceState()</code> n'exécutera pas l'événement <code>popstate</code>. L'événement <code>popstate</code> est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler <code>history.back()</code> en JavaScript).</p> - -<p>Les navigateurs ont tendance à gérer l'événement <code>popstate</code> différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement <code>popstate</code> lors du chargement de la page, contrairement à Firefox.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">PopStateEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">defaultView</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The browsing context (<code>window</code>).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>state</code> {{readonlyInline}}</td> - <td><em>any</em></td> - <td>The current history entry's state object (if any).</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<p>Une page <code>http://example.com/example.html</code> exécutant le code suivant génèrera un journal comme spécifié :</p> - -<pre class="brush: js">window.onpopstate = function(event) { +L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique. + +Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript). + +Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox. + +## Informations générales + +- Specification + - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate) +- Interface + - : PopStateEvent +- Bubbles + - : Yes +- Cancelable + - : No +- Target + - : defaultView +- Action par défaut + - : None + +## Propriétés + +| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | -------------------------------------------------- | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The browsing context (`window`). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `state` {{readonlyInline}} | _any_ | The current history entry's state object (if any). | + +## Exemple + +Une page `http://example.com/example.html` exécutant le code suivant génèrera un journal comme spécifié : + +```js +window.onpopstate = function(event) { console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; history.pushState({page: 1}, "title 1", "?page=1"); @@ -78,34 +48,21 @@ history.replaceState({page: 3}, "title 3", "?page=3"); history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // Logs "location: http://example.com/example.html, state: null history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3} -</pre> +``` -<p>Notez que même si l'entrée d'historique originelle (pour <code>http://example.com/example.html</code>) n'a pas d'objet state associé, un événement <code>popstate</code> est tout de même exécuté lorsque nous activons cette entrée au second appel à <code>history.back()</code>.</p> +Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`. -<h2 id="Specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-popstate', 'popstate')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| -------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'indices.html#event-popstate', 'popstate')}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.popstate_event")}}</p> +{{Compat("api.Window.popstate_event")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/History_API">Manipulation de l'historique du navigateur (l'API History)</a></li> - <li><a href="/fr/docs/Web/API/Window/hashchange_event">Window : événement <code>hashchange</code></a></li> - </ul> +- [Manipulation de l'historique du navigateur (l'API History)](/fr/docs/Web/API/History_API) +- [Window : événement `hashchange`](/fr/docs/Web/API/Window/hashchange_event) diff --git a/files/fr/web/api/window/postmessage/index.md b/files/fr/web/api/window/postmessage/index.md index e7224757d7..6e474b1328 100644 --- a/files/fr/web/api/window/postmessage/index.md +++ b/files/fr/web/api/window/postmessage/index.md @@ -9,34 +9,31 @@ tags: - postMessage translation_of: Web/API/Window/postMessage --- -<div>{{ ApiRef() }}</div> +{{ ApiRef() }} -<div></div> +La méthode **`window.postMessage`** permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée. -<p>La méthode <strong><code>window.postMessage</code></strong> permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même <a href="/en-US/docs/Glossary/Origin">origine</a>, c'est-à-dire avec le même protocole (généralement <code>http</code> ou <code>https</code>), le même numéro de port (<code>80</code> étant le port par défaut pour <code>http</code>), et le même nom d'hôte (à condition que <a href="/en-US/docs/DOM/document.domain">document.domain</a> soit initialisé à la même valeur par les deux pages). <code>window.postMessage</code> fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.</p> +La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si `window.postMessage` est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type `message`, a une propriété `data` qui est initialisée à la valeur du premier argument passé à` window.postMessage`, une propriété `origin` correspondant à l'origine du document principal de la fenêtre appelant `window.postMessage` au moment où `window.postMessage` a été appelée, et une propriété `source` qui est la fenêtre depuis laquelle `window.postMessage` est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues). -<p>La méthode <code>window.postMessage</code>, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si <code>window.postMessage</code> est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type <code>message</code>, a une propriété <code>data</code> qui est initialisée à la valeur du premier argument passé à<code> window.postMessage</code>, une propriété <code>origin</code> correspondant à l'origine du document principal de la fenêtre appelant <code>window.postMessage</code> au moment où <code>window.postMessage</code> a été appelée, et une propriété <code>source</code> qui est la fenêtre depuis laquelle <code>window.postMessage</code> est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).</p> +## Syntaxe -<h2 id="Syntax">Syntaxe</h2> + otherWindow.postMessage(message, targetOrigin, [transfer]); -<pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre> +- `otherWindow` + - : Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, _via_ la propriété `contentWindow` d'un élément `iframe`, l'objet retourné par [window.open](/fr/docs/DOM/window.open), ou par index nommé ou numérique de [window.frames](/fr/docs/Web/API/window.frames). +- `message` + - : La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant [l'algorithme de clônage structuré](/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm). Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. \[1] +- `targetOrigin` + - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`, l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si `postMessage` était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.** +- `transfer` {{optional_Inline}} + - : Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur. -<dl> - <dt><code><em>otherWindow</em></code></dt> - <dd>Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, <em>via</em> la propriété <code>contentWindow</code> d'un élément <code>iframe</code>, l'objet retourné par <a href="/fr/docs/DOM/window.open">window.open</a>, ou par index nommé ou numérique de <a href="/fr/docs/Web/API/window.frames">window.frames</a>.</dd> - <dt><code><em>message</em></code></dt> - <dd>La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant <a href="/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">l'algorithme de clônage structuré</a>. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]</dd> - <dt><code><em>targetOrigin</em></code></dt> - <dd>Indique quelle doit être l'origine de <code>otherWindow</code> pour l'évènement à envoyer, soit comme la chaîne littérale <code>"*"</code> (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de <code>otherWindow</code> ne correspond pas à ceux contenus dans <code>targetOrigin</code>, l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si <code>postMessage</code> était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. <strong>Fournissez toujours une <code>targetOrigin</code> spécifique, jamais <code>*</code>, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.</strong></dd> - <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt> - <dd>Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.</dd> -</dl> +## L'évènement envoyé -<h2 id="The_dispatched_event">L'évènement envoyé</h2> +`otherWindow` peut surveiller les messages envoyés en exécutant le JavaScript suivant : -<p><code>otherWindow</code> peut surveiller les messages envoyés en exécutant le JavaScript suivant :</p> - -<pre class="brush: js">window.addEventListener("message", receiveMessage, false); +```js +window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { @@ -45,34 +42,32 @@ function receiveMessage(event) // ... } -</pre> +``` -<p>Les propriétés du message envoyé sont :</p> +Les propriétés du message envoyé sont : -<dl> - <dt><code>data</code></dt> - <dd>L'objet passé depuis l'autre fenêtre.</dd> - <dt><code>origin</code></dt> - <dd>L'<a href="/en-US/docs/Origin">origine</a> de la fenêtre qui a envoyé le message au moment où <code>postMessage</code> a été appelée. Des exemples typiques d'origines sont <code>https://example.org</code> (sous-entendu port <code>443</code>), <code>http://example.net</code> (sous-entendu port <code>80</code>), et <code>http://example.com:8080</code>. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à <code>postMessage</code>.</dd> - <dt><code>source</code></dt> - <dd>Une référence à l'objet <code><a href="/fr/docs/DOM/window">window</a></code> qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.</dd> -</dl> +- `data` + - : L'objet passé depuis l'autre fenêtre. +- `origin` + - : L'[origine](/en-US/docs/Origin) de la fenêtre qui a envoyé le message au moment où `postMessage` a été appelée. Des exemples typiques d'origines sont `https://example.org` (sous-entendu port `443`), `http://example.net` (sous-entendu port `80`), et `http://example.com:8080`. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à `postMessage`. +- `source` + - : Une référence à l'objet [`window`](/fr/docs/DOM/window) qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines. -<dl> -</dl> +<!----> -<h2 id="Security_concerns">Précautions de sécurité</h2> +## Précautions de sécurité -<p><strong>Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements <code>message</code>.</strong> C'est un moyen sûr d'éviter les problèmes de sécurité.</p> +**Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements `message`.** C'est un moyen sûr d'éviter les problèmes de sécurité. -<p>Si vous prévoyez de recevoir des messages depuis d'autres sites, <strong>vérifiez toujours l'identité de l'expéditeur</strong> à l'aide des propriétés <code>origin</code> et si possible <code>source</code>. Toute fenêtre (y compris, par exemple, <code>http://evil.example.com</code>) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez <strong>toujours vérifier la syntaxe du message reçu</strong>. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.</p> +Si vous prévoyez de recevoir des messages depuis d'autres sites, **vérifiez toujours l'identité de l'expéditeur** à l'aide des propriétés `origin` et si possible `source`. Toute fenêtre (y compris, par exemple, `http://evil.example.com`) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez **toujours vérifier la syntaxe du message reçu**. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site. -<p><strong>Spécifiez toujours explicitement une origine de destination, jamais <code>*</code>, quand vous utilisez <code>postMessage</code> pour envoyer des données à d'autres fenêtres.</strong> Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de <code>postMessage</code>.</p> +**Spécifiez toujours explicitement une origine de destination, jamais `*`, quand vous utilisez `postMessage` pour envoyer des données à d'autres fenêtres.** Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de `postMessage`. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">/* - * Dans les scripts de la fenêtre A, avec A sur <http://example.com:8080>: +```js +/* + * Dans les scripts de la fenêtre A, avec A sur <http://example.com:8080>: */ var popup = window.open(...popup details...); @@ -98,10 +93,11 @@ function receiveMessage(event) // event.data est "hi there yourself! the secret response is: rheeeeet!" } window.addEventListener("message", receiveMessage, false); -</pre> +``` -<pre class="brush: js">/* - * Dans les scripts de la popup, sur <http://example.org>: +```js +/* + * Dans les scripts de la popup, sur <http://example.org>: */ // Appelée quelques instants après que postMessage a été appelée @@ -124,56 +120,37 @@ function receiveMessage(event) } window.addEventListener("message", receiveMessage, false); -</pre> - -<h3 id="Notes">Notes</h3> - -<p>Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages <strong>doit</strong> d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés <code>origin</code> et si possible <code>source</code>. Cela ne peut pas être minimisé : <strong>ne pas vérifier les propriétés <code>origin</code> et si possible <code>source</code> permet des attaques inter-site.</strong></p> +``` -<p>De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à <code>postMessage</code> de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par <code>postMessage</code> lance une exception.</p> +### Notes -<p>La valeur de la propriété <code>origin</code> de l'évènement envoyé n'est pas affectée par la valeur actuelle de <code>document.domain</code> dans la fenêtre appelante.</p> +Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages **doit** d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés `origin` et si possible `source`. Cela ne peut pas être minimisé : **ne pas vérifier les propriétés `origin` et si possible `source` permet des attaques inter-site.** -<p>Pour les noms d'hôte IDN uniquement, la valeur de la propriété <code>origin</code> n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode.</p> +De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à `postMessage` de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par `postMessage` lance une exception. -<p>La valeur de la propriété <code>origin</code> quand la fenêtre expéditrice contient une URL <code>javascript:</code> ou <code>data:</code> est l'origin du script qui a chargé cette URL.</p> +La valeur de la propriété `origin` de l'évènement envoyé n'est pas affectée par la valeur actuelle de `document.domain` dans la fenêtre appelante. -<h3 id="Utiliser_window.postMessage_dans_les_extensions_Non-standard_inline">Utiliser window.postMessage dans les extensions {{Non-standard_inline}}</h3> +Pour les noms d'hôte IDN uniquement, la valeur de la propriété `origin` n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode. -<p><code>window.postMessage</code> est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété <code>source</code> de l'évènement envoyé est toujours <code>null</code> par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument <code>targetOrigin</code> pour un message envoyé à une fenêtre située à une URL<code> chrome:</code> est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est <code>"*"</code>. Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser <code>postMessage</code> pour communiquer avec des pages <code>chrome:</code> pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL <code>file:</code> requiert actuellement que l'argument <code>targetOrigin</code> soit <code>"*"</code>. <code>file://</code> ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir.</p> +La valeur de la propriété `origin` quand la fenêtre expéditrice contient une URL `javascript:` ou `data:` est l'origin du script qui a chargé cette URL. -<h2 id="Spécifications">Spécifications</h2> +### Utiliser window\.postMessage dans les extensions {{Non-standard_inline}} -<table class="standard-table"> - <tbody> - <tr> - <th scope="col"><strong>Spécification</strong></th> - <th scope="col"><strong>Status</strong></th> - <th scope="col"><strong>Comment</strong>aire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement depuis {{SpecName('HTML5 Web Messaging')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}</td> - <td>{{Spec2('HTML5 Web Messaging')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +`window.postMessage` est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété `source` de l'évènement envoyé est toujours `null` par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument `targetOrigin` pour un message envoyé à une fenêtre située à une URL` chrome:` est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est `"*"`. Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser `postMessage` pour communiquer avec des pages `chrome:` pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL `file:` requiert actuellement que l'argument `targetOrigin` soit `"*"`. `file://` ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| **Spécification** | **Status** | **Comment**aire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis {{SpecName('HTML5 Web Messaging')}} | +| {{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}} | {{Spec2('HTML5 Web Messaging')}} | Définition initiale. | +## Compatibilité des navigateurs -<p>{{Compat("api.Window.postMessage")}}</p> +{{Compat("api.Window.postMessage")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/en-US/docs/DOM/document.domain">Document.domain</a></li> - <li><a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a></li> - <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction entre les pages privilégiées et non privilégiées</a></li> -</ul> +- [Document.domain](/en-US/docs/DOM/document.domain) +- [CustomEvent](/en-US/docs/Web/API/CustomEvent) +- [Interaction entre les pages privilégiées et non privilégiées](/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages) diff --git a/files/fr/web/api/window/print/index.md b/files/fr/web/api/window/print/index.md index e07fb5d820..31cd026626 100644 --- a/files/fr/web/api/window/print/index.md +++ b/files/fr/web/api/window/print/index.md @@ -11,40 +11,26 @@ tags: - Window translation_of: Web/API/Window/print --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<p>Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. </p> +Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval">window.print() -</pre> + window.print() -<h2 id="Specification">Notes</h2> +## Notes -<p>Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.</p> +Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal. -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}</td> - <td>{{Spec2('HTML5 Web application')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{SpecName('HTML5 Web application', '#dom-print', 'print()')}} | {{Spec2('HTML5 Web application')}} | Définition initiale. | -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en/Printing">Printing</a></li> - <li>{{ domxref("window.onbeforeprint") }}</li> - <li>{{ domxref("window.onafterprint") }}</li> -</ul>
\ No newline at end of file +- [Printing](/en/Printing) +- {{ domxref("window.onbeforeprint") }} +- {{ domxref("window.onafterprint") }} diff --git a/files/fr/web/api/window/prompt/index.md b/files/fr/web/api/window/prompt/index.md index a5d0f914f2..0739572c79 100644 --- a/files/fr/web/api/window/prompt/index.md +++ b/files/fr/web/api/window/prompt/index.md @@ -9,31 +9,29 @@ tags: - Window translation_of: Web/API/Window/prompt --- -<div>{{ApiRef("Window")}}</div> +{{ApiRef("Window")}} -<p>La méthode <code>Window.prompt()</code> affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte.</p> +La méthode `Window.prompt()` affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>résultat</em> = window.prompt(<em>message</em>, <em>défaut</em>); -</pre> + résultat = window.prompt(message, défaut); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>message</code> {{optional_inline}}</dt> - <dd>Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre.</dd> - <dt><code>default</code> {{optional_inline}}</dt> - <dd>Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères <code>"undefined"</code> qui sera la valeur par défaut.</dd> -</dl> +- `message` {{optional_inline}} + - : Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre. +- `default` {{optional_inline}} + - : Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères `"undefined"` qui sera la valeur par défaut. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>La chaîne de caractères qui a été saisie par l'utilisateur ou <code>null</code>.</p> +La chaîne de caractères qui a été saisie par l'utilisateur ou `null`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">let signe = prompt("Quel est votre signe astrologique ?"); +```js +let signe = prompt("Quel est votre signe astrologique ?"); if (signe.toLowerCase() == "verseau") { console.log("Oh ? moi aussi je suis verseau :)"); @@ -48,44 +46,34 @@ signe = window.prompt('Quelle est la réponse ?'); // ouvre une fenêtre avec le texte "Quelle est la réponse ?" // avec la valeur "42" comme réponse par défaut -signe = window.prompt('Quelle est la réponse ?', '42');</pre> +signe = window.prompt('Quelle est la réponse ?', '42'); +``` -<p>Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie <code>null</code>.</p> +Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie `null`. -<h2 id="Notes">Notes</h2> +## Notes -<p>Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.</p> +Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie. -<p>The following text is shared between this article, <code>DOM:window.confirm</code> and <code>DOM:window.alert</code>. Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.</p> +The following text is shared between this article, `DOM:window.confirm` and `DOM:window.alert`. Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales. -<p>On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).</p> +On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement). -<pre class="brush: js">const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));</pre> +```js +const aNumber = Number(window.prompt("Veuillez saisir un nombre.", "")); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.prompt")}}</p> +{{Compat("api.Window.prompt")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.alert", "alert")}}</li> - <li>{{domxref("window.confirm", "confirm")}}</li> -</ul> +- {{domxref("window.alert", "alert")}} +- {{domxref("window.confirm", "confirm")}} diff --git a/files/fr/web/api/window/rejectionhandled_event/index.md b/files/fr/web/api/window/rejectionhandled_event/index.md index ebe167e30f..e966f6a1df 100644 --- a/files/fr/web/api/window/rejectionhandled_event/index.md +++ b/files/fr/web/api/window/rejectionhandled_event/index.md @@ -13,70 +13,58 @@ tags: - rejectionhandled translation_of: Web/API/Window/rejectionhandled_event --- -<div>{{APIRef("HTML DOM")}}</div> +{{APIRef("HTML DOM")}} -<p>L'événement <strong><code>rejectionhandled</code></strong> est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.</p> +L'événement **`rejectionhandled`** est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité. -<p>Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .</p> +Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet . <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("PromiseRejectionEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("PromiseRejectionEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + {{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Vous pouvez utiliser l'événement <code>rejectionhandled</code> pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :</p> +Vous pouvez utiliser l'événement `rejectionhandled` pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées : -<pre class="brush: js">window.addEventListener("rejectionhandled", event => { +```js +window.addEventListener("rejectionhandled", event => { console.log("Promise rejected; reason: " + event.reason); }, false); -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.rejectionhandled_event")}}</p> +{{Compat("api.Window.rejectionhandled_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li> - <li>{{domxref("PromiseRejectionEvent")}}</li> - <li>{{jsxref("Promise")}}</li> - <li>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</li> -</ul> +- {{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}} +- {{domxref("PromiseRejectionEvent")}} +- {{jsxref("Promise")}} +- {{domxref("Window/unhandledrejection_event", "unhandledrejection")}} diff --git a/files/fr/web/api/window/requestanimationframe/index.md b/files/fr/web/api/window/requestanimationframe/index.md index 210fa93d1a..b982fdc912 100644 --- a/files/fr/web/api/window/requestanimationframe/index.md +++ b/files/fr/web/api/window/requestanimationframe/index.md @@ -7,39 +7,37 @@ tags: - JavaScript translation_of: Web/API/window/requestAnimationFrame --- -<p>{{APIRef("Window")}}</p> +{{APIRef("Window")}} -<p>La méthode <strong><code>window.requestAnimationFrame()</code></strong> notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.</p> +La méthode **`window.requestAnimationFrame()`** notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur. -<div class="note"> - <p><strong>Note :</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</p> -</div> +> **Note :** Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode `requestAnimationFrame()`. -<p>Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.</p> +Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément. -<p>Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.</p> +Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><em>requestID</em> = window.requestAnimationFrame(<em>callback</em>); // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS) -<em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>); // Firefox < 23 -<em>requestID</em> = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome -</pre> +```js +requestID = window.requestAnimationFrame(callback); // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS) +requestID = window.mozRequestAnimationFrame(callback); // Firefox < 23 +requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome +``` -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<dl> - <dt><code>callback</code></dt> - <dd>Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.</dd> -</dl> +- `callback` + - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p><code>requestID</code> est un entier <code>long</code> unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback.</p> +`requestID` est un entier `long` unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback. -<h2 id="Notes">Exemple</h2> +## Exemple -<pre class="brush: js">window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || +```js +window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; @@ -52,42 +50,38 @@ function step(timestamp) { if (start === null) start = timestamp; progress = timestamp - start; d.style.left = Math.min(progress/10, 200) + "px"; - if (progress < 2000) { + if (progress < 2000) { requestAnimationFrame(step); } } requestAnimationFrame(step); -</pre> +``` -<h2 id="Browser_compatibility">Compatibilités</h2> +## Compatibilités -<div> -<p>{{Compat("api.Window.requestAnimationFrame")}}</p> -</div> +{{Compat("api.Window.requestAnimationFrame")}} -<h3 id="Specification">Notes pour Gecko</h3> +### Notes pour Gecko -<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.</p> +\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé. -<p>[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. <code>DOMTimeStamp</code> n'a qu'une précision de l'ordre de la milliseconde, mais <code>DOMHightResTimeStamp</code> a une précision minimale de l'ordre de 10 microsecondes.</p> +\[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. `DOMTimeStamp` n'a qu'une précision de l'ordre de la milliseconde, mais `DOMHightResTimeStamp` a une précision minimale de l'ordre de 10 microsecondes. -<h3 id="Notes_pour_Chrome">Notes pour Chrome</h3> +### Notes pour Chrome -<p>La syntaxe correcte, dans Chrome, pour annuler l'exécution est<code> window.cancelAnimationFrame()</code>. Dans les anciennes versions, <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame() sont obsolètes</code> mais sont toujours supportées pour le moment.</p> +La syntaxe correcte, dans Chrome, pour annuler l'exécution est` window.cancelAnimationFrame()`. Dans les anciennes versions, `window.webkitCancelAnimationFrame()` & `window.webkitCancelRequestAnimationFrame() sont obsolètes` mais sont toujours supportées pour le moment. -<h2 id="Specification">Specification</h2> +## Specification -<p>{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}</p> +{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.mozAnimationStartTime")}}</li> - <li>{{domxref("window.cancelAnimationFrame()")}}</li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> - <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> - <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> - <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> - <li><a href="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> -</ul> +- {{domxref("window.mozAnimationStartTime")}} +- {{domxref("window.cancelAnimationFrame()")}} +- [mozRequestAnimationFrame](http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html) - Blog post +- [requestAnimationFrame for smart animating](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) - Blog post +- [Animating with javascript: from setInterval to requestAnimationFrame](http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/) - Blog post +- [Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1](http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx) - Blog post +- [TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations](http://www.testufo.com/#test=animation-time-graph) diff --git a/files/fr/web/api/window/requestidlecallback/index.md b/files/fr/web/api/window/requestidlecallback/index.md index ca33f7ac28..ec73c7442d 100644 --- a/files/fr/web/api/window/requestidlecallback/index.md +++ b/files/fr/web/api/window/requestidlecallback/index.md @@ -3,63 +3,47 @@ title: window.requestIdleCallback() slug: Web/API/Window/requestIdleCallback translation_of: Web/API/Window/requestIdleCallback --- -<div>{{APIRef}}{{SeeCompatTable}}</div> - -<p>La méthode <code><strong>window.requestIdleCallback() </strong></code>mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.</p> - -<h2 id="Syntax">Syntaxe</h2> - -<pre class="syntaxbox"><code>var idleCallbackId = window.requestIdleCallback(fonction[, options])</code></pre> - -<h3 id="Returns">Retour de l'appel</h3> - -<p>Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.</p> - -<h3 id="Parameters">Paramètres</h3> - -<dl> - <dt>fonction</dt> - <dd>La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : - <ul> - <li><code>timeRemaining </code>: Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. <code>timeRemaining()</code> retournera toujours zéro si <code>didTimeout</code> est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.</li> - <li><code>didTimeout </code>: Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos.</li> - </ul> - </dd> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes : - <ul> - <li><code>timeout </code>: Si <code>timeout</code> est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins <code>timeout</code> millisecondes si elle n'a pas été appelée par le navigateur au préalable.</li> - </ul> - </dd> -</dl> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName('Background Tasks')}}</td> - <td>{{Spec2('Background Tasks')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.requestIdleCallback")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("window.cancelIdleCallback()")}}</li> - <li>{{domxref("IdleDeadline")}}</li> - <li>{{domxref("window.setTimeout()")}}</li> - <li>{{domxref("window.setInterval()")}}</li> - <li>{{domxref("window.requestAnimationFrame")}}</li> -</ul> +{{APIRef}}{{SeeCompatTable}} + +La méthode **`window.requestIdleCallback() `**mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question. + +## Syntaxe + + var idleCallbackId = window.requestIdleCallback(fonction[, options]) + +### Retour de l'appel + +Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}. + +### Paramètres + +- fonction + + - : La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : + + - `timeRemaining `: Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. `timeRemaining()` retournera toujours zéro si `didTimeout` est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue. + - `didTimeout `: Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos. + +- `options` {{optional_inline}} + + - : Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes : + + - `timeout `: Si `timeout` est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins `timeout` millisecondes si elle n'a pas été appelée par le navigateur au préalable. + +## Spécifications + +| Spécification | Status | Comment | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('Background Tasks')}} | {{Spec2('Background Tasks')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Window.requestIdleCallback")}} + +## Voir aussi + +- {{domxref("window.cancelIdleCallback()")}} +- {{domxref("IdleDeadline")}} +- {{domxref("window.setTimeout()")}} +- {{domxref("window.setInterval()")}} +- {{domxref("window.requestAnimationFrame")}} diff --git a/files/fr/web/api/window/resizeby/index.md b/files/fr/web/api/window/resizeby/index.md index 4d3a8873d6..325e2a1be1 100644 --- a/files/fr/web/api/window/resizeby/index.md +++ b/files/fr/web/api/window/resizeby/index.md @@ -6,68 +6,55 @@ tags: - Window translation_of: Web/API/Window/resizeBy --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>Window.resizeBy()</strong></code> redimensionne la fenêtre actuelle d'une taille spécifié.</p> +La méthode **`Window.resizeBy()`** redimensionne la fenêtre actuelle d'une taille spécifié. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">window.resizeBy(<em>xDelta, yDelta</em>) -</pre> + window.resizeBy(xDelta, yDelta) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<ul> - <li><code>xDelta</code> est le nombre de pixels pour agrandir la fenêtre horizontalement.</li> - <li><code>yDelta</code> est le nombre de pixels pour agrandir la fenêtre verticalement.</li> -</ul> +- `xDelta` est le nombre de pixels pour agrandir la fenêtre horizontalement. +- `yDelta` est le nombre de pixels pour agrandir la fenêtre verticalement. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush:js">// Réduit la fenêtre +```js +// Réduit la fenêtre window.resizeBy(-200, -200); -</pre> +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}.</p> +Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}. -<h3 id="Créer_et_redimensionner_une_fenêtre_externe">Créer et redimensionner une fenêtre externe</h3> +### Créer et redimensionner une fenêtre externe -<p>Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par <code>window.open()</code> ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement.</p> +Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par `window.open()` ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement. -<p>Même si vous créez une fenêtre avec <code>window.open()</code> <strong>elle n'est pas redimensionnable par défaut.</strong> Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre <code>"resizable"</code> .</p> +Même si vous créez une fenêtre avec `window.open()` **elle n'est pas redimensionnable par défaut.** Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre `"resizable"` . -<pre class="brush: js">// Créer une fenêtre redimensionnable +```js +// Créer une fenêtre redimensionnable myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable"); // Redimensionner la fenêtre à 500 x 500 myExternalWindow.resizeTo(500, 500); // Rendre la fenêtre relativement plus petit à 400 x 400 -myExternalWindow.resizeBy(-100, -100);</pre> - -<p>La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.resizeBy")}}</p> +myExternalWindow.resizeBy(-100, -100); +``` + +La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet. + +## Spécifications + +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{ SpecName('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }} | {{ Spec2('CSSOM View') }} | | + +## Compatibilité des navigateurs + +{{Compat("api.Window.resizeBy")}} diff --git a/files/fr/web/api/window/screen/index.md b/files/fr/web/api/window/screen/index.md index c86fcb6f61..79bbd5f09f 100644 --- a/files/fr/web/api/window/screen/index.md +++ b/files/fr/web/api/window/screen/index.md @@ -11,45 +11,28 @@ tags: - Écran translation_of: Web/API/Window/screen --- -<div>{{APIRef("CSSOM View")}}</div> +{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante. -<div>Retourne une référence à l'objet <code>screen</code> associé à la fenêtre. L'object <code>screen</code>, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.</div> +## Syntaxe -<h2 id="Syntax">Syntaxe</h2> + objetEcran = window.screen; -<pre class="syntaxbox"><var>objetEcran</var> = <var>window</var>.screen; -</pre> +## Examples -<h2 id="Example">Examples</h2> - -<pre class="brush:js">if (screen.pixelDepth < 8) { +```js +if (screen.pixelDepth < 8) { // utiliser la page en colorisation réduite } else { // utiliser la page en coolorisation normale } -</pre> - -<h2 id="Specification">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td> </td> - </tr> - </tbody> -</table> +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} | | +## Compatibilité des navigateurs -<p>{{Compat("api.Window.screen")}}</p> +{{Compat("api.Window.screen")}} diff --git a/files/fr/web/api/window/screenx/index.md b/files/fr/web/api/window/screenx/index.md index 2ff4f0dc7b..a6c4a13e38 100644 --- a/files/fr/web/api/window/screenx/index.md +++ b/files/fr/web/api/window/screenx/index.md @@ -8,45 +8,27 @@ tags: - lecture seule translation_of: Web/API/Window/screenX --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>Window.screenX</strong></code> retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.</p> +La propriété **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen. -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox"><em>lLoc</em> = window.screenX -</pre> + lLoc = window.screenX -<ul> - <li><em><code>lLoc</code></em> is the number of CSS pixels from the left side the screen.</li> -</ul> +- _`lLoc`_ is the number of CSS pixels from the left side the screen. -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Specification | Status | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }} | {{ Spec2('CSSOM View') }} | Définition initiale | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.screenX")}}</p> +{{Compat("api.Window.screenX")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("window.screenLeft")}}</li> - <li>{{domxref("Window.screenY")}}</li> -</ul> +- {{domxref("window.screenLeft")}} +- {{domxref("Window.screenY")}} diff --git a/files/fr/web/api/window/scroll/index.md b/files/fr/web/api/window/scroll/index.md index 17ae626928..6617af0bf3 100644 --- a/files/fr/web/api/window/scroll/index.md +++ b/files/fr/web/api/window/scroll/index.md @@ -3,22 +3,28 @@ title: window.scroll slug: Web/API/Window/scroll translation_of: Web/API/Window/scroll --- -<p>{{ ApiRef() }}</p> - -<p>Fait glisser la fenêtre vers une position particulière du document</p> -<h3 id="Syntax">Syntax</h3> -<pre class="eval">window.scroll(<i>x-coord</i>,<i>y-coord</i>) -</pre> -<h3 id="Parameters">Parameters</h3> -<ul> - <li><code>x-coord</code> est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li> - <li><code>y-coord</code> est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li> -</ul> -<h3 id="Example">Example</h3> -<pre> // Déplace la fenêtre 100px plus bas - <button onClick="scroll(0, 100);">click to scroll down 100 pixels</button> -</pre> -<h3 id="Notes">Notes</h3> -<p><a href="en/Window.scrollTo">window.scrollTo</a> a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez <a href="en/Window.scrollBy">window.scrollBy</a>. Jetez aussi un œil à <a href="en/Window.scrollByLines">window.scrollByLines</a> et <a href="en/Window.scrollByPages">window.scrollByPages</a>.</p> -<h3 id="Specification">Specification</h3> -<p>DOM Level 0. Hors spécification.</p>
\ No newline at end of file +{{ ApiRef() }} + +Fait glisser la fenêtre vers une position particulière du document + +### Syntax + + window.scroll(x-coord,y-coord) + +### Parameters + +- `x-coord` est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran. +- `y-coord` est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran. + +### Example + + // Déplace la fenêtre 100px plus bas + <button onClick="scroll(0, 100);">click to scroll down 100 pixels</button> + +### Notes + +[window.scrollTo](en/Window.scrollTo) a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez [window.scrollBy](en/Window.scrollBy). Jetez aussi un œil à [window.scrollByLines](en/Window.scrollByLines) et [window.scrollByPages](en/Window.scrollByPages). + +### Specification + +DOM Level 0. Hors spécification. diff --git a/files/fr/web/api/window/scrollbars/index.md b/files/fr/web/api/window/scrollbars/index.md index 1a292aed78..2b66d4a2a0 100644 --- a/files/fr/web/api/window/scrollbars/index.md +++ b/files/fr/web/api/window/scrollbars/index.md @@ -9,65 +9,48 @@ tags: - Window translation_of: Web/API/Window/scrollbars --- -<div>{{APIRef()}}</div> +{{APIRef()}} -<p>La propriété <code><strong>Window.scrollbars</strong></code> renvoie l'objet <code>scrollbars</code>, dont la visibilité peut être vérifié.</p> +La propriété **`Window.scrollbars`** renvoie l'objet `scrollbars`, dont la visibilité peut être vérifié. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>objRef</em> = window.scrollbars -</pre> + objRef = window.scrollbars -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet scrollbars est utilisée.</p> +L'exemple HTML complet suivant montre comment la propriété `visible` de l'objet scrollbars est utilisée. -<pre class="brush: html"><!doctype html> -<html> -<head> - <title>Divers Tests DOM</title> - <script> +```html +<!doctype html> +<html> +<head> + <title>Divers Tests DOM</title> + <script> let visibleScrollbars = window.scrollbars.visible; - </script> -</head> -<body> - <p>Divers Tests DOM</p> -</body> -</html> -</pre> + </script> +</head> +<body> + <p>Divers Tests DOM</p> +</body> +</html> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.scrollbars")}}</p> +{{Compat("api.Window.scrollbars")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{domxref("window.locationbar")}}</li> - <li>{{domxref("window.menubar")}}</li> - <li>{{domxref("window.personalbar")}}</li> - <li>{{domxref("window.statusbar")}}</li> - <li>{{domxref("window.toolbar")}}</li> -</ul> +- {{domxref("window.locationbar")}} +- {{domxref("window.menubar")}} +- {{domxref("window.personalbar")}} +- {{domxref("window.statusbar")}} +- {{domxref("window.toolbar")}} diff --git a/files/fr/web/api/window/scrollby/index.md b/files/fr/web/api/window/scrollby/index.md index 8713385ca8..8b76b7d25c 100644 --- a/files/fr/web/api/window/scrollby/index.md +++ b/files/fr/web/api/window/scrollby/index.md @@ -8,49 +8,32 @@ tags: - Référence(2) translation_of: Web/API/Window/scrollBy --- -<p>{{ APIRef() }}</p> +{{ APIRef() }} -<p>Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.</p> +Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>); -</pre> + window.scrollBy(X, Y); -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<ul> - <li><code>X</code> est le nombre en pixels pour le défilement horizontal.</li> - <li><code>Y</code> est le nombre en pixels pour le défilement vertical.</li> -</ul> +- `X` est le nombre en pixels pour le défilement horizontal. +- `Y` est le nombre en pixels pour le défilement vertical. -<p>Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. </p> +Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. -<h2 id="Example">Exemples</h2> +## Exemples -<pre class="eval">// fait défiler d'une page -window.scrollBy(0, window.innerHeight); -</pre> + // fait défiler d'une page + window.scrollBy(0, window.innerHeight); -<h2 id="Notes">Notes</h2> +## Notes -<p><a href="/fr/docs/DOM/Window.scrollBy">window.scrollBy</a> fait défiler en fonction d'un nombre précis, alors que <a href="/fr/docs/DOM/Window.scroll">window.scroll</a> fait défiler vers une position absolue dans le document. Voir aussi <a href="/fr/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p> +[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages) -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }} | {{ Spec2('CSSOM View') }} | Définition initiale. | diff --git a/files/fr/web/api/window/scrollbylines/index.md b/files/fr/web/api/window/scrollbylines/index.md index eac61c0802..cff696ecf6 100644 --- a/files/fr/web/api/window/scrollbylines/index.md +++ b/files/fr/web/api/window/scrollbylines/index.md @@ -10,40 +10,37 @@ tags: - Window translation_of: Web/API/Window/scrollByLines --- -<div>{{ ApiRef() }}</div> +{{ ApiRef() }} -<p>{{Non-standard_header}}</p> +{{Non-standard_header}} -<p>Fait défiler le document du nombre de lignes spécifié.</p> +Fait défiler le document du nombre de lignes spécifié. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">window.scrollByLines(<var>lignes</var>) -</pre> + window.scrollByLines(lignes) -<h2 id="Parameters">Paramètres</h2> +## Paramètres -<ul> - <li><code>lignes</code> est le nombre de lignes à faire défiler.</li> - <li><code>lignes</code> peut être un entier positif ou négatif.</li> -</ul> +- `lignes` est le nombre de lignes à faire défiler. +- `lignes` peut être un entier positif ou négatif. -<h2 id="Example">Exemples</h2> +## Exemples -<pre class="brush:html"><!-- Faire défiler le document de 5 lignes vers le bas. --> -<button onclick="scrollByLines(5);">5 lignes vers le bas</button> -</pre> +```html +<!-- Faire défiler le document de 5 lignes vers le bas. --> +<button onclick="scrollByLines(5);">5 lignes vers le bas</button> +``` -<pre class="brush:html"><!-- Faire défiler le document de 5 lignes vers le haut. --> -<button onclick="scrollByLines(-5);">5 lignes vers le haut</button> -</pre> +```html +<!-- Faire défiler le document de 5 lignes vers le haut. --> +<button onclick="scrollByLines(-5);">5 lignes vers le haut</button> +``` -<h2 id="Specification">Spécification</h2> +## Spécification -<p>Ne fait partie d'aucune spécification.</p> +Ne fait partie d'aucune spécification. -<h2 id="See_also">See also</h2> +## See also -<ul> - <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li> -</ul> +- {{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}} diff --git a/files/fr/web/api/window/scrollbypages/index.md b/files/fr/web/api/window/scrollbypages/index.md index 8419d43545..947dccb77e 100644 --- a/files/fr/web/api/window/scrollbypages/index.md +++ b/files/fr/web/api/window/scrollbypages/index.md @@ -8,35 +8,31 @@ tags: - Méthode translation_of: Web/API/Window/scrollByPages --- -<p>{{ ApiRef() }}{{Non-standard_header}}</p> +{{ ApiRef() }}{{Non-standard_header}} -<p>Fait défiler le document du nombre de pages spécifié.</p> +Fait défiler le document du nombre de pages spécifié. -<h3 id="Syntax">Syntaxe</h3> +### Syntaxe -<pre class="eval">window.scrollByPages(<em>pages</em>) -</pre> + window.scrollByPages(pages) -<h3 id="Parameters">Paramètres</h3> +### Paramètres -<ul> - <li><code>pages</code> est le nombre de pages à faire défiler.</li> - <li><code>pages</code> peut être un entier positif ou négatif.</li> -</ul> +- `pages` est le nombre de pages à faire défiler. +- `pages` peut être un entier positif ou négatif. -<h3 id="Example">Exemples</h3> +### Exemples -<pre>// fait défiler le document d'une page vers le bas -window.scrollByPages(1); + // fait défiler le document d'une page vers le bas + window.scrollByPages(1); -// fait défiler le document d'une page vers le haut -window.scrollByPages(-1); -</pre> + // fait défiler le document d'une page vers le haut + window.scrollByPages(-1); -<h3 id="Notes">Notes</h3> +### Notes -<p>Voir aussi <a href="/fr/docs/Web/API/Window/scrollByPages">window.scrollBy</a>, <a href="/fr/docs/Web/API/Window/scrollByPages">window.scrollByLines</a>, <a href="/fr/docs/Web/API/Window/scroll">window.scroll</a>, <a href="fr/docs/Web/API/Window/scrollTo">window.scrollTo</a>.</p> +Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo). -<h3 id="Specification">Spécification</h3> +### Spécification -<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p>
\ No newline at end of file +DOM Niveau 0. Ne fait pas partie de la spécification. diff --git a/files/fr/web/api/window/scrollto/index.md b/files/fr/web/api/window/scrollto/index.md index 753059d1c9..ff56d9f269 100644 --- a/files/fr/web/api/window/scrollto/index.md +++ b/files/fr/web/api/window/scrollto/index.md @@ -6,33 +6,29 @@ tags: - DOM_0 translation_of: Web/API/Window/scrollTo --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> +### Résumé -<p>Fait défiler le document jusqu'à un jeu de coordonnées particulier.</p> +Fait défiler le document jusqu'à un jeu de coordonnées particulier. -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="eval">window.scrollTo(<em>coord-x</em>,<em>coord-y</em>); -</pre> + window.scrollTo(coord-x,coord-y); -<h3 id="Param.C3.A8tres">Paramètres</h3> +### Paramètres -<ul> - <li><code>coord-x</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li> - <li><code>coord-y</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li> -</ul> +- `coord-x` est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche. +- `coord-y` est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche. -<h3 id="Exemple">Exemple</h3> +### Exemple -<pre>window.scrollTo(0, 1000); -</pre> + window.scrollTo(0, 1000); -<h3 id="Notes">Notes</h3> +### Notes -<p>Cette fonction est fonctionnellement identique à <a href="scroll">window.scroll</a>. Pour un défilement relatif, consultez <a href="scrollBy">window.scrollBy</a>, <a href="scrollByLines">window.scrollByLines</a> et <a href="scrollByPages">window.scrollByPages</a>.</p> +Cette fonction est fonctionnellement identique à [window.scroll](scroll). Pour un défilement relatif, consultez [window.scrollBy](scrollBy), [window.scrollByLines](scrollByLines) et [window.scrollByPages](scrollByPages). -<h3 id="Sp.C3.A9cification">Spécification</h3> +### Spécification -<p>{{ DOM0() }}</p> +{{ DOM0() }} diff --git a/files/fr/web/api/window/scrolly/index.md b/files/fr/web/api/window/scrolly/index.md index 6d556c1eae..7bb0be2506 100644 --- a/files/fr/web/api/window/scrolly/index.md +++ b/files/fr/web/api/window/scrolly/index.md @@ -3,69 +3,55 @@ title: Window.scrollY slug: Web/API/Window/scrollY translation_of: Web/API/Window/scrollY --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>scrollY</strong></code> de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.</p> +La propriété **`scrollY`** de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var y = window.scrollY;</pre> + var y = window.scrollY; -<ul> - <li><code>y</code> est le nombre de pixels verticaux défilés.</li> -</ul> +- `y` est le nombre de pixels verticaux défilés. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">// make sure and go down to the second page +```js +// make sure and go down to the second page if (window.scrollY) { window.scroll(0, 0); // reset the scroll position to the top left of the document. } -window.scrollByPages(1);</pre> +window.scrollByPages(1); +``` -<h2 id="Notes">Notes</h2> +## Notes -<p>Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.</p> +Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}. -<p>La propriété <code>pageYOffset</code> est un alias de la propriété <code>scrollY</code>:</p> +La propriété `pageYOffset` est un alias de la propriété `scrollY`: -<pre>window.pageYOffset == window.scrollY; // toujours vrai</pre> + window.pageYOffset == window.scrollY; // toujours vrai -<p>Pour une compatibilité multi-navigateur, utilisez <code>window.pageYOffset</code> à la place de <code>window.scrollY</code>. <strong>En outre</strong>, les anciennes versions d'Internet Explorer (< 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible :</p> +Pour une compatibilité multi-navigateur, utilisez `window.pageYOffset` à la place de `window.scrollY`. **En outre**, les anciennes versions d'Internet Explorer (< 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible : -<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined; +```js +var supportPageOffset = window.pageXOffset !== undefined; var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft; var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; -</pre> - -<h2 id="Specification">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire(s)</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Window.scrollY")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{domxref("window.scrollX")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | Status | Commentaire(s) | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------- | +| {{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }} | {{ Spec2('CSSOM View') }} | | + +## Compatibilité des navigateurs + +{{Compat("api.Window.scrollY")}} + +## Voir aussi + +- {{domxref("window.scrollX")}} diff --git a/files/fr/web/api/window/sessionstorage/index.md b/files/fr/web/api/window/sessionstorage/index.md index 64a4e4cc27..87418645e6 100644 --- a/files/fr/web/api/window/sessionstorage/index.md +++ b/files/fr/web/api/window/sessionstorage/index.md @@ -5,40 +5,44 @@ tags: - API translation_of: Web/API/Window/sessionStorage --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>La propriété <code>sessionStorage</code> permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global <code>sessionStorage</code> est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans <code>sessionStorage</code> ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'<strong>ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation</strong>, ce qui diffère du comportement des sessions utilisant des cookies.</p> +La propriété `sessionStorage` permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global `sessionStorage` est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans `sessionStorage` ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'**ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation**, ce qui diffère du comportement des sessions utilisant des cookies. -<p>Il est à noter que les données stockées dans sessionStorage ou localStorage sont <strong>spécifiques au protocole de la page.</strong></p> +Il est à noter que les données stockées dans sessionStorage ou localStorage sont **spécifiques au protocole de la page.** -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">// Enregistrer des données dans sessionStorage +```js +// Enregistrer des données dans sessionStorage sessionStorage.setItem('clé', 'valeur'); // Récupérer des données depuis sessionStorage -<code>var data = sessionStorage.getItem('clé'); +var data = sessionStorage.getItem('clé'); // Supprimer des données de sessionStorage sessionStorage.removeItem('clé'); // Supprimer toutes les données de sessionStorage -sessionStorage.clear();</code> -</pre> +sessionStorage.clear(); +``` -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un objet {{domxref("Storage")}}.</p> +Un objet {{domxref("Storage")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.</p> +L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}. -<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre> +```js +sessionStorage.setItem('myCat', 'Tom'); +``` -<p>L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.</p> +L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue. -<pre class="brush: js">// Récupération du champ à enregistrer +```js +// Récupération du champ à enregistrer var champ = document.getElementById("champ"); // Vérification de l'existence d'une donnée enregistrée auparavant @@ -52,38 +56,24 @@ if (sessionStorage.getItem("autosave")) { champ.addEventListener("change", function() { // Enregistrement de la saisie utilisateur dans le stockage de session sessionStorage.setItem("autosave", champ.value); -});</pre> +}); +``` -<div class="note"> -<p><strong>Note :</strong> Veuillez vous référer à l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a> pour des exemples plus complets.</p> -</div> +> **Note :** Veuillez vous référer à l'article [Utilisation de l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) pour des exemples plus complets. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}} | {{Spec2("HTML WHATWG")}} | | -<h2 id="Compatilibité_des_navigateurs">Compatilibité des navigateurs</h2> +## Compatilibité des navigateurs -<p>{{Compat("api.Window.sessionStorage")}}</p> +{{Compat("api.Window.sessionStorage")}} -<p>Chaque navigateur attribue des capacités de stockage limitées pour <code>localStorage</code> et <code>sessionStorage</code>. Vous en trouverez certaines dans ce <a href="http://dev-test.nemikor.com/web-storage/support-test/">récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur</a>.</p> +Chaque navigateur attribue des capacités de stockage limitées pour `localStorage` et `sessionStorage`. Vous en trouverez certaines dans ce [récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur](http://dev-test.nemikor.com/web-storage/support-test/). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a></li> - <li>{{domxref("Window.localStorage")}}</li> -</ul> +- [Utilisation de l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +- {{domxref("Window.localStorage")}} diff --git a/files/fr/web/api/window/showmodaldialog/index.md b/files/fr/web/api/window/showmodaldialog/index.md index 3d86815e6a..add3c42855 100644 --- a/files/fr/web/api/window/showmodaldialog/index.md +++ b/files/fr/web/api/window/showmodaldialog/index.md @@ -5,83 +5,51 @@ tags: - Obsolete translation_of: Web/API/Window/showModalDialog --- -<p>{{ ApiRef() }}</p> - -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> - -<p>Crée et affiche un dialogue modal contenant un document HTML spécifié.</p> - -<div class="warning"> -<p><strong>Attention :</strong> Cette fonction est obsolète.</p> - -<p>Le support a été arrêté avec la sortie de <a href="http://blog.chromium.org/2014/07/disabling-showmodaldialog.html">Chrome 37</a>. Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : <a href="http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures">ici</a>.</p> - -<p>Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.</p> -</div> - -<h3 id="Syntaxe">Syntaxe</h3> - -<pre class="eval"><em>retour</em> = window.showModalDialog(<em>uri</em>[,<em>arguments</em>][,<em>options</em>]); -</pre> - -<p>où</p> - -<ul> - <li><code>retour</code> est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par <code>uri</code>.</li> - <li><code>uri</code> est l'URI du document à afficher dans la boîte de dialogue.</li> - <li><code>arguments</code> est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété <code><a href="fr/DOM/window.dialogArguments">window.dialogArguments</a></code> de son objet <code><a href="fr/DOM/window">window</a></code>.</li> - <li><code>options</code> est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules :</li> -</ul> - -<table class="standard-table"> - <tbody> - <tr> - <th>Syntaxe</th> - <th>Description</th> - </tr> - <tr> - <td><code>center: {on | off | yes | no | 1 | 0 }</code></td> - <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est <code>yes</code>.</td> - </tr> - <tr> - <td><code>dialogheight:<em>height</em> </code></td> - <td>Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td> - </tr> - <tr> - <td><code>dialogleft:<em>left</em> </code></td> - <td>Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td> - </tr> - <tr> - <td><code>dialogwidth:<em>width</em> </code></td> - <td>Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td> - </tr> - <tr> - <td><code>dialogtop:<em>top</em> </code></td> - <td>Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td> - </tr> - <tr> - <td><code>resizable: {on | off | yes | no | 1 | 0 }</code></td> - <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est <code>no</code>.</td> - </tr> - <tr> - <td><code>scroll: {on | off | yes | no | 1 | 0 }</code></td> - <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est <code>no</code>.</td> - </tr> - </tbody> -</table> - -<p>{{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }}</p> - -<h3 id="Compatibilit.C3.A9">Compatibilité</h3> - -<p>Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.</p> - -<h3 id="Exemples">Exemples</h3> - -<p><a href="/samples/domref/showModalDialog.html">Essayer <code>showModalDialog()</code></a>.</p> - -<h3 id="Notes">Notes</h3> - -<h3 id="Sp.C3.A9cification">Spécification</h3> - -<p>Microsoft MSDN : <a href="http://msdn2.microsoft.com/en-us/library/ms536759.aspx">showModalDialog</a></p> +{{ ApiRef() }} + +### Résumé + +Crée et affiche un dialogue modal contenant un document HTML spécifié. + +> **Attention :** Cette fonction est obsolète. +> +> Le support a été arrêté avec la sortie de [Chrome 37](http://blog.chromium.org/2014/07/disabling-showmodaldialog.html). Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : [ici](http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures). +> +> Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016. + +### Syntaxe + + retour = window.showModalDialog(uri[,arguments][,options]); + +où + +- `retour` est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par `uri`. +- `uri` est l'URI du document à afficher dans la boîte de dialogue. +- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window). +- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules : + +| Syntaxe | Description | +| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `center: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`. | +| `dialogheight:height` | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `dialogleft:left` | Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | +| `dialogwidth:width` | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `dialogtop:top` | Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | +| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est `no`. | +| `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est `no`. | + +{{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }} + +### Compatibilité + +Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3. + +### Exemples + +[Essayer `showModalDialog()`](/samples/domref/showModalDialog.html). + +### Notes + +### Spécification + +Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx) diff --git a/files/fr/web/api/window/stop/index.md b/files/fr/web/api/window/stop/index.md index 491876c7b8..9d15c8e21e 100644 --- a/files/fr/web/api/window/stop/index.md +++ b/files/fr/web/api/window/stop/index.md @@ -11,44 +11,29 @@ tags: - stop translation_of: Web/API/Window/stop --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><strong><code>window.stop()</code></strong> arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.</p> +**`window.stop()`** arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur. -<p>En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.</p> +En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">window.stop() -</pre> + window.stop() -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush:js">window.stop(); -</pre> +```js +window.stop(); +``` -<h2 id="Specification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécifications</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécifications | Statut | Commentaires | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.stop")}}</p> +{{Compat("api.Window.stop")}} diff --git a/files/fr/web/api/window/storage_event/index.md b/files/fr/web/api/window/storage_event/index.md index 8bfbc393b3..57d7c74f36 100644 --- a/files/fr/web/api/window/storage_event/index.md +++ b/files/fr/web/api/window/storage_event/index.md @@ -10,74 +10,67 @@ tags: - Window translation_of: Web/API/Window/storage_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>storage</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (<code>localStorage</code>) a été modifiée dans le contexte d'un autre document.</p> +L'événement **`storage`** de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (`localStorage`) a été modifiée dans le contexte d'un autre document. <table class="properties"> - <thead> - </thead> - <tbody> - <tr> - <th>Bulles</th> - <td>Non</td> - </tr> - <tr> - <th>Annulable</th> - <td>Non</td> - </tr> - <tr> - <th>Interface</th> - <td>{{domxref("StorageEvent")}}</td> - </tr> - <tr> - <th>Propriété de gestionnaire d'événements</th> - <td>{{domxref("WindowEventHandlers.onstorage", "onstorage")}}</td> - </tr> - </tbody> + <thead></thead> + <tbody> + <tr> + <th>Bulles</th> + <td>Non</td> + </tr> + <tr> + <th>Annulable</th> + <td>Non</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("StorageEvent")}}</td> + </tr> + <tr> + <th>Propriété de gestionnaire d'événements</th> + <td> + {{domxref("WindowEventHandlers.onstorage", "onstorage")}} + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Consignez l'élément <code>sampleList</code> sur la console lorsque l'événement <code>storage</code> se déclenche :</p> +Consignez l'élément `sampleList` sur la console lorsque l'événement `storage` se déclenche : -<pre class="brush: js">window.addEventListener('storage', () => { +```js +window.addEventListener('storage', () => { // Lorsque le stockage local change, vider la liste sur // la console. console.log(JSON.parse(window.localStorage.getItem('sampleList'))); -});</pre> +}); +``` -<p>La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> :</p> +La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements [`onstorage`](/en-US/docs/Web/API/WindowEventHandlers/onstorage) : -<pre class="brush: js">window.onstorage = () => { +```js +window.onstorage = () => { // Lorsque le stockage local change, vider la liste dans // la console. console.log(JSON.parse(window.localStorage.getItem('sampleList'))); }; -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| -------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}} | {{Spec2('HTML WHATWG')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.storage_event")}}</p> +{{Compat("api.Window.storage_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> -</ul> +- [Web Storage API](/en-US/docs/Web/API/Web_Storage_API) +- [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/window/top/index.md b/files/fr/web/api/window/top/index.md index 8fa533e6f9..c0c2c897af 100644 --- a/files/fr/web/api/window/top/index.md +++ b/files/fr/web/api/window/top/index.md @@ -10,45 +10,27 @@ tags: - Window translation_of: Web/API/Window/top --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres</p> +Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <var>topWindow</var> = window.top; -</pre> + var topWindow = window.top; -<h2 id="Notes">Notes</h2> +## Notes -<p>Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, <code>window.top</code> renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre.</p> +Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, `window.top` renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre. -<p>Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur.</p> +Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Spécification initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------- | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}} | {{Spec2('HTML5 W3C')}} | Spécification initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.top")}}</p> +{{Compat("api.Window.top")}} diff --git a/files/fr/web/api/window/unload_event/index.md b/files/fr/web/api/window/unload_event/index.md index aa14cc47c8..18ba0331c9 100644 --- a/files/fr/web/api/window/unload_event/index.md +++ b/files/fr/web/api/window/unload_event/index.md @@ -7,150 +7,116 @@ tags: translation_of: Web/API/Window/unload_event original_slug: Web/Events/unload --- -<p>L'événement <code>unload</code> est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.</p> +L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé. -<p>Il est lancé après :</p> +Il est lancé après : -<ol> - <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (événement annulable)</li> - <li><a href="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li> -</ol> +1. [beforeunload](/en-US/docs/Mozilla_event_reference/beforeunload) (événement annulable) +2. [pagehide](/en-US/docs/Mozilla_event_reference/pagehide) -<p>Le document se trouve alors dans un état particulier :</p> +Le document se trouve alors dans un état particulier : -<ul> - <li>Toutes les ressources existent encore (img, iframe etc.)</li> - <li>Plus rien n'est encore visible par l'utilisateur final</li> - <li>Les intéractions avec l'interface sont désactivées (<code>window.open</code>, <code>alert</code>, <code>confirm</code>, etc.)</li> - <li>Aucune erreur ne viendra interrompre le flux de déchargement.</li> -</ul> +- Toutes les ressources existent encore (img, iframe etc.) +- Plus rien n'est encore visible par l'utilisateur final +- Les intéractions avec l'interface sont désactivées (`window.open`, `alert`, `confirm`, etc.) +- Aucune erreur ne viendra interrompre le flux de déchargement. -<p>Veuiller noter que l'événement <code>unload</code> suit l'ordre du document : le cadre parent est déchargé <em>avant</em> le <code>unload</code> d'un cadre enfant (voir l'exemple ci-dessous).</p> +Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous). <table class="properties"> - <tbody> - <tr> - <td>Événement propageable</td> - <td>Non</td> - </tr> - <tr> - <td>Annulable</td> - <td>Non</td> - </tr> - <tr> - <td>Objets cibles</td> - <td>defaultView, Document, Element</td> - </tr> - <tr> - <td>Interface</td> - <td>{{domxref("UIEvent")}} si généré depuis un élément de l'interface utilisateur, {{domxref("Event")}}</td> - </tr> - <tr> - <td>Action par défaut</td> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <td>Événement propageable</td> + <td>Non</td> + </tr> + <tr> + <td>Annulable</td> + <td>Non</td> + </tr> + <tr> + <td>Objets cibles</td> + <td>defaultView, Document, Element</td> + </tr> + <tr> + <td>Interface</td> + <td> + {{domxref("UIEvent")}} si généré depuis un élément de l'interface + utilisateur, {{domxref("Event")}} + </td> + </tr> + <tr> + <td>Action par défaut</td> + <td>Aucune</td> + </tr> + </tbody> </table> -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> - <td>La cible de l'événement (la cible de plus haut niveau dans le DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> - <td>Le type d'événement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Si l'événement remonte ou non.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> - <td>Si l'événement est annulable ou non.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>fenêtre</code> du document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Cadre parent</title> - <script> +## Propriétés + +| Propriété | Type | Description | +| ------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | La cible de l'événement (la cible de plus haut niveau dans le DOM). | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | Le type d'événement. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement remonte ou non. | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement est annulable ou non. | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | + +## Exemple + +```html +<!DOCTYPE html> +<html> + <head> + <title>Cadre parent</title> + <script> window.addEventListener('beforeunload', function(event) { console.log('Je suis le 1er.'); }); window.addEventListener('unload', function(event) { console.log('Je suis le 3ème.'); }); - </script> - </head> - <body> - <iframe src="child-frame.html"></iframe> - </body> -</html></pre> - -<p>Ci-dessous, le contenu de <code>child-frame.html</code>:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <title>Cadre enfant</title> - <script> + </script> + </head> + <body> + <iframe src="child-frame.html"></iframe> + </body> +</html> +``` + +Ci-dessous, le contenu de `child-frame.html`: + +```html +<!DOCTYPE html> +<html> + <head> + <title>Cadre enfant</title> + <script> window.addEventListener('beforeunload', function(event) { console.log('Je suis le 2nd.'); }); window.addEventListener('unload', function(event) { console.log('Je suis le 4ème et dernier…'); }); - </script> - </head> - <body> + </script> + </head> + <body> ☻ - </body> -</html></pre> + </body> +</html> +``` -<p>Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages <code>console.log</code>.</p> +Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`. -<h2 id="Événements_liés">Événements liés</h2> +## Événements liés -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> +- {{event("DOMContentLoaded")}} +- {{event("readystatechange")}} +- {{event("load")}} +- {{event("beforeunload")}} +- {{event("unload")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<ul> - <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">Event Module Definition — unload</a></li> -</ul> +- [Unloading Documents — unload a document](https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents) +- [Event Module Definition — unload](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload) diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.md b/files/fr/web/api/window/vrdisplayconnect_event/index.md index 888a500d2f..815a35a5d5 100644 --- a/files/fr/web/api/window/vrdisplayconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplayconnect_event/index.md @@ -9,73 +9,68 @@ tags: - vrdisplayconnect translation_of: Web/API/Window/vrdisplayconnect_event --- -<div>{{APIRef("Window")}}</div> +{{APIRef("Window")}} -<div> -<p>L'événement <strong><code>vrdisplayconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur.</p> -</div> +L'événement **`vrdisplayconnect`** de l'[API WebVR](/en-US/docs/Web/API/WebVR_API) est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("VRDisplayEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("VRDisplayEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + <code + ><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect" + >onvrdisplayconnect</a + ></code + > + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Vous pouvez utiliser l'événement <code>vrdisplayconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p> +Vous pouvez utiliser l'événement `vrdisplayconnect` dans une méthode [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) : -<pre class="brush: js">window.addEventListener('vrdisplayconnect', function() { +```js +window.addEventListener('vrdisplayconnect', function() { info.textContent = 'Affichage connecté.'; reportDisplays(); -});</pre> +}); +``` -<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> :</p> +Ou utilisez la propriété du gestionnaire d'événements [`onvrdisplayconnect`](/en-US/docs/Web/API/Window/onvrdisplayconnect) : -<pre class="brush: js">window.onvrdisplayconnect = function() { +```js +window.onvrdisplayconnect = function() { info.textContent = 'Affichage connecté.'; reportDisplays(); -};</pre> +}; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentair</th> - </tr> - <tr> - <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}}</td> - <td>{{Spec2('WebVR 1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentair | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}} | {{Spec2('WebVR 1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.vrdisplayconnect_event")}}</p> +{{Compat("api.Window.vrdisplayconnect_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> - <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li> -</ul> +- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API) +- [MozVr.com](http://mozvr.com/) — démos, téléchargements et autres ressources de l'équipe Mozilla VR. diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md index 75a6c9924a..3e84875409 100644 --- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md @@ -9,73 +9,68 @@ tags: - vrdisplaydisconnect translation_of: Web/API/Window/vrdisplaydisconnect_event --- -<div>{{APIRef("Window")}}</div> +{{APIRef("Window")}} -<div> -<p>L'événement <strong><code>vrdisplaydisconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur.</p> -</div> +L'événement **`vrdisplaydisconnect`** de l'[API WebVR](/en-US/docs/Web/API/WebVR_API) est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("VRDisplayEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("VRDisplayEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + <code + ><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect" + >onvrdisplaydisconnect</a + ></code + > + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Vous pouvez utiliser l'événement <code>vrdisplaydisconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p> +Vous pouvez utiliser l'événement `vrdisplaydisconnect` dans une méthode [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) : -<pre class="brush: js">window.addEventListener('vrdisplaydisconnect', function() { +```js +window.addEventListener('vrdisplaydisconnect', function() { info.textContent = 'Affichage déconnecté'; reportDisplays(); -});</pre> +}); +``` -<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> :</p> +Ou utilisez la propriété du gestionnaire d'événements [`onvrdisplaydisconnect`](/en-US/docs/Web/API/Window/onvrdisplaydisconnect) : -<pre class="brush: js">window.onvrdisplaydisconnect = function() { +```js +window.onvrdisplaydisconnect = function() { info.textContent = 'Affichage déconnecté'; reportDisplays(); -);</pre> +); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentair</th> - </tr> - <tr> - <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}}</td> - <td>{{Spec2('WebVR 1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentair | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}} | {{Spec2('WebVR 1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.vrdisplaydisconnect_event")}}</p> +{{Compat("api.Window.vrdisplaydisconnect_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> - <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li> -</ul> +- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API) +- [MozVr.com](http://mozvr.com/) — démos, téléchargements et autres ressources de l'équipe Mozilla VR. diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.md b/files/fr/web/api/window/vrdisplaypresentchange_event/index.md index c2abcb5e12..5ba67ffc5b 100644 --- a/files/fr/web/api/window/vrdisplaypresentchange_event/index.md +++ b/files/fr/web/api/window/vrdisplaypresentchange_event/index.md @@ -9,81 +9,76 @@ tags: - vrdisplaypresentchange translation_of: Web/API/Window/vrdisplaypresentchange_event --- -<div>{{APIRef("Window")}}</div> +{{APIRef("Window")}} -<div> -<p>L'événement <strong><code>vrdisplaypresentchange</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa.</p> -</div> +L'événement **`vrdisplaypresentchange`** de l'[API WebVR](/en-US/docs/Web/API/WebVR_API) est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("VRDisplayEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("VRDisplayEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + <code + ><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange" + >onvrdisplaypresentchange</a + ></code + > + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Vous pouvez utiliser l'événement <code>vrdisplaypresentchange</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p> +Vous pouvez utiliser l'événement `vrdisplaypresentchange` dans une méthode [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) : -<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function() { +```js +window.addEventListener('vrdisplaypresentchange', function() { if(vrDisplay.isPresenting) { info.textContent = "L'affichage a commencé à présenter."; } else { info.textContent = "L'affichage a cessé de se présenter."; } reportDisplays(); -});</pre> +}); +``` -<p>Ou utilisez la propriété de gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> :</p> +Ou utilisez la propriété de gestionnaire d'événements [`onvrdisplaypresentchange`](/en-US/docs/Web/API/Window/onvrdisplaypresentchange) : -<pre class="brush: js">window.onvrdisplaypresentchange = function() { +```js +window.onvrdisplaypresentchange = function() { if(vrDisplay.isPresenting) { info.textContent = "L'affichage a commencé à présenter."; } else { info.textContent = "L'affichage a cessé de se présenter."; } reportDisplays(); -};</pre> +}; +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}}</td> - <td>{{Spec2('WebVR 1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}} | {{Spec2('WebVR 1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.Window.vrdisplaypresentchange_event")}}</p> +{{Compat("api.Window.vrdisplaypresentchange_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> - <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li> -</ul> +- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API) +- [MozVr.com](http://mozvr.com/) — démos, téléchargements et autres ressources de l'équipe Mozilla VR. |