Méthode Window open()

Définition et utilisation

open() Cette méthode ouvre une nouvelle fenêtre ou un nouvel onglet du navigateur, selon les paramètres et les réglages de votre navigateur.

Voir également :

Méthode close()

Exemple

Exemple 1

Ouvrez "www.codew3c.com" dans un nouvel onglet du navigateur :

window.open("https://www.codew3c.com");

Essayer vous-même

Plus d'exemples sont fournis en bas de la page.

Syntaxe

window.open(url, name, features, replace)

Paramètres

Paramètres description
url

Optionnel. URL de la page à ouvrir.

Si non spécifié urlOuvra une nouvelle fenêtre ou un nouvel onglet.
name Optionnel. Propriété target ou nom de la fenêtre.
features Optionnel. Liste d'items séparés par des virgules, sans espaces.
replace

Déprécié.

Détermine si l'URL crée un nouvelle entrée ou remplace le document actuel dans la liste d'historique.

Les valeurs suivantes sont supportées :

  • true - Remplace le document actuel dans la liste d'historique
  • false - Crée un nouvel entrée dans la liste d'historique

Avertissement :Chrome utilise replace Lance une exception si le paramètre est absent.

Le paramètre name prend les valeurs suivantes :

valeur description
_blank L'URL est chargée dans une nouvelle fenêtre ou un nouvel onglet. Par défaut.
_parent L'URL est chargée dans le cadre parent.
_self Remplace l'URL de la page actuelle.
_top URL remplace n'importe quel cadre de 集 qui pourrait être chargé.
name le nom de la fenêtre (ne spécifie pas le titre de la fenêtre).

les valeurs prises en charge par le paramètre features sont les suivantes :

valeur description
fullscreen=yes|no|1|0 si le navigateur doit être affiché en mode plein écran. La valeur par défaut est non. Les fenêtres en mode plein écran doivent également être en mode cinéma. Il s'agit exclusivement de IE.
height=pixels la hauteur de la fenêtre, en pixels. La valeur minimale est de 100.
left=pixels la position de la gauche de la fenêtre (coordonnée X), en pixels. Les valeurs négatives ne sont pas autorisées.
location=yes|no|1|0 si le champ d'adresse doit être affiché. Il s'agit exclusivement d'Opera.
menubar=yes|no|1|0 si la barre de menu doit être affichée.
resizable=yes|no|1|0 si la fenêtre peut être redimensionnée. Il s'agit exclusivement de IE.
scrollbars=yes|no|1|0 si les barres de défilement doivent être affichées. Il s'agit exclusivement de IE, Firefox et Opera.
status=yes|no|1|0 si une barre d'état doit être ajoutée.
titlebar=yes|no|1|0 si la barre de titre doit être affichée. Sauf si l'application appelée est une application HTML ou un dialogue de confiance, elle sera ignorée.
toolbar=yes|no|1|0 si le panneau d'outils du navigateur doit être affiché. Il s'agit exclusivement de IE et Firefox.
top=pixels la position supérieure de la fenêtre (coordonnée Y), en pixels. Les valeurs négatives ne sont pas autorisées.
width=pixels la largeur de la fenêtre, en pixels. La valeur minimale est de 100.

valeur de retour

retourne une référence à la nouvelle fenêtre, ou null si l'appel échoue.

détails techniques

description

open() la méthode cherchera une fenêtre existante ou ouvrira une nouvelle fenêtre de navigateur. Si name si un onglet existant est spécifié, alors retourne une référence à cet onglet. La fenêtre retournée affichera url les paramètres spécifiés pour le document, mais ignore features c'est la seule manière pour JavaScript d'obtenir une référence à cette fenêtre en connaissant uniquement le nom de la fenêtre.

si elle n'est pas spécifiée name les paramètres, ou si la fenêtre spécifiée n'existe pas, alors open() la méthode créera une nouvelle fenêtre de navigateur. Cette nouvelle fenêtre affichera url l'URL spécifiée par le paramètre, dont le nom est name si elle est spécifiée, la taille et les contrôles sont déterminés par features spécifie. url si elle est une chaîne vide, alors open() ouvrira une nouvelle fenêtre.

