Ouvrir une fenêtre en JavaScript

Pour afficher des données de façon dynamique, on peut utiliser une iframe ou ouvrir une nouvelle fenêtre. Dans le second cas on dispose d'une série d'options pour définir ce qui est affiché ou non sur la fenêtre.

Options

Ces attributs sont assignés lors de la création de la fenêtre. Ils ont la valeur yes ou no selon l'activation ou non, ou un nombre entier.

scrollbars
Vaut yes si les barres de défilement s'affichent et no sinon.
statusbar
Vaut yes ou no selon que l'on affiche la barre d'état ou non.
toolbar
Vaut yes ou no selon que l'on affiche la barre d'outils ou non.
menubar
Présenter un menu ou non.
resizable
On peut changer les dimensions ou non. Le coin inférieur droit est modifié en conséquence.
directories
Inclure les boutons de favoris.
width
Largeur de la fenêtre en pixels.
height
Hauteur en pixels.

Il n'y a pas d'option pour supprimer la barre d'adresse. C'est quelque chose de délibéré de la part des éditeurs de navigateurs, pour empêcher que les sites malveillants ne trompent sur l'origine de la page qui est affichée.

Méthodes

open(url, nom [, liste de propriétés])
Ouvre une nouvelle fenêtre. L'URL et le nom sont donnés en paramètres ainsi que la liste des options. Comme exemple d'options, on a statusbar, toolbar, scrollbar, width, height...
Les options sont encloses entre guillemets simples ou doubles, et à l'intérieur, séparées par une virgule.
close()
Ferme la fenêtre. Exemple: x.close(); window.close().

Démonstration interactive de création d'une fenêtre

Cette démonstration par l'exemple permet de définir toutes les propriétés d'une fenêtre à partir d'un formulaire et de la créer en cliquant sur un bouton.
Il s'agit d'un programme de base à adapter à votre application.

Démonstration de la méthode open de l'objet HTML window.
Sélectionner les propriétés de la fenêtre à définir et cliquer sur le bouton open Le code des options va s'affiché sous le formulaire.

Dans cette démo, une page est chargée mais son contenu est effacé par la commande: 

win.document.write("Hello!");

Sans cette commande la fenêtre ne reste pas affichée sous IE7. Il vous appartient d'adapter le code selon votre application.

Toolbar Menubar Scrollbars Statusbar Resizable Directories

Width Height

URL


Code

function yesno(arg)
{
  if(arg) return "oui";
  return "non";
}

function demo()
{
  var t = document.myform.checktool.checked;
  var m = document.myform.checkmenu.checked;
  var s = document.myform.checkscroll.checked;
  var u = document.myform.checkstatus.checked;
  var r = document.myform.checkresize.checked;
  var d = document.myform.checkdir.checked;
  var w = document.myform.wwidth.value;
  var h = document.myform.wheight.value;
  var options = "location=yes,toolbar=" + 
          yesno(t) + 
          ",menubar=" + yesno(m) + 
          ",scrollbars=" + yesno(s) + 
         ",statusbar=" + yesno(u) +
         ",resizable=" + yesno(r) +
         ",directories=" + yesno(d) +
         ",width=" + w +
         ",height=" + h;

  var url = "window-demo.php";
  var myname = "mywindow";
  document.getElementById("storage").innerHTML = options;
  var win = window.open(url, myname, options);
  win.document.write("Hello!");	
}
© 2008-2014 Xul.fr