Fiche DOM : objet window - PopUp -

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant-propos |
• | Propriétés et méthodes |
• | Ouvrir un popup (window.open()) |
• | Centrer un Popup |
• | Fermer un popup (window.close()) |
• | Interactions fenêtre appelante fenêtre appelée (le popup) |
• | Focus (window.focus()) |
• | Popup dynamique |
• | Popup avec dimensionnement automatique |
• | Application au projet de site web |

Avant propos

Les pop-up (ou fenêtres additionnelles), sont ces fenêtres qui ont mauvaise presse car elles s'ouvrent le plus souvent contre notre volonté lorsqu'on se connecte sur un site ou bien lors de la navigation sous forme de publicités intempestives. Ce genre de situation est très désagréable surtout lorsque les popup s'ouvrent sous forme d'une seconde fenêtre de taille normale. L'internaute  ne peut plus utiliser le bouton de retour et peut s'en trouver perturbé.

Toutefois une utilisation intelligente peut rendre de nombreux services comme par exemple afficher une légende, une aide, une photo, une démo etc.

Nous allons voir dans cette fiche comment créer et manipuler ces popup.

Le code javascript qui est utilisé pour illustré les propos, ne vous est pas encore familier si vous êtes débutant. Toutefois des commentaires sur les script sont disponibles afin de faciliter la compréhension.

Propriétés et méthodes

Les propriétés et méthodes appartiennent à l'objet window.

Ouvrir un popup (window.open())

Syntaxe

Une popup est ouverte grâce à la méthode (ou fonction) open() appelée sur l'objet window. Cette fonction attend 3 paramètres et retourne l'identifiant  de la fenêtre qui vient d'être ouverte. Cet identifiant sera stocké dans une variable de travail (resultat par exemple) afin d'être utilisé ultérieurement dans le script. Si l'ouverture ne peut pas se faire la méthode retourne NULL.

resultat = window.open( url,nom,options)

• url :  adresse absolue ou relative de la page HTML à ouvrir. Si on désire ouvrir un nouveau popup sans URL( popup dynamique) url sera défini par '' (2 cotes simples) ou "" (2 cotes doubles) : window.open( 'monUrl').
• nom⁽¹⁾ : 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.
  Le mot clé '_blank' ouvre une nouvelle fenêtre sans nom. Le mot clé '_self' charge le popup en lieu et place de la page mère. Les mots clé '_parent'  et '_top' agissent par rapport aux frames: Si aucune frame n'existe ces mots clé agissent comme le mot clé '_self '.
• options⁽²⁾ :   les options (voir liste ci dessous) doivent être écrites à la suite, séparés par des virgule et sans aucun espace, aucun des attributs n’est obligatoire.

Note⁽¹⁾ : Sans le paramètre nom, un nouveau popup est ouvert à chaque fois.

Note⁽²⁾ : Certaines combinaisons peuvent être interprétées différemment en fonction des navigateurs utilisés.

Les options de fenêtre

Exemple de syntaxe

resultat= window.open( 'Demos/DOM_Demo_Window_Popup00.htm', 'testpopup', 'width=250,height=150,top=50,left=50')

Options

Note ⁽¹⁾ Définir une hauteur et une largeur désactive automatiquement la barre d'adresse, d'outils ... sur la plupart des navigateurs. Si vous désirez donc avoir une fenêtre de 500px * 500px et avoir la barre d'adresse, il est préférable de préciser tous les paramètres ou du moins "ceux qui vous importent le plus, avec la valeur qui convient.

Testez les options

Les exemples sont donnés pour les caractéristiques générales suivantes :
URL : 'Demos/DOM_Demo_Window_Popup00.htm'
Nom : 'testpopup'
Options 'width=250,height=150,top=50,left=50'

Réglez les autres paramètres de la fenêtre popup

puis cliquez sur le bouton

Des résultats identiques pour tous les navigateurs ne sont pas garantis. Voici ci-dessous 2 exemples :

Aperçu des options avec le navigateur  Internet explorer

Aperçu des options avec le navigateur Firefox

Centrer un Popup

Nous allons utiliser une propriété de l'objet screen (que nous verrons dans une fiche suivante) qui donne la hauteur et la largeur disponibles pour l'écran de l'utilisateur.

Remarque sur le code : avant toute ouverture de popup on vérifie si un popup n'est pas déjà ouvert avec la même référence (fonction _FermePopup(_id)).

Fermer un popup (window.close())

Généralités

On utilise les méthodes close() et closed de l'objet window

