Ouvrir une nouvelle fenêtre en javascript

A manipuler avec précaution, l’ouverture de nouvelles fenêtre a fait les beaux jours du net art des années 90’, mais a aussi été une des première forme d’intrusion intempestive des pubs dans nos navigateurs.

Syntaxe générale

window.open(’url_a_ouvrir’,’nom_de_la_fenêtre’,’attribut1,attribut2’) ;

Dans la commande window.open, trois arguments entre guillemets, séparés par des virgules :
- L’adresse de la page à ouvrir, en relatif (mapage.html) ou en absolu (http://www.monsite.com). On peut aussi ne rien mettre entre les guillemets, ce sera alors une fenêtre vide.
- Le nom de la fenêtre. C’est utile si on veut par la suite agir sur cette fenêtre pour la déplacer, lui envoyer des contenus, écrire dedans.
- les attributs, séparés par des virgules. permettent de spécifier comment apparait cette fenêtre : taille, scrollbar ou pas, emplacement, etc.

Attributs

Les attributs sont :
- width : la largeur de la fenêtre. (ex : width=250)
- height : hauteur de la fenêtre. (ex : height=400)
- top : la position depuis le haut de l’écran (ex : top=100)
- left : la position depuis la gauche de l’écran (ex:left=10)
- resizable : permet à l’utilisateur de changer la taille de la fenêtre une fois créée. Peut prendre la valeur yes ou no. (ex : resizable=yes)
- scrollbars : fait apparaitre ou non la scrollbar. Peut prendre la valeur yes ou no. (ex : scrollbar=no)
- toolbar : fait apparaitre ou pas la barre d’outil du navigateur. Valeurs yes ou no.
- location : fait apparaitre ou pas la barre d’adresse. valeur yes ou no.
- status : fait apparaitre ou non la barre de statut, dans le bas de la fenêtre. Valeur yes ou no.
- menubar : fait apparaitre ou pas la barre de menu (fichier, édition, etc.). Valeur yes ou no.
- copyhistory : copie ou pas l’historique de navigation de la fenêtre d’origine dans la fenêtre créée.

Des exemples

<div onClick="window.open('','','')">click !</div>

Ouvre une fenêtre vide, dans un onglet sous Firefox.

<div onClick="window.open('http://www.google.fr','','width=400,height=200')">click !</div>

Ouvre le site de Google dans une fenêtre de 400 sur 200.

<div onClick="window.open('http://www.google.fr','','width=400, height=300, toolbar=yes, location=yes, directories=yes, status=no, menubar=yes, scrollbars=no, copyhistory=yes, resizable=yes')">click google avec plein d'option</div>

Ouvre le site avec des options diverses. Attention, il peut y avoir des espaces entre les virgules mais pas de retour à la ligne.