Script popup : Exemples de manipulation de pop-ups

Manipulation de pop-ups

Partie I : Les bases de JavaScript

Edition 1 | Chapitre 10 : L'objet window / Page 144

Edition 2 | Chapitre 10 : L'objet window / Page 159

Edition 3 | Chapitre 10 : L'objet window / Page 159

<html>
<head><title>Manipulation de popups</title><style type="text/css">div.button {font-size:18px;display:inline-block;cursor: pointer;border:1px solid #999;border-radius:3px;padding:5px;margin:2px;} </style>
</head>
<body><h1 id="monH1"></h1><script type="text/javascript">/* Ouverture d'un popup */function popupAuto() {var popup1=window.open("popup1.html", "", "width=200,height=200,left=5,width=5");console.log("Tentative d'ouverture popup1");if (popup1) {console.log("popup1 existe");return popup1;} else {console.log("popup1 n'a pas été créé");}}/* Ouverture d'un popup centré */function popupCentre() {var width=250, height=150;var x=Math.round((screen.width-width)/2);var y=Math.round((screen.height-height)/2);var popup2=window.open("popup2.html", "centre", "width="+width+",height="+height+",left="+x+",top="+y);if (popup2) {console.log("popup2 existe");return popup2;} else {console.log("popup2 n'a pas été affiché");}}/* Récupération d'un message envoyé par un popup */function sendMessage(name) {console.log("Message reçu de "+name);}console.log("Minuterie de 2000 ms");setTimeout("popupAuto()", 2000);</script><div class="button" onclick="var popup2=popupCentre()">Ouvrir un popup centré</div>
</body>
</html>

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Manipulation de popups</title>    <style type="text/css">        div.button {            font-size:18px;            display:inline-block;            cursor: pointer;            border:1px solid #999;            border-radius:3px;            padding:5px;            margin:2px;        }        </style></head><body>    <h1 id="monH1"></h1>    <script type="text/javascript">        /* Ouverture d'un popup */        function popupAuto() {            var popup1=window.open("popup1.html", "", "width=200,height=200,left=5,width=5");            console.log("Tentative d'ouverture popup1");            if (popup1) {                console.log("popup1 existe");                return popup1;            } else {                console.log("popup1 n'a pas été créé");            }        }        /* Ouverture d'un popup centré */        function popupCentre() {            var width=250, height=150;            var x=Math.round((screen.width-width)/2);            var y=Math.round((screen.height-height)/2);            var popup2=window.open("popup2.html", "centre", "width="+width+",height="+height+",left="+x+",top="+y);            if (popup2) {                console.log("popup2 existe");                return popup2;            } else {                console.log("popup2 n'a pas été affiché");            }        }        /* Récupération d'un message envoyé par un popup */        function sendMessage(name) {            console.log("Message reçu de "+name);        }        console.log("Minuterie de 2000 ms");        setTimeout("popupAuto()", 2000);    </script>    <div class="button" onclick="var popup2=popupCentre()">Ouvrir un popup centré</div>    </body></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...