Vous êtes ici: Support du web > Scripts et tutoriaux > Javascript > Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel

Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel
ybouane Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel Note : 4.9/5 (4 votes) Derniéres modifications : 22/02/2010 à 05:10:53 Mots-Clés : ouvrir une nouvelle fenêtre window javascript pop-up en js nouvelles fenêtre pop-up en javascript navigateur window.open nouvelle fenêtre pop-up Bonjour, dans ce tutoriel, je vais vous montrer comment ouvrir une nouvelle fenêtre, une pop-up en javascript. Ouvrir une pop-up, n'est pas nécessairement utilisé pour faire de la publicité, les pop-up servent surtout à séparer de différents contenus, par exemple lorsque l'on veut afficher une image grand format, il est plus adapter de l'ouvrir dans une nouvelle fenêtre, ou quand on clique sur un bouton d'aide, il est plus adapté d'avoir une fenêtre différente... La méthode javascript pour ouvrir une nouvelle fenêtre est window.open, cette méthode peut avoir plusieurs arguments, les voici: L'url de la nouvelle fenêtre - Simplement l'url qui sera chargée dans la nouvelle fenêtre. Le nom de la nouvelle fenêtre - Le nom de la nouvelle fenêtre, c'est très utile pour que deux fenêtres puissent communiquer entre elles. Les options - Différentes options permettant de configurer la nouvelle fenêtre, tel que sa taille, sa position... il existe différentes options, certaines sont désactivée dans les navigateurs pour des raisons de sécurité. voici les options généralement activées: with: la largeur de la fenêtre en px height: la hauteur de la fenêtre en px left: la position de la fenêtre à partir de la droite en px top: la position de la fenêtre à partir du haut en px menubar: affichage du menu, yes pour oui, no pour non toolbar: affichage de la barre d'outils, yes pour oui, no pour non scrollbars: affichage de la barre de défilement, yes pour oui, no pour non Bon voici un code pour mieux illustrer le tout: Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ouvrir une pop-up en javascript</title> <script type="text/javascript"> <!-- function open_infos() { window.open('pageb.html','nom_de_ma_popup','menubar=no, scrollbars=no, top=100, left=100, width=300, height=200'); } --> </script> </head> <body> <a href="#null" onclick="javascript:open_infos();">Ouvrir la Pop-Up</a> </body> </html> Essayer Et pour finir, voici un tutoriel permettant d'ouvrir une nouvelle fenêtre et de la centrer: Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript Merci et j'espère que ce script vous sera utile. Scripts et tutoriaux similaires à celui ci: Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript Image qui suit la souris en Javascript Recharger/Actualiser une page en javascript Empêcher le clic droit en Javascript (anticlicdroit) Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Précharger des images en javascript et detecter la fin du prechargement Aller à la page précédente et suivante en javascript objet history Gestion des cookies en Javascript - document.cookie javascript get cookie set cookie Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par Grafik le 08/01/2011 à 01:04:36 Un grand merci pour cette explication très précieuse, j'ai passé beaucoup de temps sur le net pour avoir une idée des fenêtre pop up merci a vous !! Envoyé par vnihoul7 le 11/02/2011 à 20:25:46 assez compliquer Envoyé par tico le 07/04/2011 à 09:28:01 Merci pour ce script Par contre les options ne fonctionnent pas toujours à l'ecran les barres outils Envoyé par bb2000 le 21/10/2011 à 19:41:09 il existe pas un mode pour l'ouvrir au chargement de la page merci d'avance. Envoyé par AYmILlyGqHqV le 22/12/2011 à 06:51:55 Great post with lots of imporatnt stuff. Envoyé par jogsqafh le 24/01/2012 à 12:30:02 20 Envoyé par wwm le 17/05/2012 à 06:01:16 lien de l'essai mort

Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel

ybouane

Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel
Note : 4.9/5 (4 votes)
Derniéres modifications : 22/02/2010 à 05:10:53
Mots-Clés : ouvrir une nouvelle fenêtre window javascript pop-up en js nouvelles fenêtre pop-up en javascript navigateur window.open nouvelle fenêtre pop-up

Bonjour,
dans ce tutoriel, je vais vous montrer comment ouvrir une nouvelle fenêtre, une pop-up en javascript.
Ouvrir une pop-up, n'est pas nécessairement utilisé pour faire de la publicité, les pop-up servent surtout à séparer de différents contenus, par exemple lorsque l'on veut afficher une image grand format, il est plus adapter de l'ouvrir dans une nouvelle fenêtre, ou quand on clique sur un bouton d'aide, il est plus adapté d'avoir une fenêtre différente...

La méthode javascript pour ouvrir une nouvelle fenêtre est window.open, cette méthode peut avoir plusieurs arguments, les voici:

L'url de la nouvelle fenêtre - Simplement l'url qui sera chargée dans la nouvelle fenêtre.
Le nom de la nouvelle fenêtre - Le nom de la nouvelle fenêtre, c'est très utile pour que deux fenêtres puissent communiquer entre elles.
Les options - Différentes options permettant de configurer la nouvelle fenêtre, tel que sa taille, sa position...

il existe différentes options, certaines sont désactivée dans les navigateurs pour des raisons de sécurité.
voici les options généralement activées:

with: la largeur de la fenêtre en px
height: la hauteur de la fenêtre en px
left: la position de la fenêtre à partir de la droite en px
top: la position de la fenêtre à partir du haut en px
menubar: affichage du menu, yes pour oui, no pour non
toolbar: affichage de la barre d'outils, yes pour oui, no pour non
scrollbars: affichage de la barre de défilement, yes pour oui, no pour non

Bon voici un code pour mieux illustrer le tout:

Code: (X)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Ouvrir une pop-up en javascript</title>

        <script type="text/javascript">

                <!--

                        function open_infos()

                        {

                                window.open('pageb.html','nom_de_ma_popup','menubar=no, scrollbars=no, top=100, left=100, width=300, height=200');

                        }

                -->

                </script>

    </head>

    <body>

        <a href="#null" onclick="javascript:open_infos();">Ouvrir la Pop-Up</a>

    </body>

</html>

Essayer

Et pour finir, voici un tutoriel permettant d'ouvrir une nouvelle fenêtre et de la centrer:
Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript

Merci et j'espère que ce script vous sera utile.

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par Grafik le 08/01/2011 à 01:04:36

Un grand merci pour cette explication très précieuse, j'ai passé beaucoup de temps sur le net pour avoir une idée
des fenêtre pop up

merci a vous !!

Envoyé par vnihoul7 le 11/02/2011 à 20:25:46

assez compliquer

Envoyé par tico le 07/04/2011 à 09:28:01

Merci pour ce script

Par contre les options ne fonctionnent pas toujours à l'ecran les barres outils

Envoyé par bb2000 le 21/10/2011 à 19:41:09

il existe pas un mode pour l'ouvrir au chargement de la page
merci d'avance.

Envoyé par AYmILlyGqHqV le 22/12/2011 à 06:51:55

Great post with lots of imporatnt stuff.

Envoyé par jogsqafh le 24/01/2012 à 12:30:02

Envoyé par wwm le 17/05/2012 à 06:01:16

lien de l'essai mort