Comment ouvrir mon site en plein écran ?

D'abord, notez bien qu'il est de très mauvais goût de bousculer les habitudes de votre visiteur. Celui-ci a dimensionné sa fenêtre de navigation à sa convenance et la plupart du temps, il n'appréciera pas du tout que vous interveniez dans l'agencement de son affichage. Donc, si vous tenez absolument à ce que votre site passe en plein écran, il faudra
  1. ouvrir une nouvelle fenêtre («popup») en plein écran pour vos pages ;
  2. veiller à ce que cette fenêtre se ferme quand le visiteur quittera vos pages, de manière à ce qu'il retrouve ses meubles familiers par dessous.

Pour un site ordinaire, nous déconseillerons de passer en plein écran. Pensez que vous pouvez tomber sur des affichages plus grands que le 1024x768 ; vos pages sauront-elles meubler un tel espace ? Evidemment, tout peut changer si vous prévoyez des animations vectorielles qui rempliront automatiquement tout l'écran, ou si vos pages ne sont destinées qu'à être visionnées depuis un CD-ROM.

Utiliser l'attribut fullscreen ?

Dans notre article de revue sur les popups, nous avons mentionné que cet attribut permettait précisément d'ouvrir ce type de fenêtre. Le script à mettre en oeuvre est tout simplement
<script language="javascript">
  function fullscr(fichier) {
  ff=window.open(fichier,'plein','fullscreen=yes');
  }
</script>  
et on peut le lancer en cliquant sur un lien avec un onClick :
<a href="page.html" target="plein"
onClick="fullscr(this.href);return false;">Cliquez ici</a>...
(rappelons que cette écriture du lien permet d'ouvrir une fenêtre même si le script ne fonctionne pas)

Ça ne marche malheureusement pas partout :

Essayez avec votre navigateur en cliquant sur notre lien.

Avec Explorer sous Windows, on remarque que la fenêtre s'ouvre sans aucun menu et sans case de fermeture : on ne voit plus que la barre de titre et la barre des tâches. Il est donc particulièrement important de prévoir un lien javascript pour refermer cette fenêtre, et il faudra le prévoir dans toutes les pages qu'on affichera dans cette fenêtre.

Le visiteur devrait savoir que Alt+F4 ferme toute fenêtre ouverte avec IE-windows, mais il peut également être judicieux de lui rappeler...

Ou faire un popup aux mesures de l'écran ?

Pour arriver à un script plus universel, le plus simple est de détecter la largeur et la hauteur de l'écran, puis d'ouvrir un popup à ces dimensions, calé en haut à gauche de l'écran. Le script sera
<script language="javascript">
  function fullpopup(file) {
  f2=window.open(file,'plein','top=0,left=0,width='+screen.width
     +',height='+screen.height+',menubar=no,resize=no');
</script>  
Le reproche qu'on peut faire à ce script est qu'il demande un popup plus grand que l'écran, puisque les attributs width et height de window.open() correspondent généralement aux dimensions intérieures du popup et on leur demande de prendre des valeurs screen.width et screen.height qui correspondent aux dimensions totales de l'affichage. Le popup devrait donc déborder de l'écran, et on ne sait pas trop ce qui va se passer. De fait, cela va dépendre du navigateur utilisé. Certains, comme IE5 ou iCab sur MacOs, diminuent d'eux-même les dimensions du popup de manière à ce que son encadrement soit entièrement visible. Dans d'autres, comme NN4-NN6 sur MacOS ou NN4 ou IE5 sous Windows, les bords du bas et de droite ne sont plus visibles. On peut les faire apparaître en faisant glisser la fenêtre sur l'écran, mais ce n'est vraiment pas une manoeuvre très pratique. On veillera donc à ne rien mettre d'important sur les bords... et notamment on se débrouillera pour qu'il n'y ait pas d'ascenseur !

Essayez le script ci-dessus avec votre navigateur en cliquant sur notre lien... à vos risques et périls (:-))) Dans tous les cas, l'affichage ne sera pas aussi satisfaisant qu'avec fullscreen sur IE, soit que la fenêtre déborde un peu de l'écran, soit qu'elle soit trop petite de quelques pixels... mais c'est déjà ça, non ?