name spécifie le nom de la nouvelle fenêtre. Ce nom ne peut contenir que des chiffres, des lettres ou des traits de soulignement. Il peut agir en tant que <a> et <form> la valeur de l'attribut target, qui force le document à s'afficher dans cette fenêtre spécifique.

lors de l'utilisation de la méthode Window.open() Lorsque vous chargez un nouveau document dans une fenêtre spécifique existante, vous pouvez lui transmettre replace paramètre, utilisé pour déclarer si le nouveau document aura son propre élément dans l'historique de navigation de la fenêtre ou pour remplacer l'élément actuel. Si replace si la valeur est true, le nouveau document remplacera l'ancien document. Si la valeur est false ou omise, le nouveau document aura son propre élément dans l'historique de navigation de la fenêtre. La fonctionnalité fournie par ce paramètre est similaire à Location.replace() méthode fournis des fonctionnalités très similaires.

Ne pas confondre Window.open() et Document.open() méthode，pour rendre votre code clair et compréhensible, il est préférable d'utiliser Window.open()，ne pas utiliser open()。Dans les gestionnaires d'événements définis en tant que propriétés HTML, le fonction open() est généralement interprétée comme Document.open()doit être utilisé Window.open()。

Caractéristiques de la fenêtre

features le paramètre est la liste des caractéristiques à afficher dans la fenêtre, et les caractéristiques sont séparées par des virgules. Si la valeur de ce paramètre optionnel est vide ou omise, la fenêtre affichera toutes les caractéristiques. Cependant, si features spécifie une caractéristique, les caractéristiques non mentionnées dans cette liste ne seront pas affichées dans la fenêtre. Il convient de noter que cette chaîne ne contient aucune espace ou blanc, et chaque élément a la forme suivante :

feature[=value]

Pour la plupart des caractéristiques,value La valeur est yes ou no. Les caractères d'égalité et les value Les valeurs peuvent être omises, si cette caractéristique apparaît, on suppose value La valeur est yes, si elle n'est pas spécifiée, on suppose value La valeur est no. Cependant, pour les caractéristiques width ou height, value La valeur est obligatoire, vous devez absolument spécifier leurs valeurs en pixels.

Support du navigateur

Tous les navigateurs le supportent open():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support

Plus d'exemples

Exemple 2

Ouvrir la page about:blank dans une nouvelle fenêtre ou un nouvel onglet :

var myWindow = window.open("", "", "width=200,height=100");

Essayer vous-même

Exemple 3

Ouvrir une nouvelle fenêtre nommée "MsgWindow" et y écrire du texte :

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

Essayer vous-même

Exemple 4

Ouvrir une nouvelle fenêtre pour remplacer la fenêtre actuelle :

var myWindow = window.open("", "_self");
myWindow.document.write("<p>J'ai remplacé la fenêtre actuelle.</p>")}

Essayer vous-même

Exemple 5

Ouvrir une nouvelle fenêtre et contrôler son apparence :

window.open("https://www.codew3c.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

Essayer vous-même

Exemple 6

Ouvrir plusieurs onglets :

window.open("http://www.google.com/");
window.open("https://www.codew3c.com/");

Essayer vous-même

Exemple 7

Ouvrir une nouvelle fenêtre. Ensuite, utiliser close() pour fermer cette nouvelle fenêtre :

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // Ouvrir une nouvelle fenêtre
}
function closeWin() {
  myWindow.close();   // Fermer cette nouvelle fenêtre
}

Essayer vous-même

Exemple 8

Ouvrir une nouvelle fenêtre. Utiliser l'attribut name pour retourner le nom de la nouvelle fenêtre :

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>Le nom de cette fenêtre est: " + myWindow.name + "</p>");

Essayer vous-même

Exemple 9

Utiliser la propriété opener pour retourner une référence à la fenêtre qui a créé la nouvelle fenêtre :

var myWindow = window.open("", "myWindow", "width=200,height=100");   // Ouvrir une nouvelle fenêtre
myWindow.document.write("<p>Cette est 'myWindow'</p>");   // Texte dans la nouvelle fenêtre
myWindow.opener.document.write("<p>Cette est la fenêtre source !</p>");  // Créer un nouvelle fenêtre et écrire le texte dans cette fenêtre

Essayer vous-même