Bouton d'affichage plein écran

**Cyberdome** · 25/10/2015, 01h29

Bonjour,

d'avance toutes mes excuses si c'est la millième fois que la question est posée j'ai fais une recherche mais le moteur n'est pas très optimisé.

Je suis à la recherche d'un petit script pour me permettre d'afficher mon site en plein écran de la même façon qu'avec la touche f11 et de pouvoir revenir en normal en cliquant une seconde fois dessus. Peu m'importe que le script soit long ou pas tant que ça fonctionne, mais si c'est court c'est mieux. Je ne suis pas amoureux du javascript donc s'il y a une méthode plus accessible dans un autre langage je suis preneur, mais je ne "maitrise" qu'html css avec des notions de php donc ca m'aide pas beaucoup.

Merci

**krunch** · 25/10/2015, 14h49

Salut
J'utilise ça, qui m'a l'air de marcher avec les dernières versions, mais je ne sais pas pour les autres (en particulier anciens IE).

Tu peux remplacer element par document.body (pas vraiment testé avec des divs..)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function toggleFullScreen (element)
{
	// Firefox
	if (element.mozRequestFullScreen)
		if (document.mozFullScreen)
			document.mozCancelFullScreen();
		else
			element.mozRequestFullScreen();
 
	// Chrome/Opera/Safari
	else if (element.webkitRequestFullScreen)
		if (document.webkitIsFullScreen)
			document.webkitCancelFullScreen();
		else
			element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
 
	// IE11
	else
		if (document.msFullscreenElement)
			document.msExitFullscreen();
		else
			element.msRequestFullscreen();
};

**Cyberdome** · 25/10/2015, 18h31

Merci beaucoup.

Je ne comprend pas ce qui cloche je n'arrive pas à le faire fonctionner, j'ai essayé sur chrome et waterfox mais rien n'y fait, lorsque je clique sur sur le bouton il ne se passe rien.

Voilà ce que j'ai fais, enfin parmi toutes les combinaisons que j'ai essayé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<head>
<script language="javascript" type="text/javascript"><!--
function toggleFullScreen (document.body)
{
	// Firefox
	if (document.body.mozRequestFullScreen)
		if (document.mozFullScreen)
			document.mozCancelFullScreen();
		else
			docuement.body.mozRequestFullScreen();
 
	// Chrome/Opera/Safari
	else if (document.body.webkitRequestFullScreen)
		if (document.webkitIsFullScreen)
			document.webkitCancelFullScreen();
		else
			document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
 
	// IE11
	else
		if (document.msFullscreenElement)
			document.msExitFullscreen();
		else
			document.body.msRequestFullscreen();
};
//--></script>
</head>
<body>
<a href="javascript:toggleFullScreen()"><img src="images/fullscreen.jpg"></a>
</body>

J'ai aussi essayé de mettre le code dans le body, ou de l'appeler avec onclick sur le lien et sur un input, ou de passer tout le code directement dans le onclick mais rien n'y fait. Je précise que j'ai désactivé mes plugins pour être sûr que rien ne bloque, j'ai fais un alert() pour tester que le javascript fonctionne et c'est ok.

J'ai vu qu'il existait un api fullscreen mais d'après ce que j'ai compris il ne fonctionne que sur des éléments de la page et pas sur la page entière.

**krunch** · 25/10/2015, 20h43

J'ai refait un test avec un bouton (éviter ce genre d'appel href="javascript:.. je crois) donc avec un bouton comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" onclick="toggleFullScreen(); return false;" value="FullScreen" />

Et on ne met pas document.body en argument de fonction... il n'y a plus d'argument si document.body a remplacé element !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function toggleFullScreen (document.body)
{
	// Firefox
	if (document.body.mozRequestFullScreen)
		if (document.mozFullScreen)
			document.mozCancelFullScreen();
		else
			docuement.body.mozRequestFullScreen();
 
	// Chrome/Opera/Safari
	else if (document.body.webkitRequestFullScreen)
		if (document.webkitIsFullScreen)
			document.webkitCancelFullScreen();
		else
			document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
 
	// IE11
	else
		if (document.msFullscreenElement)
			document.msExitFullscreen();
		else
			document.body.msRequestFullscreen();
};

Ou tu laisses la fonction comme elle est et tu fais un appel comme ça, c'eut été plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" onclick="toggleFullScreen(document.body); return false;" value="FullScreen" />

Pour moi ça marche, dans les 3 navigateurs ciblés.

**Cyberdome** · 25/10/2015, 22h13

Rien n'y fait malheureusement, comme je ne connais pas javascript voyant que ça ne marchait pas j'avais essayé toutes les combinaisons d'argument à l'aveuglette ainsi qu'avec un input avant de répondre pour ne pas perdre de temps. Je viens de reprendre le code que vous me donnez en corrigeant les erreurs indiquées au cas ou mais ça ne répond toujours pas. Le mieux que j'ai obtenu dans toutes mes tentatives a été une actualisation de la page. Mais c'est sans grade surprise c'est le troisième script que j'essaie, comme les deux premier dataient de 2011 et 2013 j'espérais quelques évolutions. Avec le code actuel il ne se passe rien. Est ce que vous savez quels autres langages permettraient de faire ca?

**krunch** · 25/10/2015, 22h45

Je ne vois pas de raison ... alors sans balise html, avec déclenchement à la barre d'espace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
toggleFullScreen = function()
{
	// Firefox
	if (document.body.mozRequestFullScreen)
		if (document.mozFullScreen)
			document.mozCancelFullScreen();
		else
			document.body.mozRequestFullScreen();
 
	// Chrome/Opera/Safari
	else if (document.body.webkitRequestFullScreen)
		if (document.webkitIsFullScreen)
			document.webkitCancelFullScreen();
		else
			document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
 
	// IE11
	else
		if (document.msFullscreenElement)
			document.msExitFullscreen();
		else
			document.body.msRequestFullscreen();
};
document.addEventListener( 'keypress', function(e){ if ( e.which === 32 ) toggleFullScreen() }, false);

**Cyberdome** · 25/10/2015, 23h04

Fantastique! merci beaucoup, celui ci fonctionne avec la barre d'espace, avec l'input et avec un lien hypertexte sous chrome et waterfox. Il semble que l'action de la souris est comptée comme une action clavier, je sais pas pourquoi mais c'est bon à savoir, ça m’évitera peut être un arrachage de cheveux dans le futur

**krunch** · 25/10/2015, 23h51

Il semble que l'action de la souris est comptée comme une action clavier

...

Pas du tout c'est la dernière ligne qui déclenche la fonction quand la barre d'espace est pressée (le input esr indépendant), cette ligne donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.addEventListener( 'keypress', function(e){ if ( e.which === 32 ) toggleFullScreen() }, false);

**Cyberdome** · 26/10/2015, 00h21

Oui ca j'avais bien compris, mais puisque l'input et le lien ne fonctionnaient pas avant et qu'il m'a semblé que le reste du code était inchangé j'en ai déduit que puisque cela fonctionne maintenant c'est dû à cette dernière ligne. Et la seule façon de le comprendre c'est que ce n'est pas le code qui posait problème mais tout simplement l'interaction de la souris, quoique ce n'est pas très cohérent avec le fait que la fonction alert() fonctionnait. Je suis encore loin de comprendre quel était réellement le problème.

Bouton d'affichage plein écran

JavaScript

Discussions similaires

Partager

Partager