Méthodes d’ouverture des fenêtres en JavaScript

Objectif

ِConnaitre les méthodes d’ouverture des fenêtres en JavaScript

Introduction

Pour chaque zone pouvant recevoir un document HTML, JavaScript instancie automatiquement un objet de la classe Window. Il y a donc un objet Window pour chaque fenêtre du browser ouverte, ainsi qu’un objet pour chaque frame.

L’objet Window et ses méthodes

L’objet window est l’objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web, il contient donc :
L’objet window possède des méthodes relatives à l’ouverture et à la fermeture des fenêtres.

open()

Cette méthode nous permet d’ouvrir un nouveau browser.
Elle est utilisée pour ouvrir une fenêtre de navigateur ouverte en JavaScript.

Syntaxe :

ref_win = windowRef.open(URL, nom_fenetre, options)

ref_win est le nom de la variable qui sera utilisée pour faire référence à la nouvelle fenêtre

URL est l’URL du document qui doit être affiché dans cette fenêtre.

nom_fenetre est le nom de la fenêtre tel qu’il pourra être utilisé par l’attribut TARGET des liens hypertexte

options est une chaîne de caractères qui indique les caractéristiques de la fenêtre à créer.
Cette chaîne est composée d’une série de caractéristiques séparées par des virgules.

Exemple:

Pour ouvrir une fenêtre de 200 x 200 pixels qui soit en permanence au-dessus des autres fenêtres, on utilisera la chaîne suivante :

<!DOCTYPE html >
<html lang="fr">
<head>
<title>JavaScript</title>
<meta ="UTF-8">
</head>
<body>
<script>
MaFenetre = window.open('chemin de fichier',
'MaFenetre',
'outerWidth=200,outerHeigth=200,alwaysRaised=yes')
</script>
</body>
</html>

Lorsqu’on utilise cette méthode, la fenêtre créée reçoit, dans sa propriété opener, une référence vers la fenêtre à partir de laquelle elle a été créée.

Les caractéristiques possibles

Caractéristique (la première valeur indiquée est la valeur par défaut)	Signification (dans le cas de la valeur yes)	Propriété associée
toolbar=no ou yes	La fenêtre possède la barre d’outils du browser.	windowRef.toolbar.visible = true ou false
location =no ou yes	La fenêtre possède le champ indiquant l’URL courante.	windowRef.locationbar.visible = true ou false
personalbar=no ou yes	La fenêtre possède les boutons d’orientation (nouveautés…).	windowRef.personalbar.visible = true ou false
status=no ou yes	La fenêtre possède la barre d’état du browser.	windowRef.statusbar.visible = true ou false
menubar=no ou yes	La fenêtre possède la barre de menu du browser.	windowRef.menubar.visible = true ou false
scrollbars=no ou yes	La fenêtre possède une barre de défilement.	windowRef.scrollbars.visible = true ou false
titlebar=yes ou no	La fenêtre possède une barre de titre et un cadre.
alwaysRaised=no ou yes	La fenêtre reste en permanence au-dessus des autres fenêtres visibles à l’écran.
alwaysLowered=no ou yes	La fenêtre reste en permanence sous les autres fenêtres visibles à l’écran.
dependent=no ou yes	La fenêtre est une fille de la fenêtre à partir de laquelle elle a été créée. Elle sera fermée si cette fenêtre est fermée.
hotkeys=yes ou no	La fenêtre possède les raccourcis clavier.
z-lock=no ou yes	Lorsqu’elle est activée, la fenêtre reste tout de même sous les autres fenêtres visibles à l’écran.
resizeable =no ou yes	La fenêtre peut être redimensionnée.
innerWidth=N	Largeur de la partie utile de la fenêtre en pixels.	windowRef.innerWidth=N
innerHeight=N	Hauteur de la partie utile de la fenêtre en pixels.	windowRef.innerHeight=N
outerWidth=N	Largeur totale de la fenêtre en pixels (partie utile + cadre).	windowRef.outerWidth=N
outerHeight=N	Hauteur totale de la fenêtre en pixels (partie utile + cadre).	windowRef.outerHeight=N
screenX=N	Distance en pixels entre le coin gauche de l’écran et le coin gauche de la fenêtre.	windowRef.screenX=N
screenY=N	Distance en pixels entre le haut de l’écran et le haut de la fenêtre.	windowRef.screen Y=N
Source:HTML et Javascript Daniel Charnay, Philippe Chaléat

close()

Cette méthode permet de fermer une fenêtre ouverte.
Les fenêtres ouvertes à l’aide de la méthode open() et celles qui sont ouvertes « manuellement » par l’utilisateur sont distinguées.
Dans le premier cas, l’appel à la méthode close() ferme directement la fenêtre. Dans le second, une fenêtre de confirmation s’ouvre, demandant l’accord de l’utilisateur.

Syntaxe :

windowRef.close()

Cette méthode n’a aucun effet lorsqu’elle est utilisée au sein d’une frame. Pour fermer le browser à partir d’une frame, on utilisera window.top.close(), afin de remonter au sommet de la hiérarchie des frames.

focus()

Cette méthode permet de donner le focus à une zone (browser ou frame). Elle provoque le déclenchement du gestionnaire d’événement onFocus associé à la zone windowRef.

Syntaxe :

windowRef.focus()

Rappelons que lorsqu’une zone a le focus, c’est elle qui reçoit l’ensemble de ce qui est saisi au clavier comme par exemple le texte ou les commandes de défilement (flèches haut et bas du clavier).

Exemple :

focusMethod = function getFocus() {           
  document.getElementById("myTextField").focus();
}

opener()

La propriété opener est l’objet de type window qui a permis l’ouverture de la fenêtre actuelle par la méthode open().
Si la fenêtre en cours n’a pas été ouverte avec open(), opener vaut undefined

Syntaxe :

Object window.opener()

ُExemple :

// Ouvre une nouvelle fenêtre
var myWindow = window.open("", "myWindow", "width=200, height=100");

// Ecrire du texte dans la nouvelle fenêtre
myWindow.document.write("<p>C'est 'mafenetre'</p>");     

// Écrivez du texte dans la fenêtre qui a créé la nouvelle fenêtre            
myWindow.opener.document.write("<p>C'est la fenêtre source!</p>");

Sommaire du cours JavaScript

Riadh HAJJI

JavaScript

Méthodes d’ouverture des fenêtres en JavaScript