Au travail aujourd’hui, j’ai rencontré un besoin d’affichage en plein écran d’une page web, alors j’ai vérifié Baidu et trouvé un plugin jQuery pour l’affichage plein écran des pages web : jquery FullScreen Plugin. Il permet l’affichage en plein écran des pages web pour une variété de navigateurs différents, notamment FF 10, Chrome et Safari, et sert à fournir aux utilisateurs une version plus lisible de la page web, pouvant être mise à l’échelle <canvas>et <video>élémentée.
Plugin plein écran jQuery
Description
Ce plugin jQuery offre un mécanisme simple à utiliser pour contrôler le nouveau mode plein écran des navigateurs modernes. Actuellement, seuls les navigateurs plus récents basés sur Webkits (comme Chrome et Safari), Firefox et IE11+ offrent cette nouvelle fonctionnalité plein écran.
Utilisation
Passage en mode plein écran
Vous pouvez soit passer la page entière, soit un seul élément HTML en mode plein écran :
$(document).fullScreen(vrai) ;
$(« #myVideo »).plein écran(vrai) ;
Cela ne fonctionne que lorsque le code a été déclenché par une interaction utilisateur (par exemple un événement onclick sur un bouton). Les navigateurs ne permettent pas d’entrer en mode plein écran sans interaction utilisateur.
Sortie du mode plein écran
Le mode plein écran est toujours désactivé via le document, mais ce plugin le permet aussi via n’importe quel élément HTML. Le document propriétaire de l’élément HTML sélectionné est alors utilisé :
$(document).fullScreen(faux) ;
$(« #myVideo »).fullScreen(faux) ;
Requête en mode plein écran
Il suffit de ne pas passer d’argument à la méthode fullScreen pour interroger l’état actuel. La méthode renvoie l’élément plein écran actuel (ou vrai si le navigateur ne le supporte pas) lorsque le mode plein écran est actif, fausse s’il n’est pas actif ou nulle lorsque le navigateur ne supporte pas plein écran du tout. Vous pouvez donc aussi utiliser cette méthode pour afficher un bouton plein écran uniquement lorsque le navigateur supporte le mode plein écran :
$(« #fullscreenButton »).toggle($(document).fullScreen() != null))
Activation du mode plein écran
Le plugin propose une autre méthode pour un simple basculement en mode plein écran :
$(document).toggleFullScreen() ;
Notifications
Le plugin déclenche un événement de changement plein écran sur le document lorsque le mode plein écran est modifié. Si le navigateur rejette un changement d’état en plein écran, alors le plugin déclenche un événement d’erreur en plein écran sur le document. Exemple :
$(document).bind(« fullscreenchange », function() {
console.log (« Plein écran » + ($(document).fullScreen() ? » allumé » : « éteint »)) ;
});
$(document).bind(« fullscreenerror », function() {
alerte (« Changement de plein écran refusé par le navigateur ») ;
});
Cadre plein écran
Entrer en mode plein écran depuis un iframe n’est pas autorisé par défaut, mais il peut être activé avec quelques attributs sur l’iframe :
<iframe src="iframe.html » webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Problèmes connus
Dans IE 11, une page vide s’affiche lorsqu’on entre en plein écran depuis un iframe. Aucune idée pourquoi. Toute aide est la bienvenue.
Dans Safari (du moins dans Safari 7), aucune saisie clavier n’est autorisée en mode plein écran.
Adresse GitHub : https://github.com/kayahr/jquery-fullscreen-plugin
Touristes, si vous voulez voir le contenu caché de ce post, s’il vous plaît Répondre
| 
Publié sur 14/08/2017 16:34:52
|
|
|
Publié sur 14/08/2017 17:08:18
|
Publié sur 25/11/2017 14:35:17
|
