recursal/MDN huggingface dataset:
window.cancelIdleCallback()
===========================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via `window.requestIdleCallback()`.

Syntaxe
-------


```js
window.cancelIdleCallback(idleCallbackId);
```

### Paramètres

idleCallbackId

L'entier long non-signé retourné par `window.requestIdleCallback()`.

Spécifications
--------------

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-cancelidlecallback-method |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window.history
==============

La propriété en lecture seule **`Window.history`** renvoie une référence à l'objet `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).

 L'objet `History` obtenu a les méthodes suivantes : voir la manipulation de l'historique du navigateur (en-US) 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.

Exemple
-------


```js
history.back(); // similaire au bouton de retour
history.go(-1); // similaire à history.back();
```

Notes
-----

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.

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.

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(), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-history-interface |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window : évènement load
=======================

L'évènement **`load`** est déclenché lorsque la page et toutes ses ressources dépendantes (telles que des feuilles de style et des images) sont complètement chargées. Cela contraste avec `DOMContentLoaded`, qui est déclenché lorsque le *DOM* de la page est chargé sans attendre la fin du chargement des ressources.

Cet évènement n'est pas annulable et ne bouillonne pas.

Syntaxe
-------

Utilisez cet évènement dans des méthodes telles que `addEventListener()`, ou définissez un gestionnaire d'évènement.


```js
addEventListener("load", (event) => {});

onload = (event) => {};
```

Type d'évènement
----------------

Un `Event` générique.

Exemples
--------

Le code suivant affiche un message dans la console lorsque que la page est complètement chargée :


```js
window.addEventListener("load", (event) => {
  console.log("La page est complètement chargée");
});
```


Voici un exemple similaire qui utilise un gestionnaire d'évènement `onload` :


```js
window.onload = (event) => {
  console.log("La page est complètement chargée");
};
```

### Exemple *live*

#### HTML


```html
<div class="controls">
  <button id="reload" type="button">Recharger</button>
</div>

<div class="event-log">
  <label for="eventLog">Journal d'évènements :</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="30"
 id="eventLog"></textarea>
</div>
```


```
body {
  display: grid;
  grid-template-areas: "control log";
}
.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-log {
  grid-area: log;
}
.event-log-contents {
  resize: none;
}
label,
button {
  display: block;
}
#reload {
  height: 2rem;
}
```


#### JavaScript


```js
const log = document.querySelector(".event-log-contents");

const reload = document.querySelector("#reload");
reload.addEventListener("click", () => {
  log.textContent = "";
  window.setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate : ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += `DOMContentLoaded\n`;
});
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| UI Events # event-type-load |
| HTML Standard # delay-the-load-event |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Évènements liés :
    + `DOMContentLoaded`
    + `readystatechange`
    + `beforeunload`
    + `unload`
GlobalEventHandlers.onfocus
===========================

La propriété **`onfocus`**, , rattachée au mixin `GlobalEventHandlers`, est un gestionnaire d'évènements (en-US) qui permet de traiter les évènements `focus` (en-US).

L'évènement `focus` est déclenché lorsque la personne active le focus sur un élément.

Afin que `onfocus` soit déclenché sur les éléments qui ne sont pas des éléments `<input>`, il faut que ces derniers aient un attribut `tabindex`. Voir la section Remettre l'accessibilité au clavier pour plus de détails.

**Note :** Le gestionnaire d'évènement opposé à `onfocus` est `onblur`.

Syntaxe
-------


```js
cible.onfocus = refFonction;
```

### Value

`refFonction` est un nom de fonction ou une expression de fonction. La fonction reçoit un objet `FocusEvent` comme unique argument.

Exemple
-------

Cet exemple utilise `onblur` et `onfocus` pour changer le texte au sein d'un élément `<input>`.

### HTML


```html
<input type="text" value="Cliquez ici" />
```

### JavaScript


```js
let input = document.querySelector("input");

input.onblur = inputBlur;
input.onfocus = inputFocus;

function inputBlur() {
  input.value = "Le focus a été perdu";
}

