Traitement des popups en javascript

Traitement des popups en javascript

L’utilisation de popup est la manière la plus simple pour ouvrir des fenêtres entièrement paramétrables au niveau de leur position, taille et apparence pour les barres d’outils.

Avec Dreamweaver

L’ouverture de popup peut se faire avec Dreamweaver avec le comportement “Ouvrir la fenêtre Navigateur”.

Il suffit ensuite de préciser pour la fenêtre, les propriétés désirées :

Cependant, le comportement de Dreamweaver ne permet pas de préciser la position de la fenêtre ni la présence de certaines barres d’outils de la fenêtre.

En Javascript

La fonction Javascript permettant d’ouvrir une fenêtre en popup est la fonction open().

Cette fonction a trois propriétés :

une url, celle de la page à ouvrir
un nom qui est celui qui sera donné à la fenêtre ouverte et qui permettra de la manipuler. Ce nom ne doit pas contenir de majuscule, espace, tiret, caractères spéciaux ou caractères accentués
les attributs de la fenêtre

ceux-ci doivent être écris à la suite, séparés par des virgule et sans aucun espace, aucun des attributs n’est obligatoire.

Les attributs de fenêtre :

width : largeur de la fenêtre.
height : hauteur de la fenêtre.
top : position de la fenêtre par rapport au haut de l’écran.
left : position de la fenêtre par rapport au bord gauche de l’écran.
toolbar : 1 ou yes pour afficher la barre d’outils du navigateur, 0 ou no pour la cacher.
menubar : 1 ou yes pour afficher la barre de menu du navigateur, 0 ou no pour la cacher.
location : 1 ou yes pour afficher la barres d’adresse du navigateur, 0 ou no pour la cacher.
scrollbars : 1 ou yes pour afficher les ascenseurs du navigateur, 0 ou no pour les cacher.
resizable : 1 ou yes pour autoriser le dimensionnement de la fenêtre, 0 ou no pour l’interdire.
directories : 1 ou yes pour afficher la barre des liens, 0 ou no pour la cacher.
status : 1 ou yes pour afficher la barre d’état, 0 ou no pour la cacher.
fullscreen : 1 ou yes pour mettre la fenêtre en plein écran.
channelmode : 1 ou yes pour mettre la fenêtre en plein écran avec raccourcis de barre d'outil (même résultat qu'utilisation de la touche F11).

Exemple

<a href="#" onclick="window.open('page.html','nom','toolbar=0,menubar=0,location=0,scrollbars=1,width=400,height=300')">lien</a>

Générer une popup avec le code source de la nouvelle page

Lorsque l'on ouvre une popup de manière classique, on fait apel à une page web que l'on affichera dans la nouvelle fenêtre. Il est cependant également possible de ne pas appeler de page mais d'en donner directement tout le code source.

Par exemple, pour ouvrir une page dont le code source serait :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>page popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
Ici tout le contenu de la page ....
</body>
</html>

On ouvre une popup en ne spécifiant aucune page à ouvrir, la popup correspond ici à newpage

newpage=open("",'popup','width=400,height=400,toolbar=no,scrollbars=no,resizable=no');

avec la fonction write(), on donne le code source de la popup :

newpage.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>");

Il est important de faire bien attention aux guillemets du code source car le code insérer avec la fonction write() se retrouve netre guillemets. Il faudra donc utiliser des simples cotes ou \” Attention également avec la fonction write() pour laquelle le code inséré ne doit pas contenir de retour à la ligne. Il est préférable de sectionner le code en utilisant plusieurs fois newpage.document.write()

La fonction complète pour ouvrir la page en popup contenant tout le code de la page sera donc :

function popup(){
newpage=open("",'newpopup','width=400,height=400,toolbar=no,scrollbars=no,resizable=no');
newpage.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>");
newpage.document.write("<html><head><title>page popup</title></head>");
newpage.document.write("<body>Ici tout le contenu de la page ....</body></html>");
}

Lancer une popup à l'ouverture d'une page

Il suffit de lancer la fonction d'ouverture dans le body, avec l'événement onload.

<body onload="open('page.html','popup1','width=400,height=300,scrollbars=no')">

Ouvrir plusieurs popup

Il existe deux possibilités : - Ouvrir une fenêtre différente pour chaque popup. - Ouvrir une première popup puis lancer de nouvelles popup qui s’afficheront dans la fenêtre déjà ouverte en mettant celle-ci à jour.

