La copie de code est la suivante:
// juge divers navigateurs et trouvez la bonne méthode
fonction lankfullScreen (élément) {
if (element.requestfullScreen) {
element.requestfullScreen ();
} else if (element.mozrequestfullScreen) {
element.mozrequestfullScreen ();
} else if (element.webkitRequestfullScreen) {
element.webkitRequestfullScreen ();
} else if (element.msRequestfullScreen) {
element.msRequestfullScreen ();
}
}
// Démarrez plein écran!
LaunchullScreen (document.DocumentElement);
LaunchullScreen (document.getElementById ("VideoElement"));
Appelez la méthode en plein écran sur les éléments de la page que vous souhaitez afficher en plein écran, et la fenêtre du navigateur deviendra plein écran, mais l'utilisateur demandera d'abord à l'utilisateur d'autoriser le mode plein écran. Sachez que les utilisateurs sont susceptibles de rejeter le mode plein écran. Si l'utilisateur exécute le mode plein écran, la barre d'outils du navigateur et d'autres menus de bouton seront masqués et votre page couvrira l'ensemble de l'écran.
Sortez en mode plein écran
Cette méthode de sortie de l'extérieur (qui nécessite également un préfixe de navigateur) amènera le navigateur à quitter le mode plein écran et à devenir le mode normal.
La copie de code est la suivante:
// 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 ();
}
}
// quitte le mode plein écran!
exitfullScreen ();
Il convient de noter que l'ExitfullScreen ne peut être appelé que par l'objet de document, plutôt que par l'objet passé lors du démarrage de l'écran plein.
Propriétés et événements en plein écran
Malheureusement, les propriétés en plein écran et les méthodes connexes pour les événements nécessitent également le préfixe du navigateur, mais je pense que cela ne sera pas nécessaire bientôt.
1.Document.fullScreelement: élément de page Web en plein écran.
2.Document.fullScreenEnabled: détermine s'il est actuellement en plein écran.
L'événement FullScreenchange sera déclenché lorsque le plein écran sera démarré ou sorti:
La copie de code est la suivante:
var fullScreeNelement = document.fullScreelement || document.MozfullScreeNlement ||
var fullScreenEnabled = document.fullScreenNabled || Document.MozfullScreenEnabled ||
Vous pouvez toujours préfixer cet événement en utilisant la méthode ci-dessus pour juger le type de navigateur.
CSS de style plein écran
Divers navigateurs fournissent une règle de style CSS très utile en mode plein écran:
Copiez le code comme suit :: - webkit-full-écran {
/* propriétés */
}
: -moz-full-écran {
/* propriétés */
}
: -ms-fullScreen {
/* propriétés */
}
: plein écran {/ * pre-spec * /
/* propriétés */
}
: plein écran {/ * spec * /
/* propriétés */
}
/ * Éléments plus profonds * /
: -webkit-full-écran vidéo {
Largeur: 100%;
hauteur: 100%;
}
/ * styliser la toile de fond * /
:: toile de fond {
/* propriétés */
}
:: - MS-BackDrop {
/* propriétés */
}
Dans certains cas, il y a des problèmes avec les styles WebKit, et vous feriez mieux de garder ces styles simples.
Ces API à écran complet sont super simples et super utiles. La première fois que j'ai vu cette API dans la démo de Bananabread de MDN, c'était un jeu de tir qui se trouvait juste être un écran complet, qui a utilisé l'écoute d'événements pour détecter l'état d'écran complet. N'oubliez pas ces API utiles, vous pouvez les récupérer lorsque vous en avez besoin.