Javascript Girl
  1. Javascript Girl
  3. Définir la fenêtre en plein écran (REAL fullscreen; fonctionnalité F11) par javascript
Intereting Posts
Javascript combine des images JQuery Cliquez sur ON pour déclencher la fermeture en utilisant .load Sencha Touch 2 – Aide par proxy JSONP, le modèle a toujours des valeurs nulles Trouver le «type» d'un élément d'entrée Quel est le but de la bibliothèque ngrx / effets? Les rails précompilent Pourquoi javascript ne fonctionne pas localement mais chez heroku ça fonctionne Javascript / jQuery: Comment détecter img est-il entièrement téléchargé ou non? Document.createElement ('script') … ajoutant deux scripts avec un rappel Je ne comprends pas comment JSONP est TOUT différent de AJAX Comment vérifier si une Textarea est vide dans JavaScript ou Jquery? Ancre vide Pas de point-virgule avant provoque-t-il une erreur en Javascript? Gulp: comment copier plusieurs fichiers et garder la structure du dossier Est-il possible de configurer dynamiquement le destinataire de MAILTO: avec seulement HTML et JavaScript? Placez le curseur sur une position spécifique dans CKEditor

Définir la fenêtre en plein écran (REAL fullscreen; fonctionnalité F11) par javascript

Il y a plusieurs questions à ce sujet, certains disent que ce n'est pas possible, certains disent qu'il est possible dans IE tel que le mode Internet Explorer en plein écran? Et je me demande une solution universelle et une réponse à cela.

Je crée une page Web de la galerie de photos, et la galerie fait vraiment une différence lorsqu'elle est vue en plein écran (comme le dit le titre, je parle de véritable écran complet, pas avec des barres et des fenêtres, etc.) et je voudrais placer un bouton Pour le plein écran. (Non, je ne vais pas forcément FS sans l'intention de l'utilisateur, je déteste ce genre de "fonctionnalité" aussi). Il est possible dans Flash lorsqu'il est initié par une action lancée par l'utilisateur, comme le clic de bouton, et je me demandais si La chose est disponible pour Javascript aussi. Logiquement, il devrait avoir un mécanisme similaire au mode en plein écran lancé par l'utilisateur Flash / SL. S'il n'y a pas de fonctionnalité "universelle" qui fonctionnera pour tous, je suis d'accord (mieux que rien) pour une fonctionnalité partielle (je veux dire en appuyant TOUS les navigateurs par cela, PAS la largeur / hauteur de la fenêtre de réglage etc. ne viennent pas avec réponse En disant de régler la largeur / la hauteur de la fenêtre, je sais comment le faire, je ne le recherche pas non plus).

    Ceci est maintenant possible dans les dernières versions de Chrome, Firefox et IE (11).

    Suite aux indications de Zuul sur ce fil , j'ai édité son code pour inclure IE11 et l'option en plein écran tout élément de choix sur votre page.

    JS: 

    function toggleFullScreen(elem) { // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) { if (elem.requestFullScreen) { elem.requestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } }

    HTML: 

     <input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

    Où "document.body" est un élément que vous souhaitez.

    Notez également que l'exécution de ces commandes en plein écran à partir de la console ne semble pas fonctionner sur Chrome ou IE. J'ai cependant eu succès avec Firebug dans Firefox.

    Une autre chose à noter est que ces commandes "en plein écran" n'ont pas de barre de défilement verticale, vous devez spécifier cela dans le CSS: 

     *:fullscreen *:-ms-fullscreen, *:-webkit-full-screen, *:-moz-full-screen { overflow: auto !important; }

    Le "! Important" semble être nécessaire pour que IE le rend

    Voici un exemple de fonctionnement .

    Non. Les versions antérieures d'IE (≤6) l'ont autorisé, mais cette fonctionnalité est considérée comme un problème de sécurité, donc aucun navigateur moderne ne l'autorise.

    Vous pouvez toujours appeler window.open(url,'','fullscreen=yes') , ce qui vous permet d'obtenir 90% de votre chemin, mais a des résultats légèrement différents:

    • IE ouvre une fenêtre avec seulement la barre de titre et la barre d'URL. La fenêtre est dimensionnée pour remplir l'écran entier et couvre la barre des tâches de Windows .
    • Mozilla ouvre également une fenêtre avec seulement la barre de titre et la barre d'URL. Cependant, la nouvelle fenêtre hérite des dimensions de la fenêtre d'ouverture. Si la fenêtre d'ouverture est optimisée, la nouvelle fenêtre est ouverte maximisée. (La barre des tâches n'est pas couverte.)
    • Chrome ouvre également une fenêtre avec seulement la barre de titre et la barre d'URL. La nouvelle fenêtre hérite des dimensions de la fenêtre d'ouverture, mais elle n'est jamais ouverte maximisée (même si la fenêtre d'ouverture est optimisée).

    C'est aussi proche que vous obtiendrez avec JavaScript. Votre autre option serait de construire quelque chose dans Flash (ugh!) , Ou simplement avoir votre bouton "plein écran" afficher une boîte à lumière qui indique "Appuyez sur F11 pour aller en plein écran", et cacher la boîte window.resize sur window.resize ou en cliquant sur un bouton d'annulation Dans la lightbox.

    Edit: Une API à plein écran appropriée (première proposée par Mozilla et plus tard publiée sous la forme d'une proposition W3C ) a été implémentée par Webkit (Safari 5.1 + / Chrome 15+) et Firefox (10+). Un bref historique et exemples d'utilisation ici. Notez que IE10 ne supposerait pas l'API.

    Vous pouvez le faire avec une applet java signée qui a l'autorisation d'exécuter un script d'automatisation pour émettre la frappe pour passer en mode plein écran. Mais, il s'agit d'un hack total qui ne serait pas très pratique, à moins que vos utilisateurs n'aiment pas votre site à manipuler leurs machines.

    Le support en plein écran via le script java n'est pas implémenté pour Chrome ou Firefox. Cependant, vous pouvez l'avoir pour MSIE. Mais ce n'est pas non plus une fonctionnalité F11.

    Même chrome.exe -kiosk n'ouvre pas la page en mode plein écran.

    La raison est qu'il n'est pas recommandé de forcer l'utilisateur et d'ouvrir votre application en mode plein écran. Si ce n'est pas tout, les popups provenant de différents sites Web s'ouvriront en mode plein écran et vous obtiendrez la fermeture de tous ces éléments.