API JavaScript plein écran : fonctionnement en plein écran
L'API plein écran peut contrôler l'affichage plein écran du navigateur, permettant à un nœud Element (et à des sous-nœuds) d'occuper tout l'écran de l'utilisateur. À l'heure actuelle, les dernières versions de tous les principaux navigateurs prennent en charge cette API (y compris IE11), mais vous devez ajouter le préfixe du navigateur lorsque vous l'utilisez.
méthode
demandepleinécran()
La méthode requestFullscreen du nœud Element peut mettre le nœud en plein écran.
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("videoElement"));
Firefox et Chrome se comportent légèrement différemment lors d'un zoom avant sur un nœud. Firefox ajoute automatiquement une règle CSS au nœud pour agrandir l'élément à l'état plein écran, width: 100%; height: 100%tandis que Chrome place le nœud au centre de l'écran, en conservant la taille d'origine et en noircissant les autres parties. Pour que Chrome se comporte de la même manière que Firefox, vous pouvez personnaliser une règle CSS.
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
Quitter le mode plein écran()
La méthode exitFullscreen de l'objet document est utilisée pour annuler le plein écran. La méthode est également précédée du navigateur.
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
exitFullscreen();
L'utilisateur peut également quitter la touche plein écran en appuyant manuellement sur la touche ESC ou la touche F11. De plus, charger une nouvelle page, ou changer d'onglet, ou passer du navigateur à une autre application (en appuyant sur Alt-Tab), entraînera également la sortie de l'état plein écran.
Les attributs
document.fullscreenElement
La propriété fullscreenElement renvoie le nœud Element qui est en plein écran, ou null si aucun nœud n'est actuellement en plein écran.
var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
document.fullscreenEnabled
La propriété fullscreenEnabled renvoie une valeur booléenne indiquant si le document actuel peut être basculé en plein écran.
var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
if (fullscreenEnabled) {
videoElement.requestFullScreen();
} else {
console.log('浏览器当前不能全屏');
}
événement plein écran
Les événements suivants sont liés aux opérations en plein écran.
-
Événement fullscreenchange : déclenché lorsque le navigateur entre ou quitte le mode plein écran.
-
événement fullscreenerror : déclenché lorsque le navigateur ne peut pas entrer en plein écran, ce qui peut être dû à des raisons techniques ou au refus de l'utilisateur.
document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
});
Lorsque l'événement fullscreenchange se produit dans le code ci-dessus, l'attribut fullscreenElement détermine s'il faut entrer en plein écran ou quitter le plein écran.
CSS pour l'état plein écran
En mode plein écran, le CSS de la plupart des navigateurs prend en charge :full-screenles pseudo-classes, et seul IE11 prend en charge :fullscreenles pseudo-classes. En utilisant cette pseudo-classe, il est possible de définir des propriétés CSS individuelles pour l'état plein écran.
:-webkit-full-screen {
/* properties */
}
:-moz-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:full-screen {
/*pre-spec */
/* properties */
}
:fullscreen {
/* spec */
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}