web-dev-qa-db-fra.com

Lancer un site web en mode plein écran

Je cherche un truc pour mettre mon site Web en mode plein écran sans interaction humaine.

J'ai trouvé quelques exemples en utilisant les techniques de HTML5, mais tout doit alors être déclenché par une interaction humaine.

Ce site sera affiché dans un téléviseur ...

Je pense déjà à charger le site Web en utilisant un fichier SWF en mode plein écran, mais au lieu d'aller dans cette direction, j'aimerais souligner toutes les possibilités en utilisant uniquement le modèle par défaut (html, css et javascript)

javascripthtml5fullscreen
17
Marcio Barroso

Vous ne pouvez pas forcer un site Web à afficher en mode plein écran.

Imaginez les problèmes de sécurité si cela était possible.
Des sites Web malveillants pourraient "détourner" le bureau d'une personne moins familiarisée à l'informatique pour toutes sortes d'activités douteuses.

All des api en plein écran de JS génèrent une erreur comme celle-ci:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." Si vous essayez simplement de l’appeler à partir de votre code.

Je suis convaincu que Flash est similaire, en ce sens qu'il nécessite une interaction de l'utilisateur pour passer en plein écran. Sinon, nous aurions vu notre juste part de popups plein écran qu'il est presque impossible de fermer.

25
Cerbrus

D'autres réponses décrivent déjà comment vous pouvez passer en mode plein écran de manière plus ou moins indépendante du navigateur . Cependant, le problème du besoin d'interaction de l'utilisateur reste.

Vous ne pouvez pas forcer l'affichage de votre page Web en mode plein écran pour des raisons de sécurité . L'interaction de l'utilisateur est nécessaire à cet effet.

En outre, le navigateur quitte le mode plein écran chaque fois que l'utilisateur accède à une autre page, même sur le même site Web, et il devra effectuer une "interaction utilisateur" sur chaque page pour revenir en mode plein écran.
C'est la raison pour laquelle votre site Web doit comporter une seule page si vous voulez qu'il soit plein écran.

Voici ce que je suggère: Utilisez une seule page de démarrage comportant un iFrame caché.

Chaque fois que l'utilisateur clique n'importe où ou appuie sur une touche, il suffit de définir cette iFrame pour qu'elle soit plein écran et de l'afficher. Lorsque vous recevez un événement en quittant le mode plein écran, masquez à nouveau iFrame pour afficher le splash.

Les liens s'ouvrent dans le même cadre par défaut, vous resterez donc en mode plein écran jusqu'à ce que l'utilisateur le quitte explicitement ou que certains liens s'ouvrent dans un nouvel onglet.

Voici un exemple qui fonctionne dans Chrome:
( Voyez-le en action. Utilisez d’autres réponses pour le rendre indépendant du navigateur.)

<html>
<head>
    <script language="jscript">
        function goFullscreen() {
            // Must be called as a result of user interaction to work
            mf = document.getElementById("main_frame");
            mf.webkitRequestFullscreen();
            mf.style.display="";
        }
        function fullscreenChanged() {
            if (document.webkitFullscreenElement == null) {
                mf = document.getElementById("main_frame");
                mf.style.display="none";
            }
        }
        document.onwebkitfullscreenchange = fullscreenChanged;
        document.documentElement.onclick = goFullscreen;
        document.onkeydown = goFullscreen;
    </script>
</head>
<body style="margin:0">
    <H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
    <iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>

Notez cependant que les sites Web interdisent souvent l'intégration, par exemple être affiché à l'intérieur d'un iframe. L'exemple utilisé initialement utilisait le site Web W3Schools à la place de la documentation Python, mais il définissait l'en-tête 'X-Frame-Options' sur 'sameorigin' (interdiction de l'intégration multisite) et son fonctionnement a cessé.

P.S. J'aime l'idée de simuler un système d'exploitation complet dans un navigateur, et c'est encore mieux en plein écran! :) Changez votre OS!
En outre, je ne suis pas un développeur Web. Je pensais que cette question serait intéressante à explorer.

6
EvgEnZh

Vous pourrez peut-être utiliser les méthodes requestFullScreen () comme décrit à https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode .

Remarque: cela nécessite toujours une intervention de l'utilisateur, mais évitez d'utiliser le flash.

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

toggleFullScreen();

Cela permet à la page d'activer le plein écran, et pourrait éventuellement être activé via le chargement de page sur une page javascript. Cependant, les anciens navigateurs ne sont pas pris en charge.

4
Kami

Lorsque j'ai eu besoin de faire quelque chose de similaire, j'ai utilisé un écran de démarrage. Le bouton pour continuer en mode plein écran l'a demandé comme attribut d'un JS pop:

 onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"

Ce n'est pas complet, mais a fonctionné mieux que toutes les autres méthodes que j'ai trouvées. Vous ne pourrez probablement pas faire cela sans intervention de l'utilisateur. Par conséquent, l'utilisation de quelque chose comme un écran d'accueil vous permet de réduire l'intrusion à quelque chose de plus communément accepté.

1
Nicholas

Ce n’est pas exactement ce que recherchait le PO, mais dans ma situation particulière, j’ai trouvé une combinaison de mode kiosque et de style dynamique.

Je cherchais à démarrer un navigateur avec une URL particulière et à le faire démarrer en mode plein écran. Le cas d'utilisation est peu ou pas d'interaction utilisateur sur un terminal dans une usine de fabrication avec un écran d'état. Après la mise sous tension, il ne doit afficher que l’état sans interaction (c’est-à-dire n’afficher aucun des éléments de l’interface utilisateur de configuration, à moins que l’utilisateur n’interagisse).

Peut-être pas réaliste sur un site complexe, mais mon utilisation était un élément particulier de "volet" (div dans ce cas). Pour me concentrer sur la div en particulier, j'ai caché les autres div et défini les styles en conséquence. S'il se trouve qu'il y a une interaction utilisateur pour changer de plein écran, je (1) utilise le document myElement. * RequestFullScreen () habituel. * Appels exitFullscreen (), (2) affiche/masque les autres divs et (3) switch entre les classes ci-dessous:

.right-pane-fullscreen
{
    margin-left: 0px;
}

.right-pane-normal
{
    margin-left: 225px;
}

Discussion connexe sur l'utilisation du mode kiosque dans Chrome (sachez que d'autres processus Chrome exécutés avant le lancement du mode kiosque peuvent empêcher son fonctionnement) Ouverture du navigateur Chrome en mode pleine fenêtre ou kiosque sous Windows 7

0
pigeon