Créer un compte
Connexion

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


Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel Le 06/02/2015 à 01:26:03
Note: 4/5
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:
<!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 Tutoriels similaires

Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript Image qui suit la souris en Javascript Image qui suit la souris en Javascript Recharger/Actualiser une page en javascript Recharger/Actualiser une page en javascript Empêcher le clic droit en Javascript (anticlicdroit) Empêcher le clic droit en Javascript (anticlicdroit) Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs