No trabalho hoje, encontrei a necessidade de exibição em tela cheia de uma página web, então verifiquei o Baidu e encontrei um plugin jQuery para exibição em tela cheia das páginas web: jquery FullScreen Plugin. Ele permite a exibição em tela cheia de páginas web para diversos navegadores, incluindo FF 10, Chrome e Safari, e é usado para fornecer aos usuários uma versão mais legível da página web, que pode ser <canvas>escalada e <video>elementada.
Plugin de Tela Completa jQuery
Descrição
Este plugin jQuery oferece um mecanismo simples de usar para controlar o novo modo de tela cheia dos navegadores modernos. Atualmente, apenas navegadores mais recentes baseados em Webkits (como Chrome e Safari), Firefox e IE11+ oferecem esse novo recurso em tela cheia.
Uso
Entrando no modo tela cheia
Você pode alternar a página inteira ou um único elemento HTML para o modo tela cheia:
$(documento).tela cheia(verdadeiro);
$("#myVideo").fullScreen(verdadeiro);
Isso só funciona quando o código foi acionado por uma interação do usuário (por exemplo, um evento onclick em um botão). Navegadores não permitem entrar no modo tela cheia sem interação do usuário.
Saindo do modo tela cheia
O modo tela cheia é sempre encerrado pelo documento, mas este plugin permite isso também por qualquer elemento HTML. O documento proprietário do elemento HTML selecionado é então usado:
$(documento).tela cheia(falso);
$("#myVideo").fullScreen(falso);
Consulta ao modo tela cheia
Basta passar nenhum argumento para o método fullScreen para consultar o estado atual. O método retorna o elemento atual em tela cheia (ou verdadeiro se o navegador não suportar isso) quando o modo tela cheia está ativo, falso se não estiver ativo ou nulo quando o navegador não suporta tela cheia modo de jeito nenhum. Então, você também pode usar esse método para exibir um botão em tela cheia somente quando o navegador suporta o modo tela cheia:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Alternando o modo tela cheia
O plugin oferece outro método para alternar o modo em tela cheia simples:
$(document).toggleFullScreen();
Notificações
O plugin aciona um evento de mudança de tela completa no documento quando o modo de tela cheia é alterado. Se o navegador rejeitou uma alteração de estado em tela cheia, o plugin aciona um evento de erro de tela cheia no documento. Exemplo:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen " + ($(document).fullScreen() ? " ligado" : "desligado"));
});
$(document).bind("fullscreenerror", function() {
alert("Navegador rejeitou mudança de tela cheia");
});
Iframe em tela cheia
Entrar no modo tela cheia a partir de um iframe não é permitido por padrão, mas pode ser ativado com alguns atributos no iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Questões conhecidas
No IE 11, uma página em branco é exibida ao entrar em tela cheia dentro de um iframe. Não faço ideia do porquê. Qualquer ajuda é bem-vinda.
No Safari (pelo menos no Safari 7) não é permitido o modo de tela cheia com o teclado.
Endereço do GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Turistas, se quiserem ver o conteúdo oculto deste post, por favor Resposta
| 
Publicado em 14/08/2017 16:34:52
|
|
|
Publicado em 14/08/2017 17:08:18
|
Publicado em 25/11/2017 14:35:17
|
