Ouvrir des fenêtres filles

Ouvrir un popup en html

 

Pour activer un lien hypertexte dans une fenêtre fille (ang. popup), il faut préciser la valeur de l’attribut target="cible”cible est le nom que vous donnez à la nouvelle fenêtre. L’ancre ci-dessous n’utilise pas l’attribut target. Le navigateur charge donc la page dans la fenêtre active.

<a href="http://www.lesoir.be">Le Soir dans la même fenêtre</a>

Le Soir dans la même fenêtre

Dans l’exemple ci-dessous, le navigateur charge la page dans une fenêtre fille. La valeur que l'on attribue à l'attribut target n'a pas d'importance, bien qu'il existe des valeurs reconnues, utiles lorsque l'on utilise un jeu de cadres (<frameset>)

<a href="http://www.lesoir.be" target="new">Le Soir dans une nouvelle fenêtre</a>

Le Soir dans une nouvelle fenêtre

Ouvrir un popup en JavaScript

 

La méthode open() de l'objet window ouvre un popup. L'intérêt de cette technique par rapport au lien hypertexte simple utilisé ci-avant est double. D'une part, elle rend possible le paramétrage du popup, c'est-à-dire ses dimensions, sa position, ses propriétés. D'autre part, la méthode renvoie une poignée (ang. handle) qui permet de manipuler la fenêtre après son ouverture.

Voici la syntaxe de la méthode

[handle = ] window.open([URL [, Cible [, modalités]]])

 

Appel sans arguments

Les éléments entre crochets sont facultatifs. Autrement dit, l'usage le plus simple de la méthode est window.open() , ce qui revient à ouvrir un popup sur about:blank.

<body>
<p>Cette fenêtre a ouvert un popup sur <strong>about:blank</strong></p>
<script type="text/javascript">
<!--

window.open() ;


//-->
</script>
</body>

Ceci n'est évidemment pas une utilisation très utile de la méthode. Voyons ci-dessous l'utilité des 3 arguments et de la valeur de retour.

L'argument url

Comme son nom l'indique, il s'agit bien de l'url à activer. La fonction mfMuseumAtRandom() active un site aléatoirement dans une liste d'urls.

<script type="text/javascript">
<!--

urls = new Array(

"http://www.rupertinum.at",
"http://museoprado.mcu.es",
"http://www.louvre.fr",
"http://www.pushkin.ru",
"http://www.hermitagemuseum.org"

) ;


function mfMuseumAtRandom() {

var n = urls.length ;
var r = Math.floor(Math.random() * n) ;
window.open(urls[r]) ;

}
//-->
</script>

 

L'argument cible

L'argument cible contient le nom que l'on veut donner à la fenêtre. En son absence, la méthode open() ouvre une nouvelle fenêtre à chaque appel. Comme il ne peut exister qu'une seule fenêtre du même nom, l'appel d'une fenêtre homonyme et déjà ouverte provoque le remplacement du contenu de celle-ci.

<script type="text/javascript">
<!--
noms = new Array(

"-",
"Le Rupertinum",
"Le Prado",
"Le Louvre",
"Le Musée Puchkine",
"L'Hermitage"

)


urls = new Array(

"" ,
"http://www.rupertinum.at",
"http://museoprado.mcu.es",
"http://www.louvre.fr",
"http://www.pushkin.ru",
"http://www.hermitagemuseum.org"

) ;

function mfPopUp(leSelect) {
var url = leSelect.value ;
if (url != "" ) {

window.open(url, "lemusee") ;

}
}

function mfCreateSelect() {
var n = urls.length ;
document.write("<select onchange='mfPopUp(this)'>");
for (var i = 0 ;i < n ; i++) {
buf = "<option value=\"" + urls[i] + "\">" + noms[i] + "</option>" ;
document.write(buf) ;
}
document.write("</select>") ;
}
//-->
</script>

Argument modalités

Le troisième argument contient les modalités de la fenêtre

 

NN2.0+ Value Description
directories booléen Affichage des boutons de répertoires
location booléen Affichage du champ adresse
menubar booléen Affichage du menu
resizable booléen Afficher une fenêtre redimensionnable
scrollbars booléen Affichage des barres de défilement
status booléen Affichage de la barre de statut
toolbar booléen Affichage de la barre d'outils
height numérique Hauteur de la fenêtre en pixels
width numérique Largeur de la fenêtre en pixels
left (IE) / screenX (NS) numérique Position de la fenêtre sur l'axe horizontal
top (IE) / screenY (NS) numérique Position de la fenêtre sur l'axe vertical

Si l'argument modalités n'est pas utilisé, la nouvelle fenêtre a les mêmes caractéristiques que la fenêtre appelante. Si l'argument modalités est utilisé, les valeurs des attributs booléens sont no par défaut. On peut utiliser les valeurs no/yes ou 0/1.

Modalités de la fenêtre popup
Barre d'outils
Redimensionnable
Barre de menu
Barre de statut
Barres de défilement
Barre d'adresse
Répertoires
Hauteur
Largeur
Position X
Position Y
function mfOpenPopUp(f) {

mods = "" ;
if (f.toolbar_chk.checked) {

mods += "toolbar=yes," ;

}

if (f.resizable_chk.checked) {

mods += "resizable=yes," ;

}
if (f.status_chk.checked) {

mods += "status=yes," ;

}
if (f.menubar_chk.checked) {

mods += "menubar=yes," ;

}
if (f.scrollbars_chk.checked) {

mods += "scrollbars=yes," ;

}
if (f.location_chk.checked) {

mods += "location=yes," ;

}
if (f.directories_chk.checked) {

mods += "directories=yes," ;

}
if (f.hauteur_txt.value != "") {

mods += "height=" + parseInt(f.hauteur_txt.value) +"," ;

}
if (f.largeur_txt.value != "") {

mods += "width=" + parseInt(f.largeur_txt.value) +"," ;

}

if (f.X_txt.value != "") {
x = parseInt(f.X_txt.value)
mods += "screenX=" + x + ", left=" + x ;
}

if (f.Y_txt.value != "") {
y = parseInt(f.Y_txt.value)
mods += "screenY=" + y + ", top=" + y ;
}

if (mods == "") {

window.open("../demos/comenius.html", "citation") ;

} else {

window.open("../demos/comenius.html", "citation", mods) ;

}
}

Positionnement

Le positionnement de la fenêtre est possible depuis la version 4 des navigateurs. NN : screenX and screenY. MSIE4 : top and left

Pour être certain d'être compatible avec les deux navigateurs, il suffit de combiner les 2 jeux d'arguments.

if (f.Y_txt.value != "") {
y = parseInt(f.Y_txt.value)
mods += "screenY=" + y + ", top=" + y ;
}

Récupérer la valeur de retour dans une poignée

La méthode window.open() renvoie une poignée (ang. handle) sur la nouvelle fenêtre.

 

function mfOuvrirPopUp() {

h = window.open("comenius.html") ;

}

Il est utile de récupérer cette poignée, car elle va nous permettre de manipuler la fenêtre après son ouverture, par exemple pour y écrire et modifier son contenu ou pour la déplacer et la redimensionner.

Ecriture dans un popup p.document.write()
Déplacement d'un popup p.moveTo(x, y)
Redimensionnement p.resizeTo(w, h)
Déplacement relatif p.moveBy(x_offset,y_offset)