Définir la fenêtre en plein écran (RÉEL plein écran; F11 fonctionnalité) par javascript

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

Je suis en train de construire une galerie de photo page web, et la galerie qui fait vraiment une différence lorsqu'elles sont visualisées en plein écran (comme le dit le titre, je parle de vrai plein écran, pas avec des bars et de la fenêtre de chrome etc), et je voudrais mettre un bouton pour un affichage plein écran. (non, je n'entrerai pas avec force FS sans que l'utilisateur a l'intention, je déteste ce genre de "fonctionnalité" de trop), Il EST possible en Flash lorsque initié par un utilisateur de lancer une action à un bouton, cliquez, et je me demandais si une telle chose est disponible pour Javascript aussi. Logiquement, il devrait y avoir un mécanisme similaire à Flash/SL initié par l'utilisateur en mode plein écran. Si il n'y a pas "universelle", une fonctionnalité qui sera le même pour tous, je suis ok (mieux que rien) pour une partie de la fonctionnalité (je veux dire le soutien de CERTAINS des navigateurs par qui, PAS fenêtre de réglage de la largeur/hauteur etc. ne vient pas avec une réponse disant pour définir la largeur de la fenêtre ou de la hauteur, je sais comment le faire, je ne suis PAS à la recherche pour elle) trop.

Devinez quoi, c'est pas possible! 🙂 Du navigateur JavaScript est verrouillé vers le bas ces jours-ci. Si c'était l'année 1999, on pouvait le faire.
double possible de la Force de Chrome/Firefox en Plein Écran?
pas vraiment. Qui pose des questions sur la prévention de l'utilisateur de quitter le mode plein écran.
Assez juste... mais le fait est que cette question a été posée plusieurs fois, la réponse est toujours "Non, vous ne pouvez le faire que si vous êtes de prendre une extension". stackoverflow.com/search?q=firefox+full+screen
la plupart de ces questions soit dire à redimensionner la fenêtre à l'écran largeur/hauteur, ou tout simplement dire qu'il n'est pas possible. mais certaines sources (comme celui que j'ai posté dans la question) dire que c'est possible dans une certaine mesure, et j'ai ouvert la question que je pensais à ces questions, tout proche, ne répondaient pas exactement à ma question et je n'ai pas envie de ressusciter des morts sujets.
La question que vous vous lien ici s'applique à IE. Comme vous savez peut-être, c'est à dire est connu pour fournir des fonctionnalités qu'aucun autre navigateur n'est, en effet, cela peut être une des raisons pour lesquelles l'utilisation d'Internet Explorer a été et est généralement déconseillé. Je sais que je frémis d'horreur à chaque fois que je rentre à la maison et de voir l'ouvrir sur mes parents ordinateur en dépit de mon insistance à l'effet contraire. Lorsque vous prenez cela en compte, le fait qu'il est possible dans IE ne devrait guère vous conduire à croire qu'il y a un moyen dans les autres navigateurs et les gens qui disent le contraire ne savent pas le secret. Il ne peut pas être fait, pour une bonne raison
Je pense la même chose sur IE (même si je pense que ça va dans la bonne voie maintenant, ces derniers temps), mais si IE peut le faire, j'ai pensé que peut-être que d'autres le peuvent aussi. La capacité à faire de même en Flash/SL augmentée mes convictions à ce sujet peut-être qu'ils sont juste en utilisant certaines fonctionnalités du navigateur pour aller FS. et il ne peut y avoir d'autres façons en utilisant les plugins' de la fonctionnalité de trop (oui, je suis d'accord, c'est hors sujet, peut-être mon premier bilan de demander à un javascript seule solution est incorrecte).

InformationsquelleAutor Can Poyrazoğlu | 2011-08-24

C'est désormais possible dans les dernières versions de Chrome, Firefox et IE(11).

Suivant les pointeurs par Zuul sur ce fil, j'ai édité son code pour inclure IE11 et l'option plein écran de n'importe quel élément de votre 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ù "le document.corps" est de tout élément que vous le souhaitez.

Également noter que d'essayer d'exécuter ces commandes de l'écran de la console ne semble pas fonctionner sur Chrome ou IE. J'ai eu du succès avec Firebug dans Firefox si.

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

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

Le "!important" semble être nécessaire pour IE rendre

Voici un exemple de ce travail.

