Popups JavaScript et window.open()

Parmi les capacités de JavaScript, l'ouverture et le contrôle de fenêtres navigateur distinctes permettent de créer des flux de connexion, des échanges OAuth, des aperçus avant impression et des surfaces de notification riches. Ce chapitre couvre tout ce dont vous avez besoin : ouvrir une fenêtre avec window.open(), la dimensionner et la positionner, échanger des messages avec elle, réagir aux événements focus et unload, et la fermer proprement — ainsi que les restrictions de sécurité modernes qui définissent la façon dont les navigateurs traitent tout cela.

Pour les boîtes de dialogue simples en une ligne (alert, prompt et confirm), consultez JavaScript alert, prompt et confirm. Cette page traite des fenêtres navigateur complètes.

Comprendre les popups JavaScript

Un popup est une fenêtre navigateur de niveau supérieur distincte, ouverte par votre script. Contrairement à un alert() modal, il possède son propre document, sa propre URL et reste ouvert jusqu'à ce que l'utilisateur (ou votre code) le ferme. Les popups sont utiles pour du contenu qui doit exister en dehors de la page actuelle — l'écran de connexion d'un fournisseur OAuth, un widget de paiement ou un rapport imprimable. Le point d'entrée unique pour tout cela est la méthode window.open().

Fonctionnement de window.open()

