Comment puis-je détecter si un navigateur bloque une popup ?

Question

Il m'est arrivé de tomber sur une page Web qui tente d'ouvrir une nouvelle fenêtre (pour permettre à l'utilisateur de saisir des données ou pour quelque chose d'important), mais le bloqueur de fenêtres pop-up l'en empêche.

Quelles méthodes la fenêtre appelante peut-elle utiliser pour s'assurer que la nouvelle fenêtre se lance correctement ?

Answer 1

J'ai essayé de nombreuses solutions, mais la seule que j'ai trouvée et qui fonctionnait également avec uBlock Origin, était d'utiliser un délai d'attente pour vérifier l'état de fermeture de la fenêtre pop-up.

function popup (url, width, height) {
    const left = (window.screen.width / 2) - (width / 2)
    const top = (window.screen.height / 2) - (height / 2)
    let opener = window.open(url, '', `menubar=no, toolbar=no, status=no, resizable=yes, scrollbars=yes, width=${width},height=${height},top=${top},left=${left}`)

    window.setTimeout(() => {
        if (!opener || opener.closed || typeof opener.closed === 'undefined') {
            console.log('Not allowed...') // Do something here.
        }
    }, 1000)
}

Il s'agit évidemment d'un hack, comme toutes les solutions à ce problème.

Vous devez prévoir suffisamment de temps dans votre setTimeout pour tenir compte de l'ouverture et de la fermeture initiales, de sorte qu'il n'y aura jamais de précision absolue. Il s'agira d'une position d'essai et d'erreur.

Ajoutez ceci à votre liste de tentatives.

Answer 2

Une approche simple si vous possédez le code enfant également, serait de créer une simple variable dans son html comme ci-dessous :

    <script>
        var magicNumber = 49;
    </script>

Et ensuite, vérifiez son existence à partir du parent, quelque chose de similaire à ce qui suit :

    // Create the window with login URL.
    let openedWindow = window.open(URL_HERE);

    // Check this magic number after some time, if it exists then your window exists
    setTimeout(() => {
        if (openedWindow["magicNumber"] !== 32) {
            console.error("Window open was blocked");
        }
    }, 1500);

Nous attendons un certain temps pour nous assurer que la page web a été chargée, et vérifions son existence. Évidemment, si la fenêtre ne s'est pas chargée après 1500ms, la variable serait toujours undefined .

Answer 3

En utilisant l'évènement onbeforeunload, nous pouvons vérifier comme suit

    function popup()
    {
        var chk=false;
        var win1=window.open();
        win1.onbeforeunload=()=>{
            var win2=window.open();
            win2.onbeforeunload=()=>{
                chk=true;
            };
        win2.close();
        };
        win1.close();
        return chk;
    }

il ouvrira 2 fenêtres noires en arrière-plan

la fonction renvoie une valeur booléenne.