• La méthode closed est un booléen qui permet de savoir si le popup est déjà ouvert ou fermé
• La méthode close() permet de fermer le popup.

A partir de lui-même (le popup se ferme lui-même).

Le popup devra comporter un bouton ou un lien permettant cette action. Par exemple : <a onclick="window.close()"> Fermer la fenêtre</a>

A partir d'une autre page.

La syntaxe est : identificateur de la fenêtre.window.close() . L'identificateur de la fenêtre est la valeur renvoyée lors de l'ouverture de la fenêtre par window.open().

Cas d'erreurs.

Popup ouvert ou fermé

Si l'on teste un popup pour savoir s'il est ouvert ou fermé (ce qui peut se produire lorsque plusieurs fenêtres additionnelles sont ouvertes simultanément)  une erreur va être générée sur certains navigateurs. Pour traiter correctement cet état il convient de créer une fonction générale que l'on pourra appeler par exemple _IsPopupClosed(_id) dans laquelle le paramètre _id est l'identificateur de la fenêtre additionnelle (renvoyée lors de l'ouverture de la fenêtre par window.open()) que l'on désire tester. La fonction retourne true si le popup est déjà ouvert, false dans tous les autres cas. On utilise try{....} catch(e) {...} (instructions de traitement des erreurs) pour se prémunir contre toute surprise.

Fermeture du popup

Si on tente de fermer un popup qui n'a pas été préalablement ouvert une erreur va être générée sur certains navigateurs. Pour traiter correctement cet état il convient de créer une fonction générale que l'on pourra appeler par exemple _FermePopup(_id) dans laquelle le paramètre _id est l'identificateur de la fenêtre (renvoyée lors de l'ouverture de la fenêtre par window.open()) que l'on désire fermer.

