/ / Exiba e navegue dentro de um site em tela cheia - javascript, jquery, tela cheia

Exiba e navegue dentro de um site em tela cheia - javascript, jquery, fullscreen

Gostaria de exibir meu site no modo "tela cheia". Para isso, adiciono ao meu site este script: https://github.com/sindresorhus/screenfull.js. Isso me permite exibir a página no modo "tela cheia".

Carrego o rodapé para exibir um botão que ativa o modo de tela cheia. Está funcionando muito bem.

aqui está o meu rodapé:

  <li><a href="#" class="fullscreen">Full screen</a><br /></li>

aqui estão meus Js:

if (screenfull.enabled) {
// Display the button if the browser is compatible
$(".fullscreen").show();
}

$(".fullscreen").toggle(function() {
screenfull.request();
}, function() {
screenfull.exit();
});

Caso contrário, ao clicar em um link (redirecionar o usuário para outra página), o modo "tela cheia" é cancelado. Alguém sabe como consertá-lo?

É possível desenvolver um site no modo "tela cheia" e permitir que o usuário navegue sem sair desse modo? Estou tomando todos os recursos.

obrigado

Respostas:

1 para resposta № 1

Pelo que vejo nesta biblioteca, você precisa colocara página para a qual você está direcionando o usuário em um iframe e, em seguida, exiba esse iframe. A biblioteca para a qual você aponta possui uma página de amostra que inclui uma amostra de como carregar uma página externa em tela cheia. O código é o seguinte:

var iframe = document.createElement("iframe")
iframe.setAttribute("id", "external-iframe");
iframe.setAttribute("src", "http://bbc.com");
iframe.setAttribute("frameborder", "no");
iframe.style.position = "absolute";
iframe.style.top = "0";
iframe.style.right = "0";
iframe.style.bottom = "0";
iframe.style.left = "0";
iframe.style.width = "100%";
iframe.style.height = "100%";
$("#container").prepend(iframe);
document.body.style.overflow = "hidden";

Tirei esse código do exemplo em http://sindresorhus.com/screenfull.js/.