function inputFocus() {
  input.value = "Le focus est là";
}
```

### Résultat

Essayez de cliquer à l'intérieur et en dehors du champ pour voir son contenu être modifié.

Spécifications
--------------

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'évènement `focus` (en-US)
* Le gestionnaire d'évènement dual : `GlobalEventHandlers.onblur`
beforeprint
===========

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

Informations générales
----------------------

Spécification

HTML5

Interface

Event

Propagation

Non

Annulable

Non

Cible

DefaultView (`<window>`)

Action par défaut

Aucune

Exemples
--------

En utilisant `window.addEventListener()` :


```js
window.addEventListener("beforeprint", (evenement) => {
  console.log("Before print");
});
```

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Evénements liés
---------------

* afterprint (en-US)
window.getSelection
===================

Renvoie un objet selection représentant le ou les objets sélectionnés.

Syntaxe
-------


```js
selection = window.getSelection();
```

Paramètres
----------

* `selection` est un objet de type `Selection`.
Exemple
-------


```js
function foo() {
  var selObj = window.getSelection();
  alert(selObj);
  var selRange = selObj.getRangeAt(0);
  // travailler avec la sélection
}
```

Notes
-----

En 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` de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à window.alert. Cependant, pour utiliser une propriété ou méthode JavaScript de String comme `length` ou `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

Spécification
-------------

DOM Level 0. Ne fait partie d'aucune spécification.

Voir aussi
----------

* Selection API
* `Selection`
* `Range`
* `Document.getSelection()`
* `HTMLInputElement.setSelectionRange()` (en-US)
Window.menubar
==============

La propriété **`Window.menubar`** renvoie l'objet `menubar`, dont la visibilité peut être vérifiée.

Syntaxe
-------


```js
objRef = window.menubar;
```

Exemple
-------

L'exemple HTML complet suivant montre comment la propriété `visible` de l'objet `menubar` est utilisée.


```html
<html>
  <head>
    <title>Divers Tests DOM</title>
    <script>
 var visible = window.menubar.visible;
 </script>
  </head>
  <body>
    <p>Divers Tests DOM</p>
  </body>
</html>
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-window-menubar-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Window.locationbar`
* `Window.personalbar` (en-US)
* `Window.scrollbars`
* `Window.statusbar` (en-US)
* `Window.toolbar` (en-US)
GlobalEventHandlers.onresize
============================

La propriété **`onresize`**,rattachée au mixin `GlobalEventHandlers`, est un gestionnaire d'évènements (en-US) qui permet de traiter les évènements `resize`.

Un évènement `resize` est déclenché après que la fenêtre a été redimensionnée.

Syntaxe
-------


```js
window.onresize = refFonction;
```

### Value

`refFonction` est un nom de fonction ou une expression de fonction. La fonction reçoit un objet `FocusEvent` comme unique argument.

Exemple
-------

### Journaliser l'évolution de la taille de la fenêtre

#### HTML


```html
<p>
  Redimensionnez la fenêtre pour déclencher l'évènement <code>resize</code>.
</p>
<p>Hauteur de la fenêtre : <span id="height"></span></p>
<p>Largeur de la fenêtre : <span id="width"></span></p>
```


#### JavaScript


```js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function resize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = resize;
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSSOM View Module # eventdef-window-resize |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'évènement `resize`
window.closed
=============

### Résumé

Cette propriété indique si la fenêtre référencée est fermée ou non.

### Syntaxe


```js
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.


```js
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.


```js
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
Window.scroll()
===============

La méthode **`Window.scroll()`** permet de faire défiler la fenêtre jusqu'à un endroit donné du document.

Syntaxe
-------


```js
window.scroll(x, y);
window.scroll(options);
```

### Paramètres

`x`

Le numéro de pixel sur l'axe horizontal du document qu'on souhaite avoir affiché dans le coin supérieur gauche.

`y`

Le numéro de pixel sur l'axe vertical du document qu'on souhaite avoir affiché dans le coin supérieur gauche.

Ou avec `options` :

`options`

Un dictionnaire qui contient les paramètres suivants :

`top`

Indique le nombre de pixels sur l'axe vertical le long desquels faire défiler la fenêtre ou l'élément.

`left`

Indique le nombre de pixels sur l'axe horizontal le long desquels faire défiler la fenêtre ou l'élément.

`behavior`

Indique si le défilement devrait être instantané ou doux. Cette option est une chaine de caractères qui doit être l'une de ces valeurs :

* `smooth` : le défilement doit s'animer en douceur
* `instant` : le défilement devrait se produire instantanément, en un seul saut
* `auto` : le comportement de défilement est déterminé par la valeur calculée de (scroll-behavior)


Exemples
--------


```html
<!-- On place le 100e pixel, sur l'axe vertical, en haut de la fenêtre -->

