JavaScript propose des méthodes intégrées pour ouvrir et fermer la fenêtre du navigateur afin d'effectuer des opérations supplémentaires telles que la fenêtre du robot, etc. Ces méthodes permettent d'ouvrir ou de fermer les fenêtres contextuelles du navigateur. Voici les méthodes de fenêtre :
Le fenêtre.ouvrir La méthode est utilisée pour ouvrir une nouvelle page Web dans une nouvelle fenêtre et fenêtre.fermer méthode pour fermer la page Web ouverte par la méthode window.open. Voir la méthode window.open() en détail :
Fenêtre.open()
Il s'agit d'une méthode de fenêtre prédéfinie de Javascript utilisé pour ouvrir le nouvel onglet ou la nouvelle fenêtre dans le navigateur. Cela dépendra des paramètres de votre navigateur ou des paramètres transmis dans la méthode window.open() pour qu'une nouvelle fenêtre ou un nouvel onglet s'ouvre.
Cette méthode est prise en charge par presque tous les navigateurs Web populaires, comme Chrome , Firefox , etc. Voici la syntaxe et les paramètres de la méthode d'ouverture de fenêtre -
Syntaxe
Cette fonction accepte quatre paramètres, mais ils sont facultatifs.
window.open(URL, name, specs, replace);
Ou
Vous pouvez également utiliser cette fonction sans utiliser le fenêtre mot-clé comme indiqué ci-dessous :
open(URL, name, specs, replace)
Il n'y a aucune différence entre les deux syntaxes.
Liste des paramètres
Vous trouverez ci-dessous la liste des paramètres de la méthode window.open(). Notez que tous les paramètres de cette méthode sont facultatifs et fonctionnent différemment.
URL : Ce paramètre facultatif de la fonction window.open() contient la chaîne URL d'une page Web que vous souhaitez ouvrir. Si vous ne spécifiez aucune URL dans cette fonction, une nouvelle fenêtre vide s'ouvrira ( à propos de : vide ).
nom: A l'aide de ce paramètre, vous pouvez définir le nom de la fenêtre que vous allez ouvrir. Il prend en charge les valeurs suivantes :
| _vide | L'URL transmise sera chargée dans un nouvel onglet/fenêtre. |
| _parent | L'URL se chargera dans la fenêtre ou le cadre parent déjà ouvert. |
| _soi | En passant ce paramètre, l'URL remplacera la sortie précédente et une nouvelle fenêtre s'ouvrira dans le même cadre. |
| _haut | L'URL remplace tout jeu de cadres pouvant être chargé. |
| Nom | Fournissez le nom de la nouvelle fenêtre pour afficher le texte ou les données qu'elle contient. (Remarque - pas le titre de la fenêtre) |
Les valeurs spécifiées ci-dessus sont transmises entre guillemets simples ou doubles à la fonction window.open() à l'emplacement du paramètre name.
spécifications : Ce paramètre contient les paramètres séparés par une virgule. L'élément utilisé dans ce paramètre ne peut pas avoir d'espaces, par exemple, largeur = 150, hauteur = 100 .
Il soutient plusieurs valeurs.
remplacer: Comme les autres paramètres de la méthode window.open(), il s'agit également d'un paramètre facultatif. Il crée une nouvelle entrée ou remplace l'entrée actuelle dans la liste de l'historique. Il prend en charge deux valeurs booléennes ; cela signifie qu'il renvoie vrai ou faux :
| Vrai | Renvoie true si l'URL remplace l'entrée ou le document actuel dans la liste de l'historique. |
| FAUX | Renvoie false si l'URL crée une nouvelle entrée dans la liste de l'historique. |
Valeurs de retour
Il renverra une fenêtre nouvellement ouverte.
Exemples
Voici quelques exemples de fonction window.open() pour ouvrir la fenêtre/l'onglet du navigateur. Par défaut, l'URL spécifiée s'ouvre dans un nouvel onglet ou une nouvelle fenêtre. Voir les exemples ci-dessous :
1. open() avec paramètre URL
Il s'agit d'un exemple simple de méthode d'ouverture de fenêtre contenant une URL de site Web. Nous avons utilisé un bouton. En cliquant sur ce bouton, la méthode window.open() appellera et ouvrira le site Web dans un nouvel onglet du navigateur.
Copier le code
Click the button to open new window <br> <br> Open WindowTestez-le maintenant
Ou
Ce code peut être écrit comme indiqué ci-dessous -
est égal à une chaîne en Java
Copier le code
function openWindow() { window.open('https://www.javatpoint.com'); } Click the button to open new window <br> <br> Open Window Testez-le maintenant Sortir
Quand tu clique dessus Fenêtre ouverte bouton, le site javatpoint s’ouvrira dans un nouvel onglet dans la même fenêtre.
Voir la capture d'écran ci-dessous:
2. open() sans paramètres
Dans cet exemple, nous ne transmettrons aucun paramètre à la fonction window.open() afin que le nouvel onglet s'ouvre dans la fenêtre précédente.
Copier le code
function openWindow() { window.open(); } Click the button to open new window <br> <br> Open Window Testez-le maintenant Sortir
Lorsque vous exécuterez le code ci-dessus, un bouton apparaîtra avec celui-ci.
Quand vous cliquez dessus Fenêtre ouverte bouton, une fenêtre vide s’ouvrira dans un nouvel onglet.
3. open() avec les paramètres de nom
Dans cet exemple, nous préciserons le _parent au paramètre name. Vous pouvez y transmettre n'importe laquelle de ces valeurs (_parent, _blank, _top, etc.).
Copier le code
function openWindow() { window.open('https://gmail.com', '_parent'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Testez-le maintenant Sortir
Exécutez le code et obtenez le résultat comme indiqué ci-dessous. Celui-ci contiendra un bouton sur lequel cliquer et ouvrir la nouvelle URL dans la même fenêtre parent.
Lorsque vous cliquez sur ce bouton, Gmail s'ouvrira sous la même fenêtre parent.
Lorsque vous transmettrez les différentes valeurs dans le deuxième paramètre, vous verrez la différence pour les différentes valeurs.
4. Définissez la taille de la nouvelle fenêtre
Dans cet exemple, nous spécifierons la hauteur et la largeur de la nouvelle fenêtre. Pour cela, nous utiliserons le troisième paramètre ( spécifications ) dans la méthode window.open() et transmettez la hauteur et la largeur de la fenêtre séparées par une virgule à cette fonction. Ainsi, la fenêtre s'ouvrira dans la taille spécifiée.
Copier le code
function openWindow() { window.open('', '', 'width=300,height=200'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window Testez-le maintenant Sortir
Exécutez le code ci-dessus et obtenez le résultat comme indiqué ci-dessous. Celui-ci contiendra un bouton sur lequel cliquer et ouvrir la nouvelle URL dans la même fenêtre parent.
Lorsque vous cliquez sur ce bouton, une nouvelle fenêtre vide s'ouvrira sous la fenêtre parent de taille.
Notez que vous pouvez également transmettre l'URL à la méthode window.open() pour ouvrir n'importe quel site Web.
Ouvrir une nouvelle fenêtre avec un nom et avoir un message
Nous pouvons afficher n'importe quel texte ou formulaire défini par l'utilisateur dans une nouvelle fenêtre que nous allons ouvrir en cliquant sur un bouton. Pour cela, nous devons donner n'importe quel nom à la nouvelle fenêtre et y écrire du texte. Ce nom sera transmis à la méthode window.open(). Voir le code ci-dessous pour savoir comment il sera implémenté avec le codage réel.
Copier le code
function openWindow() { var newtab = window.open('', 'anotherWindow', 'width=300,height=150'); newtab.document.write('<p> This is 'anotherWindow'. It is 300px wide and 150px tall new window! </p>'); } <b> Click the button to open the new user-defined sized window </b> <br> <br> Open Window Testez-le maintenant Sortir
Exécutez le code et obtenez le résultat comme indiqué ci-dessous. Il contiendra un bouton sur lequel cliquer et ouvrir la nouvelle URL sur la même fenêtre parent.
Lorsque vous cliquez sur ce bouton, une nouvelle fenêtre s'ouvrira avec un message défini par l'utilisateur sous la fenêtre parent de taille 300*150.
JavaScript propose également la méthode intégrée, c'est-à-dire close() pour fermer la fenêtre du navigateur.
Fermez la fenêtre ouverte par window.open()
Dans cet exemple, nous allons vous montrer comment fermer la fenêtre ou l'onglet ouvert par la méthode window.open(). Tout d'abord, nous ouvrirons l'URL d'un site Web dans une nouvelle fenêtre (taille définie dans le code) à l'aide d'un clic sur un bouton, puis utiliserons un autre bouton pour fermer cette fenêtre ouverte. Voir le code ci-dessous comment cela sera fait :
Copier le code
Open and close window method example // function to open the new window tab with specified size function windowOpen() { var newWindow = window.open( 'https://www.javatpoint.com/', '_blank', 'width=500, height=350'); } // function to close the window opened by window.open() function windowClose() { newWindow.close(); } <h2> Window open() and close() method </h2> <b> Click the button to open Javatpoint tutorial site </b> <br> Open Javatpoint <br> <br> <b> Click the button to close Javatpoint tutorial site </b> <br> Close Javatpoint Testez-le maintenant Sortir
Lorsque vous exécuterez le code, vous obtiendrez la réponse comme indiqué ci-dessous :
Clique le Ouvrir Javatpoint bouton pour ouvrir le site Web du didacticiel Javatpoint. Nous avons précisé la taille (hauteur et largeur) de la nouvelle fenêtre pop-up à ouvrir.
Si vous cliquez sur le Fermer Javatpoint bouton, cette fenêtre ouverte sera réduite.
Prise en charge du navigateur
Plusieurs navigateurs Web prennent en charge la méthode window.open(), tels que :
- Chrome
- Mozilla Firefox
- Internet Explorer (IE)
- Opéra
- Safaris, etc
Vous pouvez utiliser et exécuter la méthode window.open() sur les navigateurs ci-dessus.