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

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

  1. Objectif

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




  2. 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.
  3. 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.
  4. 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.
      1. 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.
      2. 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.
      3. 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
  5. 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.
      1. 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.
  6. 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.
      1. 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).
      2. Exemple :
        • focusMethod = function getFocus() {           
            document.getElementById("myTextField").focus();
          }
  7. 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
      1. Syntaxe :
        • Object window.opener()

      2. ُ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>"); 

Abonnez vous à notre chaîne YouTube gratuitement