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

Question

Parfois, je suis tombé sur une page Web qui tente d'ouvrir une nouvelle fenêtre (pour la saisie de l'utilisateur ou quelque chose d'important), mais le bloqueur de fenêtres contextuelles empêche que cela se produise.

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

Answer 1

Si vous utilisez JavaScript pour ouvrir la fenêtre contextuelle, vous pouvez utiliser quelque chose comme ceci :

var newWin = window.open(url);             

if(!newWin || newWin.closed || typeof newWin.closed=='undefined') 
{ 
    //POPUP BLOCKED
}

Answer 2

J'ai essayé un certain nombre des exemples ci-dessus, mais je n'ai pas réussi à les faire fonctionner avec Chrome.Cette approche simple semble fonctionner avec Chrome 39, Firefox 34, Safari 5.1.7 et IE 11.Voici l'extrait de code de notre bibliothèque JS.

openPopUp: function(urlToOpen) {
    var popup_window=window.open(urlToOpen,"myWindow","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=400, height=400");            
    try {
        popup_window.focus();   
    } catch (e) {
        alert("Pop-up Blocker is enabled! Please add this site to your exception list.");
    }
}

Answer 3

Mise à jour:Les popups existent depuis des temps très anciens.L'idée initiale était d'afficher un autre contenu sans fermer la fenêtre principale.Pour l'instant, il existe d'autres moyens de procéder :JavaScript est capable d'envoyer des requêtes au serveur, les popups sont donc rarement utilisés.Mais parfois, ils restent utiles.

Dans le passé, les sites malveillants abusaient beaucoup des popups.Une mauvaise page pourrait ouvrir des tonnes de fenêtres contextuelles contenant des publicités.Alors maintenant, la plupart des navigateurs essaient de bloquer les popups et de protéger l’utilisateur.

La plupart des navigateurs bloquent les fenêtres contextuelles si elles sont appelées en dehors des gestionnaires d'événements déclenchés par l'utilisateur comme onclick.

Si vous y réfléchissez, c’est un peu délicat.Si le code se trouve directement dans un gestionnaire onclick, alors c'est simple.Mais quelle est la fenêtre contextuelle qui s'ouvre dans setTimeout ?

Essayez ce code :

 // open after 3 seconds
setTimeout(() => window.open('http://google.com'), 3000);

La fenêtre contextuelle s'ouvre dans Chrome, mais est bloquée dans Firefox.

…Et cela fonctionne aussi dans Firefox :

 // open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

La différence est que Firefox traite un délai d'attente de 2 000 ms ou moins, mais après cela, il supprime la « confiance », en supposant qu'elle est désormais « en dehors de l'action de l'utilisateur ».Le premier est donc bloqué et le second ne l’est pas.

---

Réponse originale qui était actuelle en 2012 :

Cette solution pour la vérification du bloqueur de popup a été testée en FF (v11), Safari (v6), Chrome (v23.0.127.95) & IE (v7 & v9).Mettre à jour le fonction displayError pour gérer le message d'erreur comme bon vous semble.

var popupBlockerChecker = {
    check: function(popup_window){
        var scope = this;
        if (popup_window) {
            if(/chrome/.test(navigator.userAgent.toLowerCase())){
                setTimeout(function () {
                    scope.is_popup_blocked(scope, popup_window);
                },200);
            }else{
                popup_window.onload = function () {
                    scope.is_popup_blocked(scope, popup_window);
                };
            }
        } else {
            scope.displayError();
        }
    },
    is_popup_blocked: function(scope, popup_window){
        if ((popup_window.innerHeight > 0)==false){ 
            scope.displayError();
        }
    },
    displayError: function(){
       alert("Popup Blocker is enabled! Please add this site to your exception list.");
    }
};

Usage:

var popup = window.open("http://www.google.ca", '_blank');
popupBlockerChecker.check(popup);

J'espère que cela t'aides!:)

Answer 4

Une « solution » qui permettra toujours fonctionner quelle que soit la société ou la version du navigateur consiste simplement à placer un message d'avertissement à l'écran, quelque part à proximité du contrôle qui créera une fenêtre contextuelle, qui avertit poliment l'utilisateur que l'action nécessite une fenêtre contextuelle et qu'il l'active pour le site.

Je sais que ce n'est pas compliqué ou quoi que ce soit, mais cela ne peut pas être plus simple et ne nécessite que 5 minutes de test environ, puis vous pouvez passer à d'autres cauchemars.

Une fois que l'utilisateur a autorisé les pop-ups sur votre site, il serait également judicieux de ne pas en abuser.La dernière chose que vous voulez faire est d’ennuyer vos visiteurs.

Answer 5

J'ai essayé de nombreuses solutions, mais la seule que j'ai pu trouver et qui fonctionnait également avec uBlock Origin était d'utiliser un délai d'attente pour vérifier l'état fermé de la fenêtre contextuelle.

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)
}

Évidemment, c'est 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 que cela ne sera jamais complètement précis.Ce sera une position d’essais et d’erreurs.

Ajoutez ceci à votre liste de tentatives.

Answer 6

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;
    }

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

la fonction renvoie une valeur booléenne.

Answer 7

J'ai combiné les solutions de @Kevin B et @DanielB.
C'est beaucoup plus simple.

var isPopupBlockerActivated = function(popupWindow) {
    if (popupWindow) {
        if (/chrome/.test(navigator.userAgent.toLowerCase())) {
            try {
                popupWindow.focus();
            } catch (e) {
                return true;
            }
        } else {
            popupWindow.onload = function() {
                return (popupWindow.innerHeight > 0) === false;
            };
        }
    } else {
        return true;
    }
    return false;
};

Usage:

var popup = window.open('https://www.google.com', '_blank');
if (isPopupBlockerActivated(popup)) {
    // Do what you want.
}