<button onclick="scroll(0, 100);">
  Cliquez pour faire défiler jusqu'au 100e pixel
</button>
```


Avec `options` :


```js
window.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

Notes
-----

`Window.scrollTo()` est en pratique identique à cette méthode. Pour le défilement relatif, voir les méthodes `Window.scrollBy()`, `Window.scrollByLines()`, et `Window.scrollByPages()`.

Pour faire défiler les éléments, voir `Element.scrollTop` et `Element.scrollLeft`.

Spécifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-window-scroll |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Window.scrollByLines()`
* `Window.scrollByPages()`
* `Element.scrollIntoView()`
Window.scrollBy()
=================

Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.

Syntaxe
-------


```js
window.scrollBy(X, Y);
```

### Paramètres

* `X` est le nombre en pixels pour le défilement horizontal.
* `Y` est le nombre en pixels pour le défilement vertical.

ou

`options`

Un dictionnaire avec les paramètres suivants :

`top`

Indique le nombre de pixels le long desquels faire défiler la fenêtre ou l'élément sur l'axe vertical.

`left`

Indique le nombre de pixels le long desquels faire défiler la fenêtre ou l'élément sur l'axe horizontal.

`behavior`

Indique si le défilement devrait être instantané ou doux. Cette option est une chaine de caractères qui doit être l'une de ces valeurs :

* `smooth` : le défilement doit s'animer en douceur
* `instant` : le défilement devrait se produire instantanément, en un seul saut
* `auto` : le comportement de défilement est déterminé par la valeur calculée de (scroll-behavior)



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.

Exemples
--------


```js
// fait défiler d'une page
window.scrollBy(0, window.innerHeight);
```

Notes
-----

window.scrollBy (en-US) fait défiler en fonction d'un nombre précis, alors que window.scroll fait défiler vers une position absolue dans le document. Voir aussi window.scrollByLines (en-US), window.scrollByPages (en-US)

Spécifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollby |
Window.length
=============

Renvoie le nombre de *frames* (que ce soit des éléments `<frame>` ou `<iframe>`) dans la fenêtre.

Valeur
------

Un nombre.

Exemples
--------


```js
if (window.length) {
  // Il s'agit d'un document avec des frames
}
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-length-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window.clearImmediate()
=======================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Cette méthode efface l'action spécifiée par `window.setImmediate` (en-US).

**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 (Firefox) et Webkit (Google/Apple).

Syntaxe
-------


```js
window.clearImmediate(immediateID);
```


où immediateID est un ID retourné par `window.setImmediate` (en-US).

Exemples
--------


```js
let immediateID = setImmediate(() => {
  // Exécute du code
}

document.getElementById("bouton")
  .addEventListener(() => {
  clearImmediate(immediateID);
});
```

Spécifications
--------------

#### No specification found

No specification data found for `api.Window.clearImmediate`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Window.setImmediate()` (en-US)
Window.frameElement
===================

La propriété **`Window.frameElement`** renvoie l'élément (tel que `<iframe>` ou `<object>`) dans lequel la fenêtre est intégrée.

**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 `<object>`, `<iframe>`, ou `<embed>`.

Syntaxe
-------


```js
const frameEl = window.frameElement;
```

### Valeur

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 origin, la valeur est `null` à la place.

Exemple
-------


```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/";
}
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-frameelement-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `window.frames` renvoie un objet de type tableau, listant les sous-cadres directs de la fenêtre courante.
* `window.parent` renvoie la fenêtre parente, qui est la fenêtre contenant le `frameElement` de la fenêtre enfant.
Window.orientation
==================

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Résumé
------

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.

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.

Spécifications
--------------

| Specification |
| --- |
| Compatibility Standard # dfn-window-orientation-angle |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
window.matchMedia
=================

Retourne un nouvel objet `MediaQueryList` (en-US) contenant les résultats de la chaîne de caractères media query spécifiée.

Syntaxe
-------


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

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 \*/
}
```


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) pour plus d'exemples.

Spécifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-window-matchmedia |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Media queries
* Using media queries from code (en-US)
* `MediaQueryList` (en-US)
* `MediaQueryListListener` (en-US)