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.

Propriétés de création de fenêtre

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.

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.

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 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.

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!");	
}