Introduction aux méthodes, propriétés et événements JavaScript pour contrôler le mode plein écran de divers navigateurs_compétences Javascript

Copier le code Le code est le suivant :

// Jugez divers navigateurs et find La méthode correcte est
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element. mozRequestFullScreen( );
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
>

//Lancer le plein écran !
launchFullScreen(document.documentElement); //La page Web entière
launchFullScreen(document.getElementById("videoElement")); //Un certain élément de page

Appelez la méthode plein écran sur l'élément de page que vous souhaitez afficher en plein écran. La fenêtre du navigateur deviendra plein écran, mais il sera d'abord demandé à l'utilisateur d'autoriser le mode plein écran. Sachez que les utilisateurs rejetteront très probablement le mode plein écran. Si l'utilisateur exécute le mode plein écran, la barre d'outils du navigateur et les autres menus de boutons seront masqués et votre page couvrira tout l'écran.

Quitter le mode plein écran

Cette méthode exitFullscreen (qui nécessite également le préfixe du navigateur) fera sortir le navigateur du mode plein écran et passera en mode normal.

Copier le code Le code est le suivant :

// Déterminer le type de navigateur
fonction exitFullscreen( ) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document .webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

//Quitter le mode plein écran !
exitFullscreen();

Il convient de noter que exitFullscreen ne peut être appelé que par l'objet document, et non par l'objet transmis lors du démarrage du mode plein écran.

Propriétés et événements en plein écran

Malheureusement, les propriétés plein écran et les méthodes associées de l'événement nécessitent également l'ajout du préfixe du navigateur, mais je pense que cela ne sera pas nécessaire de sitôt.

1.document.fullScreenElement : Élément de page Web affiché en plein écran.
2.document.fullScreenEnabled : Déterminez s'il est actuellement en plein écran.

L'événement fullscreenchange sera déclenché lorsque le plein écran est démarré ou lorsque le plein écran est quitté :

Copier le code Le code est le suivant :

var fullscreenElement = document.fullscreenElement || .mozFullScreenElement | | document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled ||

Vous pouvez toujours utiliser la méthode ci-dessus pour déterminer le type de navigateur pour préfixer cet événement.

Style CSS plein écran

Divers navigateurs fournissent une règle de style CSS très utile pour le mode plein écran :

Copier le code Le code est le suivant ::-webkit-full-screen { / *propriétés* /

}

:-moz-full-screen {
/* propriétés */}

:-ms-fullscreen {
/* propriétés */

}

:plein écran { /*pré-spec */
/* propriétés */

}

:fullscreen { /* spec */
/* propriétés */

}

/* éléments plus profonds */
:-webkit-full-screen video {

largeur : 100%;

hauteur : 100%;
}

/* styliser la toile de fond*/
::backdrop {

/* propriétés */

}
::-ms-backdrop {
/* propriétés */
>


Dans certains cas, les styles WebKit peuvent causer des problèmes, et vous feriez mieux de garder ces styles simples.

Ces API plein écran sont super simples et super utiles. J'ai vu cette API pour la première fois dans la démo BananaBread de MDN. C'était un jeu de tir qui devait juste être en plein écran. Il utilisait l'écoute d'événements pour détecter l'état plein écran. N'oubliez pas ces API utiles et vous pourrez les utiliser en cas de besoin.