Cette fonction est utile. Merci.
c'est cool (Y)
Passé par presque toutes les threds. Sauvé ma journée. Merci 🙂
Si vous voulez garder le corps de défilement et d'arrière-plan, vous pouvez essayer d'appliquer la toggleFullScreen fonction sur le document.documentElement au lieu de document.corps.
Est ce que ça fonctionne sur les navigateurs mobiles?
Woot! Un autre dev frontend appelé Jamie Barker! Nous devrions avoir une bière si votre jamais en Nouvelle-Zélande, bro. Cheers!

InformationsquelleAutor Jamie Barker

8

Pas. Les anciennes versions d'IE (≤6) permis, mais cette fonctionnalité est considérée comme un problème de sécurité, donc pas de navigateur moderne le permet.

Vous pouvez toujours appel window.open(url,'','fullscreen=yes'), ce qui vous obtient 90% du chemin, mais a des résultats légèrement différents:
- IE s'ouvre une fenêtre avec une seule barre de titre et la barre d'URL. La fenêtre est de taille pour remplir tout l'écran, et couvre la barre des tâches de Windows.
- Mozilla ouvre également une fenêtre avec une seule barre de titre et la barre d'URL. Cependant, la nouvelle fenêtre hérite de l'ouverture de la fenêtre de dimensions. Si l'ouverture de la fenêtre est agrandie, la nouvelle fenêtre est ouverte agrandie. (La barre des tâches n'est pas couvert.)
- Chrome ouvre également une fenêtre avec une seule barre de titre et la barre d'URL. La nouvelle fenêtre hérite de l'ouverture de la fenêtre de dimensions, mais il est jamais ouvert agrandie (même si l'ouverture de la fenêtre est maximisée).
~~C'est aussi proche que vous obtiendrez avec JavaScript.~~ l'autre solution serait de construire quelque chose en Flash (pouah!), ou tout simplement avoir votre bouton "plein écran" afficher une lightbox qui dit "Appuyez sur F11 pour passer en mode plein écran", et de cacher la lightbox sur window.resize ou en cliquant sur un bouton annuler dans la lightbox.

Edit: Un bon API fullscreen (première proposé par Mozilla et libéré plus tard comme un Proposition du W3C) a été mis en œuvre par Webkit (Safari 5.1+/Chrome+ de 15 ans) et Firefox (10+). Un bref historique et exemples d'utilisation ici. Noter que IE10 supposé pas support de l'API.
- merci pour la clarification. donc, peut-Flash ou Silverlight de contrôle de la fenêtre pour passer en mode plein écran en quelque sorte? tout comme parfois caché un objet flash dans une page est utilisée sur certains sites pour effectuer autrement impossible (sans flash) de l'exploitation, à la recherche de quelque chose comme ça...
- Pas de. Lorsque Flash/Silverlight se passe en plein écran, le plugin crée sa propre fenêtre dont il gère en dehors du navigateur de la connaissance. Le plugin n'a jamais de contrôle sur l'original de la fenêtre du navigateur.
- eh bien, je viens de recevoir le "hacky" l'idée, où j'ai pu mettre un silverlight "bouton" et cliquez sur, qui irait FS lui-même, la création d'un contrôle de navigateur web prenant en hausse de 100% de l'espace, et le chargement de l'URL de la page en cours à l'intérieur de lui-même. mais je pense qu'il serait restreindre trop car il ne fonctionne pas à l'intérieur de la fenêtre du navigateur, mais ça marche peut-être en plein écran, vaut la peine d'essayer.
- href="http://msdn.microsoft.com/en-us/library/system.windows.controls.webbrowser(v=vs. 95).aspx" >Silverlight ne permet pas un contrôle WebBrowser dans des applications basées sur navigateur.
- n' "à l'intérieur du navigateur" s'appliquent en mode plein écran trop? il n'est pas vraiment "dans" le navigateur, il crée sa propre fenêtre comme vous l'avez dit, peut être qu'il fonctionne en plein écran, et j'ai seulement besoin d'elle en plein écran, de toute façon, de sorte qu'il peut aider à mon problème si je peux interagir avec la souris.
- C'est une politique d'origine. Cela signifie qu'une application Silverlight hébergé sur (embedded) d'une page web ne peut pas utiliser le contrôle WebBrowser, indépendamment de savoir si vous utilisez le mode plein écran. Aussi, MSDN dit, lorsque vous utilisez le contrôle WebBrowser dans une application Silverlight en mode plein écran, le Navigateur n'est pas interactive, de sorte que vous êtes toujours bloqué.
- bon, ok, j'ai apparemment ne peut pas l'atteindre, j'abandonne 🙂 mais merci pour la clarification de nouveau.
- Le fullscreen situation a changé récemment. Voir les modifications.
- merci, je vais donner un essai bientôt 🙂
- Sur le mobile, il en redemande pour afficher le pop-up ou pas, Comme une boucle
InformationsquelleAutor josh3736
3

Je me demande pourquoi personne n'a remarqué que toutes les réponses sont fausses.

Réglage de l'élément de corps plein écran ne pas ont le même comportement de la touche F11.

Le même comportement de F11 peuvent être obtenus par:
```
document.documentElement.webkitRequestFullScreen();   //on
```
et
```
document.webkitCancelFullScreen();  //off
```
aussi pour vérifier si nous sommes en mode plein écran j'utilise cette ligne:
```
isFullScreen=()=>!(document.webkitCurrentFullScreenElement==null)
```
Note:
ce doit être appelé à partir d'une interaction de l'utilisateur de l'événement (onclick, onkeydown, etc).
- Ne fonctionne pas pour les navigateurs mobiles
- elle doit être appelée à partir de l'intérieur un événement comme un clic de souris ou un keydown. il fonctionne sur mobile chrome trop...
- fonctionne pour moi - merci
- Je ne suis pas sûr que cela est vrai, du moins pas pour Chrome 71. document.documentElement.webkitRequestFullScreen() retourne une erreur: TypeError: Échec de l'exécution de 'requestFullscreen' sur 'Element': paramètre 1 ("options") n'est pas un objet. d'Autres ont le même problème. Mais en appuyant sur F11 fonctionne toujours.
- Je suis en cours d'exécution de la Version 71.0.3578.98 (compilation Officiel) (64-bit) Et il fonctionne même dans la console javascript (vous pouvez le faire ressortir sur les touches ctrl+maj+j) et si vous écrivez "le document.documentElement.webkitRequestFullScreen();" il sera en EFFET le plein écran. Dans un programme normal doit de toute façon être à l'intérieur d'un onclick ou onkeydown ou d'un événement similaire.
- Curieusement, en passant document.documentElement dans la fonction dans ma réponse fonctionne très bien. Au moins sur Chrome de toute façon, compte tenu de votre réponse ne vise que les navigateurs Webkit. En effet, vous avez juste dupliqué ma réponse pour un navigateur en particulier. Il aurait certainement été plus utile à la communauté pour ajouter un commentaire à ma réponse suggérant les gens utilisent document.documentElement plutôt que document.body dans mon exemple. C'est en supposant que cela fonctionne dans tous les navigateurs, et pas seulement google Chrome si.
- Évidemment. 🙂 🙂
InformationsquelleAutor Zibri
1

Vous pouvez le faire avec un applet java signée qui a l'autorisation d'exécuter un script d'automatisation à la question de la combinaison de touches pour passer en mode plein écran. Mais, c'est un total de hack qui n'est pas très pratique si vos utilisateurs n'ont pas l'esprit de votre site la manipulation de leurs machines.
- l'applet java est "trop" hacky, une méthode basée sur un script est plus préférable, mais si je peux le faire à l'aide de Flash (ou moins, de préférence, silverlight, c'est encore moins courant), ce serait une solution, mais bien sûr, l'objet ne sera utilisée que pour le plein écran de la fenêtre du navigateur et rien d'autre
InformationsquelleAutor Daniel Pereira
0

Il y a une bibliothèque inconnue qui fait tout le travail pour vous:

https://github.com/rafrex/fscreen

J'ai eu le même problème et je l'ai fait (par exemple dans une réagir la composante):
```
import fscreen from 'fscreen';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}
```
Fonctionne dans Chrome, Firefox, Safari, IE11, iOS, Android

InformationsquelleAutor Lluís Marfany
-1

En charge plein écran via java script n'est pas mis en œuvre pour Chrome ou Firefox. Cependant, vous pouvez gérer de l'avoir pour MSIE. Mais ce n'est pas F11 type de fonctionnalité.

Même chrome.exe -kiosk ne pas ouvrir la page en mode plein écran.

Raison en est qu'il n'est pas recommandé pour forcer l'utilisateur et ouvrez votre application en mode plein écran. Si ce n'est pas tous les popups à partir de différents sites web va s'ouvrir en mode plein écran et vous endup la fermeture de toutes les personnes.

InformationsquelleAutor Anuj Verma

Vous devez vous connecter pour publier un commentaire.