En principe, il ne devrait pas y avoir de menu, à cause de l'attribut menubar=no. En fait, beaucoup de navigateurs n'y obéissent pas et ceux qui obéissent (comme NN4-mac) ne font que réduire les menus, de telle sorte qu'il y a toujours une barre de menu au dessus du popup.

Faut-il compliquer le script ?

Nous craignons qu'il n'y ait pas grand chose de plus élégant à faire à l'heure actuelle. Nos tentatives de mieux adapter le popup à l'écran sont restées vaines (voir ci-après). Tout au plus pourrait-on essayer de tester le navigateur et le système, et, s'il s'agit d'Explorer sur Windows, on utiliserait le script avec fullscreen, et l'autre script dans le cas contraire, comme suit :
<script language="javascript">
function pleinecran(fichier) {
if( (navigator.appName == "Microsoft Internet Explorer")
  && (navigator.platform != "MacPPC") ) {
	ff=window.open(fichier,'plein','fullscreen=yes');
} else {
  ff=window.open(fichier,'plein','top=0,left=0,width='+screen.width
     +',height='+screen.height+',menubar=no,resize=no'); }
}
</script>
Mais certains navigateurs peuvent se faire passer pour d'autres. Par exemple, iCab-mac (qui accepte fullscreen) se fait passer pour NN4.7-mac (qui ne l'accepte pas). La situation n'est donc pas complètement satisfaisante, mais on peut estimer qu'il s'agit de cas très marginaux et qu'on peut en accepter les risques. Essayez...

Pour mieux ajuster le popup à l'affichage, il faudrait avoir des informations plus précises sur les dimensions de la zone accessible dans l'affichage et y adapter les dimensions extérieures du popup.

Vous voyez à droite les différents paramètres de l'affichage qui devraient être accessibles et les valeurs correspondantes pour votre affichage particulier.
Malheureusement, toutes ne sont pas implantées, et, quand elles le sont, leur interprétation n'est pas la même dans IE et dans NN.
screen.availLeft et screen.availTop donnent la position du premier pixel disponible en haut à gauche (non implanté dans IE et lecture suspecte dans NN4x).
screen.availWidth et screen.availHeight indiquent apparemment les dimensions extérieures maximales du popup pour NN, alors que pour IE, il s'agirait plutôt des dimensions intérieures maximales de ce popup.
— Enfin, screen.width et screen.height indiquent toujours les dimensions physiques de l'affichage.
Du côté du popup, les attributs width et height correspondent généralement aux dimensions intérieures. Les paramètres qu'il faudrait fixer sont la margeur et la hauteur extérieure du popup. Or, il existe bien des attributs outerWidth et outerHeight, mais seulement pour NN. En conséquence, il est difficile de prévoir mieux pour IE, mais le script suivant devrait logiquement donner de meilleurs résultats pour NN:
function fullNN(file) {
f2=window.open(file,'plein','top='+screen.availTop
  +',left='+screen.availLeft+',outerWidth='+screen.availWidth
  +',outerHeight='+screen.availHeight+',menubar=no,resize=no');
 }

Essayez...
Avec NN6-mac, on a exactement le même résultat qu'avec le script précédent... Avec NN4-mac, ça marche mieux, en ce sens qu'on voit tout l'encadrement du popup, mais on perd quelques pixels à droite et en bas.

Vous pouvez parfaitement essayer avec IE. Les attributs outerWidth et outerHeight ne sont pas interprétés et tout se passe comme s'il n'y avait pas d'instruction de dimensions, c'est-à-dire que le popup s'ouvre avec les mêmes dimensions que la dernière fenêtre ouverte.

Charles – Patrice – (TOM) – Gérald – JMPlus