Pop up - Cours Javascript

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.

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.
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 :
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 :
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 :
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 :
Exemple de code :
var m = open ("page.html", "target", "attribut");
pour lui donner le focus :m.focus();
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:
Exemple de code :
var m=open("","dmc");
alert (m.opener.name);