English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Méthode requestFullscreen() du DOM HTML

Objet Element HTML DOM

requestFullscreen()Méthode pour ouvrir un élément en mode plein écran.

Cette méthode nécessite un préfixe spécifique pour fonctionner dans différents navigateurs (voir la compatibilité navigateur ci-dessous).

Utilisationdocument.exitFullscreen()Méthode pour annuler le mode plein écran.

Syntaxe :

HTMLElement.requestFullscreen()
/* Obtenir l'élément (<html>) pour afficher la page en plein écran */
var elem = document.documentElement;
/* Visualisation en plein écran */
function openFullscreen() {
  si elem.requestFullscreen) {
     elem.requestFullscreen();
  } sinon si (elem.mozRequestFullScreen) {/* Firefox */
     elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari et Opera */
     elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
     elem.msRequestFullscreen();
  }
}
Voyons voir‹/›

Compatibilité navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette méthode complètement. Chaque navigateur nécessite un préfixe spécifique du fournisseur :

Méthode
requestFullscreen()15.0 (Webkit)9.0 (moz)12.10(Webkit)5.1(Webkit)11.0 (ms)

Détails techniques

Valeur de retour :Aucun

Plus d'exemples

Afficher l'élément <video> en mode plein écran :

/* Obtenir l'élément (<video>) */
var elem = document.getElementsByTagName("video")[0];
/* Visualisation en plein écran */
function openFullscreen() {
  si elem.requestFullscreen) {
     elem.requestFullscreen();
  } sinon si (elem.mozRequestFullScreen) {/* Firefox */
     elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari et Opera */
     elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
     elem.msRequestFullscreen();
  }
}
Voyons voir‹/›

Lorsque la page est en mode plein écran, vous pouvez utiliser les styles CSS pour la page :

div:-moz-full-screen {
   background-color: pink;
}
div:-webkit-full-screen {
   background-color: pink;
}
div:fullscreen {
   background-color: pink;
}
Voyons voir‹/›

Références associées

Référence HTML DOM :méthode document.exitFullscreen()

Référence HTML DOM :propriété document.fullscreenElement

Référence HTML DOM :propriété document.fullscreenEnabled

Objet Element HTML DOM