window.open() prend trois arguments et retourne une référence à la nouvelle fenêtre (ou null si le navigateur l'a bloquée) :

let win = window.open(url, name, features);

warning Les navigateurs n'autorisent window.open() à réussir que lorsqu'il s'exécute directement dans un geste utilisateur tel qu'un clic. L'appeler au chargement de la page ou dans un setTimeout est traité comme un popup non sollicité et est bloqué — win retourne null. Déclenchez toujours les popups depuis un véritable gestionnaire d'événements et vérifiez la valeur de retour.

Créer une fenêtre popup de base

Pour créer une fenêtre popup simple, appelez window.open() depuis un gestionnaire de clic. La méthode ouvre une nouvelle fenêtre navigateur et retourne une référence à celle-ci, que vous pouvez utiliser pour manipuler la fenêtre davantage.

<p>Click the button to trigger the popup!</p>
<button onclick="openPopup()">Open Popup</button>

<script>

// Function to open a new popup with a message
function openPopup() {
    let newWindow = window.open("", "Example", "width=400,height=400");
    // Use innerHTML for safer dynamic content injection
    newWindow.document.body.innerHTML = "<h1>Welcome to our popup!</h1>";
}
</script>

warning Note : document.write peut écraser l'intégralité du document s'il est appelé après le chargement de la page. La pratique moderne préfère innerHTML ou les méthodes de manipulation du DOM pour une injection de contenu dynamique plus sûre.

Ce fragment de code crée un bouton sur la page web. Lorsqu'on clique dessus, il ouvre une nouvelle fenêtre popup de dimensions 400x400 pixels et affiche un message de bienvenue.

Contrôler le contenu et le comportement des popups

Contrôler le contenu et le comportement des popups est essentiel pour s'assurer qu'ils contribuent positivement à l'expérience utilisateur sans être intrusifs.

<p>Click the button to trigger the popup!</p>
<button onclick="openInteractivePopup()">Learn More</button>

<script>
// Function to open a popup and control its content and behavior
function openInteractivePopup() {
    // Open a new window with specific dimensions
    let popup = window.open("", "InteractivePopupExample", "width=400,height=400");
    // Use innerHTML to inject content safely
    popup.document.body.innerHTML = `
        <h1>Interactive Popup</h1>
        <p>Click the button to change this message.</p>
        <button onclick='document.body.innerHTML = "<h1>Content Updated!</h1><p>Thanks for interacting.</p>";'>Update Content</button>
    `;
}
</script>

Pour communiquer de façon sécurisée entre la fenêtre parente et le popup, utilisez la propriété window.opener pour référencer le parent, et postMessage() pour les échanges cross-origin ou plus sûrs. Pour un traitement approfondi de ce sujet, consultez Communication entre fenêtres.

<!-- In parent window -->
<script>
let popup = window.open("popup.html", "Popup", "width=400,height=400");
popup.postMessage("Hello from parent!", "*");
</script>

<!-- In popup window -->
<script>
window.addEventListener("message", (event) => {
    console.log("Received:", event.data);
    // Respond back if needed
    window.opener.postMessage("Hello back!", event.origin);
});
</script>

Points clés :

• Cette fonction ouvre non seulement un popup, mais intègre également des éléments interactifs (comme un bouton dans le popup).
• Elle démontre le contrôle dynamique du contenu du popup après sa création, ce qui est plus interactif et peut être adapté pour réagir aux saisies utilisateur ou à d'autres événements.

Méthodes et événements avancés des fenêtres

Au-delà des popups de base, JavaScript offre une variété de méthodes pour interagir avec les fenêtres navigateur, améliorant les fonctionnalités et l'interactivité utilisateur.

Redimensionner et déplacer des éléments

JavaScript permet le redimensionnement et le repositionnement dynamiques des éléments de la page, ce qui peut être particulièrement utile pour créer des applications web réactives et conviviales. (Remarque : window.resizeTo() et window.moveTo() existent pour les tests legacy ou en environnement restreint, mais les navigateurs modernes les restreignent fortement pour des raisons de sécurité. Cet exemple simule le comportement à l'aide d'un div stylisé. Pour les éléments d'interface glissables ou redimensionnables, position: absolute est souvent préféré à relative pour garantir des calculs de coordonnées prévisibles.)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simulate Window Adjustments</title>
    <style>
        #simulatedWindow {
            width: 300px;
            height: 300px;
            position: absolute;
            background-color: #f3f3f3;
            border: 2px solid #ccc;
            margin: 20px;
            padding: 10px;
            transition: all 0.5s ease; /* Smooth transition for size and position changes */
        }
    </style>
</head>
<body>
    <button onclick="adjustSimulatedWindow()">Adjust Window</button>
    <div id="simulatedWindow">This is a simulated window. Click the button to adjust its size and position.</div>

    <script>
        function adjustSimulatedWindow() {
            const elem = document.getElementById('simulatedWindow');
            // Toggle size and position to demonstrate the effect
            if (elem.style.width === '500px') {
                elem.style.width = '300px';
                elem.style.height = '300px';
                elem.style.top = '0px';
                elem.style.left = '0px';
            } else {
                elem.style.width = '500px';
                elem.style.height = '500px';
                elem.style.top = '100px';
                elem.style.left = '100px';
            }
        }
    </script>
</body>
</html>

Points clés :

1. Structure HTML : Comprend un bouton et un élément div stylisé pour ressembler à une fenêtre. Le div représente la fenêtre que nous allons « redimensionner » et « déplacer ».
2. Style CSS : Définit la taille et la position initiales de la fenêtre simulée, avec des transitions fluides pour l'effet visuel.
3. Fonction JavaScript : Lorsque le bouton est cliqué, la fonction adjustSimulatedWindow bascule la taille et la position de la fenêtre simulée. Le changement de position est géré en modifiant les propriétés CSS top et left, simulant le déplacement d'une fenêtre à l'écran.

Gérer les événements de fenêtre

La gestion des événements est essentielle pour créer des applications interactives. JavaScript fournit plusieurs événements liés aux actions des fenêtres, tels que onbeforeunload et onunload, qui peuvent être utilisés pour exécuter du code à des moments stratégiques.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript Window Events Demo</title>
    <style>
        #message {
            padding: 20px;
            margin: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <p>Watch how the message updates based on window events. Initially, it changes upon loading. If you attempt to exit or click the mock exit link below, a prompt will appear asking if you want to leave the page. Cancelling the action will update the message.</p>
    <div id="message">Wait for it...</div>
    <!-- Mock link for simulating page leave -->
    <a href="#" onclick="simulatePageLeave(); return false;">Mock Page Leave</a>
    <script>
        window.onload = function() {
            document.getElementById('message').innerHTML = '<strong>Window loaded successfully!</strong>';
        };

        // Function to simulate page leave
        function simulatePageLeave() {
            // Show dialog asking if the user really wants to leave
            var confirmLeave = confirm('Are you sure you want to simulate leaving the page?');
            if (confirmLeave) {
                // If confirmed, update message as if leaving
                document.getElementById('message').innerHTML = '<strong>Leaving the page...</strong>';
            } else {
                // If cancelled, update message accordingly
                document.getElementById('message').innerHTML = '<strong>Decided to stay on the page!</strong>';
            }
        }

        window.onbeforeunload = function() {
            document.getElementById('message').innerHTML = '<strong>Preparing to leave the page...</strong>';
            return 'Are you sure you want to leave?';
        };
    </script>
</body>
</html>

Points clés :

1. Lien fictif pour simuler le départ de page : Le lien avec href="#" et un gestionnaire onclick qui appelle simulatePageLeave(); return false; simule l'effet d'une tentative de quitter la page. return false; empêche l'action par défaut du lien, maintenant l'utilisateur sur la page actuelle.
2. Boîte de dialogue de confirmation : La fonction simulatePageLeave présente une boîte de dialogue de confirmation similaire à ce qui se passerait lors d'une tentative réelle de déchargement de page. Elle permet aux utilisateurs de décider s'ils souhaitent « partir » ou non.
3. Mises à jour des messages : Selon le choix de l'utilisateur dans la boîte de dialogue de confirmation, le message dans le div est mis à jour pour refléter ce choix, imitant le comportement attendu lors d'une vraie tentative de quitter la page.
4. Note sur le comportement des navigateurs : Les navigateurs modernes ignorent les chaînes personnalisées retournées par onbeforeunload et n'affichent qu'une boîte de dialogue de confirmation par défaut. L'exemple démontre le déclenchement de l'événement, mais le texte exact de l'invite est contrôlé par le navigateur.

Fermer une fenêtre popup

Il est important de fournir un mécanisme permettant aux utilisateurs de fermer facilement les popups que vous créez. Cela améliore l'expérience utilisateur en leur permettant de contrôler leur propre interaction avec votre application.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Popup Example</title>
    <script>
        var myPopup = null; // Initialize the popup variable.

        // Function to open a popup
        function openPopup() {
            // Check if the popup already exists and is not closed
            if (myPopup === null || myPopup.closed) {
                myPopup = window.open("", "PopupWindow", "width=400,height=400");
                // Set the content of the popup using innerHTML
                myPopup.document.body.innerHTML = `
                    <html>
                    <head><title>Popup Content</title></head>
                    <body>
                        <h1>Welcome!</h1>
                        <p>This is your popup window.</p>
                        <button onclick="window.close()">Close Window</button>
                    </body>
                    </html>
                `;
                // Ensure the popup gets focus
                myPopup.focus();
            } else {
                // Bring the already opened popup to the front
                myPopup.focus();
            }
        }

        // Function to close the popup
        function closePopup() {
            if (myPopup && !myPopup.closed) {
                myPopup.close();
                myPopup = null; // Reset the popup variable after closing it.
            }
        }
    </script>
</head>
<body>
    <button onclick="openPopup()">Open Popup</button>
    <button onclick="closePopup()">Close Popup</button>
</body>
</html>

Points clés :

1. Gestion de l'état : La variable myPopup est initialement définie à null et vérifiée pour savoir si elle est soit null soit fermée (myPopup.closed). Cela permet de décider s'il faut créer un nouveau popup ou mettre le focus sur celui existant.
2. Duplication du contenu : En s'assurant que le popup est correctement initialisé ou fermé, le problème de duplication du contenu est évité. Chaque ouverture du popup repart de zéro.
3. Gestion du focus : L'utilisation de myPopup.focus() garantit que si le popup est déjà ouvert, il passera au premier plan lorsqu'on clique à nouveau sur « Open Popup ».

Focus et Blur sur une fenêtre

Les événements focus et blur peuvent être utilisés pour détecter quand une fenêtre ou une page gagne ou perd le focus. Cela peut être utile pour mettre en pause des activités lorsque l'utilisateur change d'onglet ou de fenêtre.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Focus and Blur Events Demo</title>
    <style>
        body { transition: background-color 0.5s ease; } /* Smooth transition for background color */
    </style>
    <script>
        // Function to handle focus event
        function handleFocus() {
            document.getElementById('status').innerHTML = 'Window is focused';
            document.body.style.backgroundColor = '#DFF0D8'; // Light green background
        }

        // Function to handle blur event
        function handleBlur() {
            document.getElementById('status').innerHTML = 'Window is not focused';
            document.body.style.backgroundColor = '#F2DEDE'; // Light red background
        }

        window.addEventListener('focus', handleFocus);
        window.addEventListener('blur', handleBlur);
    </script>
</head>
<body>
    <h1>Focus and Blur Events on Window</h1>
    <p>Status: <span id="status">Window is focused</span></p>
    <p><strong>Instructions:</strong> To test this functionality, click inside this window to focus, then click away to another window or tab to trigger the blur effect. Notice the background color change and status update.</p>
</body>
</html>

Points clés :

• Gestionnaires d'événements : handleFocus() et handleBlur() mettent à jour le contenu de la page et la couleur d'arrière-plan en fonction de l'état de focus de la fenêtre.
• Retour visuel : Les changements de couleur d'arrière-plan fournissent un retour visuel immédiat et clair sur l'état du focus, améliorant l'expérience interactive.

Sécurité et bloqueurs de popups

Parce que les popups ont historiquement été détournés, les navigateurs modernes appliquent des règles strictes. Les connaître permet d'éviter des heures de débogage du type « pourquoi ma fenêtre est-elle null ? ».

• Exigence de geste. Un popup ne s'ouvre que lors d'une action utilisateur synchrone (clic, appui sur une touche, toucher). Après un await ou un setTimeout, le geste est « consommé » et l'appel est bloqué.
• window.opener et noopener. Lorsque vous ouvrez une fenêtre, la nouvelle page peut lire et même naviguer dans l'ouvreur via window.opener. Pour les liens vers des sites non fiables, c'est un risque de phishing, donc ajoutez rel="noopener" aux ancres ou passez noopener dans la chaîne features :

// Anchor form — the new tab cannot touch this page
// <a href="https://example.com" target="_blank" rel="noopener noreferrer">Open</a>

// Scripted form — returns null because the link is severed
window.open("https://example.com", "_blank", "noopener");

• Détecter un popup bloqué. Vérifiez toujours la valeur de retour, car un appel bloqué retourne null :

const win = window.open("/report", "report", "width=600,height=800");
if (!win || win.closed || typeof win.closed === "undefined") {
  // Popup was blocked — fall back to navigating in the same tab
  location.href = "/report";
}

Bonnes pratiques pour l'utilisation des popups et des méthodes de fenêtre

1. Consentement et contrôle de l'utilisateur : Assurez-vous toujours que les popups ne perturbent pas l'expérience utilisateur. Offrez un contrôle suffisant aux utilisateurs pour fermer les popups indésirables.
2. Considérations de sécurité : Soyez attentif aux implications de sécurité du contenu externe dans les popups. Utilisez des sources fiables et des connexions sécurisées pour protéger les données des utilisateurs.
3. Optimisation des performances : Utilisez les popups et les méthodes de fenêtre avec parcimonie, car ils peuvent impacter les performances de votre application web. Optimisez leur utilisation pour équilibrer fonctionnalité et efficacité des ressources.

Conclusion

L'utilisation efficace des popups JavaScript et des méthodes de fenêtre peut considérablement améliorer les fonctionnalités et l'expérience utilisateur des applications web. En suivant les exemples et les bonnes pratiques fournis, les développeurs peuvent implémenter ces fonctionnalités de façon efficace et responsable. N'oubliez pas de toujours prioriser l'expérience utilisateur et la sécurité dans toutes les implémentations afin de maintenir l'intégrité et l'efficacité de vos applications web.

Chapitres associés

• JavaScript alert, prompt et confirm — les boîtes de dialogue intégrées plus simples.
• Communication entre fenêtres — postMessage, window.opener et la politique de même origine en détail.
• Tailles de fenêtre et défilement — lire et contrôler la géométrie d'une fenêtre.

Pratique