Lorsque l’on ouvre une popup, une des propriétés de la fonction open() est le nom de la fenêtre ouverte. Ce nom va servir et fonctionner comme un target de frame.

Si l'on ouvre par exemple dans une page une popup de la manière suivante :

open("page.html","popup1","width=400,height=300,scrollbars=no")

le nom de la popup ouverte sera “popup1”.

Puis, si on ouvre une seconde popup ainsi :

open("page2.html","popup1","width=400,height=300,scrollbars=no")

La page “page2.html” s'ouvrira dans la fenêtre de la popup déjà ouverte et mettra celle ci à jour.

Alors qu'avec une troisième popup ouverte ainsi :

open("page3.html","popup2","width=400,height=300,scrollbars=no")

La page “page3.html” s'ouvrira dans une nouvelle fenêtre en popup.

Fermer une popup

Si la fonction open() permet d’ouvrir des popup, la fonction close() permet de les fermer.

Dans une popup, un lien pour fermer cette popup :

<a href="#" onclick="window.close()">fermer la fenêtre</a>

Si la popup ouverte contient des frames, le lien pour fermer la popup se trouvera dans une des frames, il ne faudra donc plus demander la fermeture du framset, donc de la page parent :

<a href="#" onclick="parent.close()">fermer la fenêtre</a>

A partir d’une page mère qui ouvre une popup, un lien pour fermer la popup ouverte dans la page mère :

<a href="#" onclick="fenetre=window.open('page.html','nom','toolbar=0,menubar=0,location=0')">popup</a>
<a href="#" onclick="fenetre.close()">fermer</a>

“fenetre” est une variable qui définit la fenêtre ouverte et qui permet ensuite de la fermer lorsqu’elle est associée à close().

Une popup toujours en premier plan

Le focus permet de déterminer la fenêtre active. En utilisant le comportement onblur (action lorsque l'utilisateur quitte un élément qui était activé), il est possible de forcer une fenêtre popup à rester toujours en premier plan. A mettre dans le body de la page devant s'ouvrir en popup :

<body onblur="self.focus()">

Interagir avec la fenêtre mère à partir de la popup

Lorsque l'on ouvre une popup, la fenêtre contenant le lien qui a ouvert la popup est appelée “fenêtre mère” et la popup “fenêtre fille”. Il est possible d'atteindre la fenêtre mère depuis la fenêtre fille grâce à l'objet fenêtre opener.

Vous pouvez ainsi créer un lien dans la popup fermant la fenêtre mère :

<a href="#" onclick="window.opener.location='nouvellepage.html'">mettre a jour</a>

Ou un lien dans la popup mettant à jour le contenu de la fenêtre mère :

<a href="#" onclick="window.opener.close()">fermer</a>

Une popup centrée

Lorsque l’on ouvre une popup, on peut préciser sa taille ainsi que sa position dans l’écran. Il est également possible en javascript de récupérer la résolution de l’écran du visiteur. A partir de cela et d’une petite soustraction et division, il est possible de centrer une popup !

Pour récupérer la résolution de l’écran screen.availHeight retourne la hauteur d'affichage disponible de l'écran screen.availWidth retourne la largeur d'affichage disponible de l'écran Donc pour une popup de largeur l et de hauteur h, les positions seront :

(screen.availHeight-h)/2
(screen.availWidth-l)/2

selon les navigateurs, la valeur retournée sera parfois un nombre décimal car le calcul de l'espace disponible se fait en otant la barre démarrer ou le dock de macOS, il faut donc arrondir ce nombre pour obtenir un entier à l'aide de Math.round()

Fonction d’ouverture de popup centrée avec en paramètres la page à ouvrir et ses dimensions

<SCRIPT language="Javascript" type="text/javascript">
function ouvrir(l,h,url) {
hauteur=Math.round((screen.availHeight-h)/2);
largeur=Math.round((screen.availWidth-l)/2);
window.open(url, "site", "toolbar=0,location=0,directories=0,status=0, scrollbars=0,resizable=0,menubar=0,top="+hauteur+",left="+largeur+",width="+l+",height="+h);
}
</SCRIPT>

Que l’on pourra ensuite appeler ainsi :

<a href="#" onclick="ouvrir(400,300,'page.html')">lien</a>

Tutorial de nanoum

Forums Développement Multimédia