Cours Javascript->Pop up
Introduction
Info
Les pop up sont des fenêtres dont les dimensions et les propriétés peuvent être paramétrées.
Elles sont utilisées pour les afficher de pub par exemple.
Attention, les pop up sont de plus en plus bloquées par les navigateurs.
Elles sont utilisées pour les afficher de pub par exemple.
Attention, les pop up sont de plus en plus bloquées par les navigateurs.
Créer une pop up
Info
Une pop up est créée grâce à la méthode javascript open() de l'objet document ou de l'objet window.
document.open("","");
La métode javascript open() est composée de trois parties :
- la page à ouvrir (url),
- la cible (target. _self,_blank.....)
- ces caractéristiques (attributs).
On l'écrit :
Il est préférable de l'associer à une variable, ce qui nous permettra de manipuler la pop up:
Exemple de code :
window.open("","");
document.open("","");
La métode javascript open() est composée de trois parties :
- la page à ouvrir (url),
- la cible (target. _self,_blank.....)
- ces caractéristiques (attributs).
On l'écrit :
Exemple de code :
open("page.html", "target", "attributs");Il est préférable de l'associer à une variable, ce qui nous permettra de manipuler la pop up:
Exemple de code :
var m = open("page.html","target","attributs");Les attributs
Info
Toutes les valeurs sont égales 1 (true) ou 0 (false), sauf pour la hauteur et la largeur.
Leur ordre n'a pas d'importance.
On les écrit :
Largeur :
définit la longueur de la fenêtre à ouvrir, la taille minimum est de 100.
width=un nombre;
Hauteur :
définit la largeur de la fenêtre à ouvrir, la taille minimum est de 100.
height=un nombre;
Toolbar :
pour Internet explorer, c'est la barre où se trouvent les icônes précédente, suivante,...
Location :
c'est la barre qui affiche l'url.
Directories :
pour Internet explorer, c'est la barre qui se nomme lien.
Status :
C'est la parie basse de la fenêtre où l'on voit le chargement.
Menubar :
pour netscape, barre qui contient les menus (afficher, édition,...)
Scrollbars :
définit si il faut des barres de défilement.
Resizable :
si la fenêtre peut être redimensionnée, elle peut être seulement redimensionnée à la taille de l'écran.
Leur ordre n'a pas d'importance.
On les écrit :
Exemple de code :
open("page.html", "target", "toolbar=1, directories=1, status=1, menubar=1, width=100, height=100, scrollbars=1, location=1, resizable=1")Largeur :
définit la longueur de la fenêtre à ouvrir, la taille minimum est de 100.
width=un nombre;
Hauteur :
définit la largeur de la fenêtre à ouvrir, la taille minimum est de 100.
height=un nombre;
Toolbar :
pour Internet explorer, c'est la barre où se trouvent les icônes précédente, suivante,...
Location :
c'est la barre qui affiche l'url.
Directories :
pour Internet explorer, c'est la barre qui se nomme lien.
Status :
C'est la parie basse de la fenêtre où l'on voit le chargement.
Menubar :
pour netscape, barre qui contient les menus (afficher, édition,...)
Scrollbars :
définit si il faut des barres de défilement.
Resizable :
si la fenêtre peut être redimensionnée, elle peut être seulement redimensionnée à la taille de l'écran.
Fermer une pop up
Info
La méthode javascript close() de l'objet document ou de l'objet window permet de fermer une pop up.
Une pop up peut être fermée de deux façons :
Soit on la ferme à partir de la fenêtre qui l'a ouverte, soit à partir d'elle même.
A partir de la fenêtre qui l'a ouverte :
Pour cela la pop up doit être ouverte comme ceci :
m.close();
A partir d'elle même :
Une pop up peut être fermée de deux façons :
Soit on la ferme à partir de la fenêtre qui l'a ouverte, soit à partir d'elle même.
A partir de la fenêtre qui l'a ouverte :
Pour cela la pop up doit être ouverte comme ceci :
Exemple de code :
var m = open ("page.html", "target", "attribut");
m.close();
A partir d'elle même :
Exemple de code :
window.close();La fenêtre est ouverte ?
Info
Pour savoir si une pop up est ouverte il faut utiliser la propriété javascript closed de l'objet document ou de l'objet window
Le teste à effectué est :
//action si la fenêtre est fermée
}else{
//action si la fenêtre est ouverte
}
Le teste à effectué est :
Exemple de code :
if (m.closed){
//action si la fenêtre est fermée
}else{
//action si la fenêtre est ouverte
}
focus()
Info
La méthode javascript focus() de l'objet document ou de l'objet window permet de mettre en avant une pop up.
Une pop up peut être mise en avant de deux façons.
Soit on met le focus à partir d'une autre fenêtre, soit à partir d'elle même.
A partir d'une autre fenêtre :
Pour cela la pop Up doit être ouverte comme ceci :
pour lui donner le focus :m.focus();
A partir d'elle même : window.focus();
Une pop up peut être mise en avant de deux façons.
Soit on met le focus à partir d'une autre fenêtre, soit à partir d'elle même.
A partir d'une autre fenêtre :
Pour cela la pop Up doit être ouverte comme ceci :
Exemple de code :
var m = open ("page.html", "target", "attribut");A partir d'elle même : window.focus();
opener
Info
La propriété javascript opener de l'objet document ou de l'objet window définit la fenêtre qui a ouvert la pop up.
La propriété javascript opener renvoie un objet document.
Exemple
nous voulons savoir le nom de la fenêtre qui a ouvert la pop up:
alert (m.opener.name);
La propriété javascript opener renvoie un objet document.
Exemple
nous voulons savoir le nom de la fenêtre qui a ouvert la pop up:
Exemple de code :
var m=open("","dmc");
alert (m.opener.name);
