Hoy en el trabajo, me encontré con la necesidad de mostrar una página web a pantalla completa, así que consulté Baidu y encontré un plugin de jQuery para la visualización a pantalla completa de páginas web: jquery FullScreen Plugin. Permite la visualización a pantalla completa de páginas web para una variedad de navegadores diferentes, incluyendo FF 10, Chrome y Safari, y se utiliza para ofrecer a los usuarios una versión más legible de la página web que puede <canvas>escalarse y <video>modular.
Plugin de pantalla completa jQuery
Descripción
Este plugin jQuery ofrece un mecanismo sencillo de usar para controlar el nuevo modo de pantalla completa de los navegadores modernos. Actualmente, solo los navegadores más recientes basados en Webkits (como Chrome y Safari), Firefox e IE11+ ofrecen esta nueva función de pantalla completa.
Uso
Entrando en modo pantalla completa
Puedes cambiar toda la página o un solo elemento HTML a modo pantalla completa:
$(documento).pantalla completa(true);
$("#myVideo").pantalla completa(verdadero);
Esto solo funciona cuando el código se activó mediante una interacción del usuario (por ejemplo, un evento de clic en un botón). Los navegadores no permiten entrar en modo pantalla completa sin interacción del usuario.
Salir del modo pantalla completa
El modo pantalla completa siempre se cierra a través del documento, pero este plugin también lo permite mediante cualquier elemento HTML. Entonces se utiliza el documento propietario del elemento HTML seleccionado:
$(documento).pantalla completa(falso);
$("#myVideo").pantalla completa(falso);
Consulta en modo pantalla completa
Simplemente no pasa ningún argumento al método fullScreen para consultar el estado actual. El método devuelve el elemento actual de pantalla completa (o verdadero si el navegador no lo soporta) cuando el modo pantalla completa está activo, falso si no está activo o nulo cuando el navegador no soporta pantalla completa Modo, en absoluto. Así que también puedes usar este método para mostrar un botón a pantalla completa solo cuando el navegador soporte el modo pantalla completa:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Desactivando modo pantalla completa
El plugin ofrece otro método para cambiar el modo de pantalla completa de forma sencilla:
$(document).toggleFullScreen();
Notificaciones
El plugin activa un evento de cambio de pantalla completa en el documento cuando se ha cambiado el modo de pantalla completa. Si el navegador rechaza un cambio de estado a pantalla completa, el plugin activa un evento de error de pantalla completa en el documento. Ejemplo:
$(document).bind("fullscreenchange", function() {
console.log("Pantalla completa" + ($(documento).pantallaCompleta() ? " encendido" : "apagado"));
});
$(document).bind("fullscreenerror", function() {
alert("Navegador rechazado cambio de pantalla completa");
});
Pantalla completa iframe
Entrar en modo pantalla completa desde un iframe no está permitido por defecto, pero se puede activar con algunos atributos en el iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAlpermitFullScreen allowFullScreen>
</iframe>
Problemas conocidos
En IE 11 se muestra una página vacía al entrar en pantalla completa desde un iframe. No tengo ni idea de por qué. Cualquier ayuda es bienvenida.
En Safari (al menos en Safari 7) no se permite la entrada con teclado en modo pantalla completa.
Dirección de GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Turistas, si queréis ver el contenido oculto de esta publicación, por favor Respuesta
| 
Publicado en 14/8/2017 16:34:52
|
|
|
Publicado en 14/8/2017 17:08:18
|
Publicado en 25/11/2017 14:35:17
|
