La méthode open de l’objet window ouvre une nouvelle fenêtre du navigateur. Entre parenthèses et entre guillemets, est indiqué le nom de la page web qui y est affichée.
Exemple :
<script language="JavaScript"><!--
var win=window.open("","NewWindow", "width=120,height=110");
win.document.write("<b>Bienvenue!</b>");
win.document.close();
//--></script>
Vous reconnaissez dans JavaScript la ligne :
var win=window.open("","NewWindow", "width=120,height=110");
En revanche, elle est complétée par quelques nouveautés.
La variable win est affectée de la fenêtre à ouvrir.
Dans le code ci-dessus, directement au début de la parenthèse, nous avions placé le nom de la page Web(entre guillemets) à afficher dans la fenêtre("","NewWindow
Vous constatez qu’ici nous n’avons rien spécifié : aucune page web n’est ouverte dans la nouvelle fenêtre. N’oubliez cependant pas les guillemets et la virgule.
Puis vient, à nouveau entre guillemets, le nom de la nouvelle fenêtre. Remarquez qu’ici aussi, les conventions de nom sont respectées : il n’y a aucun caractère spécial, pour finir nous avons spécifié la taille de cette fenêtre, en l’occurrence 120 pixels de large sur 110 pixels de haut.
Vous pouvez aussi ajoutez du texte dans votre fenêtre qui vient d’être crée
Exemple :
Win.document.write(" <b>Bienvenue !< /b> ") ;
La nouvelle fenêtre contenu dans la variable win affiche le texte bienvenue grâce à : document.write
Le texte affiché dans la fenêtre est d’une taille libre. Pour que le navigateur sache que le document est terminé. Fermez son accès par l’instruction win.document.close().
La fenêtre que vous avez ouverte était placée dans la variable win. Elle a été ouverte à partir d’une fenêtre existante, qui est nommée fenêtre parent. Win est ainsi la fenêtre enfant.
Les fenêtres enfants peuvent être dépendantes de la fenêtre parent, si vous appliquez l’attribut dependent :
Var win=window.open(" " , "NewWindow ", " width=120, height=110 " dependant=yes) ;
Dans ce cas la nouvelle fenêtre est dépendante de la fenêtre parent. Cela signifie que si vous fermez parent, la fenêtre enfant est automatiquement fermée.
L’option par défaut est cependant dependant=no.
Il est tout à fait possible d’ouvrir plusieurs fenêtres enfants, à condition d’utiliser un autre nom pour la variable win, par exemple win2.
Nous allons mettre un peu de couleurs dans une fenêtre, dans l’exemple ci-dessous nous définissons l’arrière plan ainsi que le premier plan.
<script language="JavaScript"><!--
var win=window.open("","NewWindow","width=120,height=110");
win.document.bgColor="#ff1234";
win.document.fgcolor="#234312";
win.document.write("<b>Bienvenue!</b>");
win.document.close();
//--></script>
Toutes les fenêtres que nous avons ouvertes jusqu’à présent ont été positionnées automatiquement par le navigateur. Cette fois nous allons paramètres la position de la fenêtre par les commandes xscreen X, ainsi que Y qui se trouvent dans win=window.open("","_blank","width=120,height=110,screenX=150,screenY=130");
Nous savons créer maintenant une fenêtre d’une taille précise ; mais une fois ainsi crée, elle ne peut pas être mis à l’échelle avec la souris. Pour rendre possible cette mise à l’échelle, il nous faut définir l’option resizeable de l’objet window.document.
Nous allons maintenant créer une fenêtre dotée de tous les éléments classiques des fenêtres de navigateur.
win=window.open("","_blank","location=yes,hotkeys=yes,directories=yes,menubar=yes,scrollbars=yes,toolbar=yes,status=yes");
Voici à quoi correspond ces nouvelles options présentes dans win.document :
JavaScript permet de piloter le cours de votre fenêtre dans le temps. Vous pouvez par exemple demander sa fermeture automatique après 5 secondes d’affichage, voici un exemple ci dessous.
win.document.close();
win.setTimeout (‘window.close()’, 5000) ;
setTimeout définit ce qui doit advenir de cette fenêtre après un certain délai. Dans notre exemple la fenêtre sera supprimé après un délai de 5 secondes.
A l’aide de l’objet history, il est possible de naviguer dans la liste de tous les sites visités durant la session actuelle.
Ainsi, Window.history.go(-2) charge l’avant dernier document, et Window.history.go(3) retourne en arrière de trois documents. N est soit un nombre avec un signe – pour les pages précédentes) ou une URL, par exemple window.history.go(‘www.cnn.com’).
Exemple :
<script language="JavaScript"><!--
alert("Hello .");
//--></script>
Cet exemple ouvre une boîte de dialogue affichant le texte " hello "
Vous pouvez créer un bouton demandant confirmation, par exemple :
<script language="JavaScript"><!--
confirm("Voulez-vous visiter mon site web ?");
//--></script>
<script language="JavaScript"><!--
var input = confirm("Voulez-vous gagner 100.000 francs ?")
if(input == true)
{
window.open("Gain.html");
}
else
{
window.open("Perdu.html");
}
//--></script>
Notre dernier Script de boîte de dialogue va ouvrir une boîte offrant une zone de saisie. Celles-ci servira à l’utilisateur pour indiquer son âge.
<script language="JavaScript"><!--
var input = prompt("Indiquez votre âge !")
if(input < 18)
{
window.open("bye.html");
}
else
{
window.open("enter.html");
}
//--></script>
Idem au HTML