function _FermePopup(_id) {

On utilise ici la fonction_IsPopupClosed(_id) décrite ci dessus.

Interactions entre la fenêtre appelante et la fenêtre appelée (popup)

A partir du popup vers la fenêtre mère qui l'a ouvert (window.opener).

Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre avec window.opener. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie null.

Syntaxe générale : window.opener.PROPRIETE

• window.opener représente la référence de la page qui a ouvert le popup
• PROPRIETE représente les méthodes classiques que l'on peut réaliser dans une page HTML.

Exemple avec l'utilisation de la propriété getElementById() de l'objet document que l'on va appliquer à la couleur du titre de la page mère. Dans la page mère le titre est repéré par l'identificateur (id) "id_h1opener".

window.opener.window.document.getElementById('id_h1opener').style.color = 'green'

A partir d'une autre page vers la popup

Syntaxe générale : identificateurFenêtre.PROPRIETE . L'identificateur de la fenêtre est la valeur renvoyée lors de l'ouverture de la fenêtre par window.open(). Si on reprend l'exemple PROPRIETE comme défini précédemment et id_MonPopUp comme identificateur de la fenêtre le code sera :

id_MonPopUp.window.document.getElementById('id_h1popup').style.color = 'green'.

Exemple d'interactions

Focus (window.focus())

Généralités

On peut très bien ouvrir une fenêtre popup, puis cliquer sur la fenêtre principale. Celle-ci redevient la fenêtre active et on dit qu'elle prend le « focus ». Elle passe au premier plan et masque le popup, partiellement ou complètement. Cependant, par la suite, on peut cliquer sur un autre lien et recharger la même fenêtre popup avec une autre page. Logiquement, ce popup devrait alors reprendre le « focus », c'est-à-dire repasser au premier plan. Il n'en est pas toujours ainsi, selon les navigateurs, lorsque ce popup est resté ouvert. Pour s'assurer qu'il reprend le focus, il suffit d'ajouter la ligne suivante dans le code HTML du popup:

Donner le focus au popup à partir d'une autre fenêtre

On peut voir l'intérêt d'une telle action en revenant sur l'exemple précédent concernant les interactions. Le popup initialement ouvert disparaît lors de la sélection de la couleur dans la liste déroulante de la page principale. Lorsque la sélection est terminée le popup réapparaît avec la modification demandée. Normalement après la sélection le popup ne devrait pas réapparaître :la couleur du titre est bien modifiée mais le popup reste en arrière plan. On peut donc si on le désire associer identificateurFenêtre.window.focus() à l'action selection-click pour repasser le popup au premier plan.

Connaître l'état du focus d'un popup

 var etatFocus = window.focus ou var etatFocus = identificateurFenêtre.window.focus

La valeur renvoyée est un booléen =true si la fenêtre a le focus ou false si la fenêtre n'a pas le focus.

Popup dynamique

Généralités

Lorsque l’on ouvre un popup de manière classique, on fait appel à une page web dejà construite que l’on affiche dans la nouvelle fenêtre. Il est cependant également possible d'en fabriquer dynamiquement le contenu.

On dira d'un popup qu'il est classique s'il fait appel à une url bien définie, par opposition aux popup dynamiques qui ne s'adressent pas à une url définie mais créent eux même leur propre espace.

Mécanisme

Dans un premier temps un ordre de déclenchement de popup va être donné à partir de la page en cours (1). Un script va être exécuté dans la page en cours :

• window.open() (2) va créer une nouvelle page avec son identificateur (3).
• la méthode write de l'objet document (4) référencée par rapport à l'identificateur de la nouvelle fenêtre  (5) permet d'écrire un contenu html  dans cette  nouvelle page(6).

Le navigateur va ensuite afficher le contenu html sous forme de page web : le popup (7).

Création du popup

Imaginons que l'on veuille créer un popup dont le contenu serait le suivant :

Le résultat suivant montre la génération d'un popup dynamique ainsi que le code correspondant.

Analyse du code

Dans la page mère on va créer la fonction d'ouverture du popup (OuvreMonPopUp))en prenant soin de déclarer la variable identification de la fenêtre (id_MonPopUp) en tant que variable globale. Cette fonction sera appelée par un click sur le bouton "Ouvrir le popup" de la page mère.

id_MonPopUp =window.open("", 'MonPopUp', 'width=250, height=150, toolbar=no, scrollbars=no, resizable=no');

Après ouverture la fenêtre du popup sera référencée par rapport à id_MonPopUp.

Pour insérer le code HTML du popup on va utiliser la méthode write() relative à l'objet document lui même relatif à l'identificateur de fenêtre. On remarquera que la feuille de style du popup est elle aussi insérée par la méthode write.

  Attention à l'imbrication des quottes ou double quottes dans la syntaxe de la méthode write.

A la fin de l'insertion du code du popup par la méthode write() on fermera la séquence d'écriture par la fonction id_MonPopUp.document.close().

Remarquez le '\n' en fin de chaque ligne générée par document.write(). \n introduit un retour après chaque ligne du contenu HTML du popup, ceci est tout à fait facultatif mais le curieux désirant consulter le code source du popup  (click droit sur le popup, puis Afficher la source) y trouvera un texte structuré.

Popup à dimensionnement automatique

Il est intéressant de pouvoir faire apparaître des images sous forme de popup, toutefois afin d'éviter des effets disgracieux (popup trop grand ou trop petit par rapport aux dimensions de l'image) il faut adapter automatiquement la taille du popup à la taille de l'image.

Analyse du code

On crée un popup dynamique tel que décrit ci dessus dans lequel est inclus le script de dimensionnement automatique .

Le test est activé automatiquement lorsque la page HTML est totalement chargée  (onload='checksize()) de façon à être certain que la balise img du body est bien initialisée (même si l'image elle même n'est pas totalement chargée).

Lorsque l'image est totalement chargée (test sur document.images[0].complete) on applique un window.resizeTo() à la fenêtre avec une largeur et hauteur de l'image auxquelles ont rajoute 5 (px) pour la largeur et 30 (px) à la hauteur pour éviter de rogner l'image.

Application au projet de site web

La Boutique du Fleuriste est une société de vente de fleurs en ligne mais possède aussi une activité de voyagiste via son site boutiquedufleuriste-voyage.com. Lorsque l'on accède à La Boutique du Fleuriste il serait intéressant de faire connaître aux internautes qu'il existe aussi cette activité voyage. Dans un premier temps l'exercice consiste à faire apparaître un popup en même temps que la page d'accueil.
Pour cela on va créer une page html qui sera le popup et que l'on nommera popupvoyage.htm , que l'on placera dans la racine du site (au même niveau que index.html). Le popup contiendra une image popupVoyage.png située dans le répertoire Images/Site et un bouton Fermer que l'on situera en bas à droite.

Le déclenchement de l'apparition du popup est réalisé à la fin du chargement de la page principale (index.html) sur l'évènement onload (sur body) que l'on verra plus tard et dont voici la syntaxe :

<body onload="window.open( 'popupvoyage.htm', 'Pub', 'width=285,height=320,top=50,left=50')">

Le résultat doit donner un popup du style ci-dessous.

Retrouvez la solution