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
          4. 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 :
          3. 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 :
          3. // 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>");

Ces articles pourraient aussi vous intéresser

Correction Exercices les Fonctions en Javascript Série 01
7 mai, 2021

Les fonctions en Javascript Les fonctions, Expressions et fonctions fléchées en Javascript Exercices les fonctions en javascript Série 01 (Correction) Correction Exercices les Fonctions en Javascript Série 01 Exercice 01 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution Rappel Une année est dite bissextile quand elle comporte le 29 Février. Une année bissextile comporte donc 366 jours au lieu de …

Les fonctions, Expressions et fonctions fléchées en Javascript
6 mai, 2021

Les fonctions en Javascript Les fonctions, Expressions et fonctions fléchées en Javascript Exercices les fonctions en javascript Série 01 (Correction) Les fonctions, Expressions et fonctions fléchées en Javascript Objectifs Créez et comprenez les fonctions en Javascript! Présentation Une fonction est un ensemble de code, qui est défini une fois et peut être appelé n nombre de fois. Une fonction peut …

Correction examen 4 en HTML , CSS et JS 1-3
29 avril, 2021

Examen en HTML et CSS Examen 2 en HTML et CSS Examen 3 en HTML , CSS et JS Examen 4 en HTML , CSS et JS(Correction) Correction examen 4 en HTML , CSS et JS 1-3 Recherche, affichage des valeurs dans un tableau Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution : Partie HTML <!DOCTYPE html> <html lang=”en”> <head> …

Abonnez vous à notre chaîne YouTube gratuitement