Détecter le popup bloqué dans Chrome

Je connais les techniques javascript pour détecter si un popup est bloqué dans d'autres navigateurs (comme décrit dans la réponse à cette question ). Voici le test de base:

var newWin = window.open(url);

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

Mais cela ne fonctionne pas dans Chrome. La section "POPUP BLOCKED" n'est jamais atteinte lorsque le popup est bloqué.

Bien sûr, le test fonctionne dans une certaine mesure puisque Chrome ne bloque pas réellement le popup, mais l'ouvre dans une petite fenêtre minimisée dans le coin inférieur droit qui répertorie les popups "bloqués".

Ce que je voudrais faire, c'est pouvoir dire si le popup a été bloqué par le bloqueur de popup de Chrome. J'essaie d'éviter le reniflement du navigateur en faveur de la détection des fonctionnalités. Existe-t-il un moyen de le faire sans renifler le navigateur?

Modifier : J'ai maintenant essayé de faire usage de newWin.outerHeight, newWin.leftet d' autres propriétés similaires à y parvenir. Google Chrome renvoie toutes les valeurs de position et de hauteur à 0 lorsque la fenêtre contextuelle est bloquée.

Malheureusement, il renvoie également les mêmes valeurs même si la fenêtre contextuelle est effectivement ouverte pendant une durée inconnue. Après une période magique (quelques secondes dans mes tests), les informations d'emplacement et de taille sont renvoyées sous forme de valeurs correctes. En d'autres termes, je ne suis toujours pas plus près de comprendre cela. Toute aide serait appréciée.

Eh bien, le "moment magique" dont vous parlez est probablement celui où le DOM du popup a été chargé. Ou bien cela pourrait être lorsque tout (images, CSS externes, etc.) a été chargé. Vous pouvez tester cela facilement en ajoutant un très grand graphique à la fenêtre contextuelle (effacez d'abord votre cache!). Si vous utilisiez un Framework Javascript comme jQuery (ou quelque chose de similaire), vous pouvez utiliser l'événement ready () (ou quelque chose de similaire) pour attendre que le DOM se charge avant de vérifier le décalage de la fenêtre. Le danger est que la détection de Safari fonctionne de manière conflictuelle: le DOM du popup ne sera jamais prêt () dans Safari car il vous donnera une poignée valide pour la fenêtre que vous essayez d'ouvrir - si elle s'ouvre réellement ou ne pas. (en fait, je pense que votre code de test contextuel ci-dessus ne fonctionnera pas pour Safari.)

Je pense que la meilleure chose que vous puissiez faire est d'envelopper votre test dans un setTimeout () et de donner au popup 3-5 secondes pour terminer le chargement avant d'exécuter le test. Ce n'est pas parfait, mais cela devrait fonctionner au moins 95% du temps.

Voici le code que j'utilise pour la détection multi-navigateurs, sans la partie Chrome.

function _hasPopupBlocker(poppedWindow) {
    var result = false;

    try {
        if (typeof poppedWindow == 'undefined') {
            // Safari with popup blocker... leaves the popup window handle undefined
            result = true;
        }
        else if (poppedWindow && poppedWindow.closed) {
            // This happens if the user opens and closes the client window...
            // Confusing because the handle is still available, but it's in a "closed" state.
            // We're not saying that the window is not being blocked, we're just saying
            // that the window has been closed before the test could be run.
            result = false;
        }
        else if (poppedWindow && poppedWindow.test) {
            // This is the actual test. The client window should be fine.
            result = false;
        }
        else {
            // Else we'll assume the window is not OK
            result = true;
        }

    } catch (err) {
        //if (console) {
        //    console.warn("Could not access popup window", err);
        //}
    }

    return result;
}

Ce que je fais, c'est exécuter ce test à partir du parent et l'envelopper dans un setTimeout (), donnant à la fenêtre enfant 3-5 secondes pour charger. Dans la fenêtre enfant, vous devez ajouter une fonction de test:

test de fonctionnalité() {}

Le détecteur de bloqueur de popup teste pour voir si la fonction "test" existe en tant que membre de la fenêtre enfant.

AJOUTÉ LE 15 JUIN 2015:

Je pense que la façon moderne de gérer cela serait d'utiliser window.postMessage () pour que l'enfant informe le parent que la fenêtre a été chargée. L'approche est similaire (l'enfant dit au parent qu'il est chargé), mais les moyens de communication se sont améliorés. J'ai pu faire ce cross-domain de l'enfant:

$(window).load(function() {
  this.opener.postMessage({'loaded': true}, "*");
  this.close();
});

Le parent écoute ce message en utilisant:

$(window).on('message', function(event) {     
  alert(event.originalEvent.data.loaded)
}); 

J'espère que cela t'aides.

Juste une amélioration du snipet d'InvisibleBacon (testé dans IE9, Safari 5, Chrome 9 et FF 3.6):

var myPopup = window.open("popupcheck.htm", "", "directories=no,height=150,width=150,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,top=0,location=no");
if (!myPopup)
    alert("failed for most browsers");
else {
    myPopup.onload = function() {
        setTimeout(function() {
            if (myPopup.screenX === 0) {
                alert("failed for chrome");
            } else {
                // close the test window if popups are allowed.
                myPopup.close();  
            }
        }, 0);
    };
}

Ce qui suit est une solution jQuery pour la vérification du bloqueur de popup. Il a été testé dans FF (v11), Safari (v6), Chrome (v23.0.127.95) et IE (v7 et v9). Mettez à jour la 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! :)

La réponse de Rich ne fonctionnera plus pour Chrome. On dirait que Chrome exécute actuellement n'importe quel Javascript dans la fenêtre contextuelle. J'ai fini par vérifier une valeur screenX de 0 pour vérifier les popups bloqués. Je pense aussi avoir trouvé un moyen de garantir que cette propriété est définitive avant de vérifier. Cela ne fonctionne que pour les fenêtres contextuelles de votre domaine, mais vous pouvez ajouter un gestionnaire de chargement comme celui-ci:

var myPopup = window.open("site-on-my-domain", "screenX=100");
if (!myPopup)
    alert("failed for most browsers");
else {
    myPopup.onload = function() {
        setTimeout(function() {
            if (myPopup.screenX === 0)
                alert("failed for chrome");
        }, 0);
    };
}

Comme beaucoup l'ont signalé, la propriété "screenX" rapporte parfois une valeur non nulle pour les popups échoués, même après le chargement. J'ai également rencontré ce comportement, mais si vous ajoutez la vérification après un délai de zéro ms, la propriété screenX semble toujours générer une valeur cohérente.

Faites-moi savoir s'il existe des moyens de rendre ce script plus robuste. Cela semble fonctionner pour mes besoins.

Cela a fonctionné pour moi:

    cope.PopupTest.params = 'height=1,width=1,left=-100,top=-100,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=no,directories=no,status=no';
    cope.PopupTest.testWindow = window.open("popupTest.htm", "popupTest", cope.PopupTest.params);

    if( !cope.PopupTest.testWindow
        || cope.PopupTest.testWindow.closed
        || (typeof cope.PopupTest.testWindow.closed=='undefined')
        || cope.PopupTest.testWindow.outerHeight == 0
        || cope.PopupTest.testWindow.outerWidth == 0
        ) {
        // pop-ups ARE blocked
        document.location.href = 'popupsBlocked.htm';
    }
    else {
        // pop-ups are NOT blocked
        cope.PopupTest.testWindow.close();
    }

Les paramètres OutsideHeight et OutsideWidth sont pour chrome car l'astuce "about: blank" ci-dessus ne fonctionne plus dans Chrome.

Je vais simplement copier / coller la réponse fournie ici: https://stackoverflow.com/a/27725432/892099 par DanielB. fonctionne sur chrome 40 et c'est très propre. aucun hacks sales ou attente implique.

function popup(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.");
  }
}

Et une Promiseapproche?

const openPopUp = (...args) => new Promise(s => {
  const win = window.open(...args)
  if (!win || win.closed) return s()
  setTimeout(() => (win.innerHeight > 0 && !win.closed) ? s(win) : s(), 200)
})

Et vous pouvez l'utiliser comme le classique window.open

const win = await openPopUp('popuptest.htm', 'popuptest')
if (!win) {
  // popup closed or blocked, handle alternative case
}

Vous pouvez modifier le code pour qu'il échoue à la promesse au lieu de revenir undefined, je pensais juste que ifc'était un flux de contrôle plus facile que try / catchpour ce cas.

Vérifiez la position de la fenêtre par rapport au parent. Chrome fait apparaître la fenêtre presque hors écran.

J'ai eu un problème similaire avec les fenêtres contextuelles ne s'ouvrant pas dans Chrome. J'étais frustré parce que je n'essayais pas de faire quelque chose de sournois, comme une fenêtre contextuelle de chargement, ouvrant simplement une fenêtre lorsque l'utilisateur cliquait. J'étais DOUBLEMENT frustré parce que l'exécution de ma fonction qui incluait window.open () à partir de la ligne de commande Firebug fonctionnait, alors que cliquer sur mon lien ne fonctionnait pas! Voici ma solution:

Mauvaise manière: exécuter window.open () à partir d'un écouteur d'événements (dans mon cas, dojo.connect à la méthode d'événement onclick d'un nœud DOM).

dojo.connect(myNode, "onclick", function() {
    window.open();
}

Bonne façon: attribuer une fonction à la propriété onclick du nœud qui a appelé window.open ().

myNode.onclick = function() {
    window.open();
}

Et, bien sûr, je peux toujours faire des écouteurs d'événements pour ce même événement onclick si j'en ai besoin. Avec ce changement, je pouvais ouvrir mes fenêtres même si Chrome était réglé sur "Ne pas autoriser les sites à afficher des fenêtres contextuelles". Joie.

Si quelqu'un de sage dans la manière de Chrome peut dire au reste d'entre nous pourquoi cela fait une différence, j'aimerais l'entendre, même si je soupçonne que c'est juste une tentative de fermer la porte aux popups programmatiques malveillants.

Voici une version qui fonctionne actuellement dans Chrome. Juste une petite modification de la solution de Rich, bien que j'aie ajouté un wrapper qui gère également le timing.

function checkPopupBlocked(poppedWindow) {
 setTimeout(function(){doCheckPopupBlocked(poppedWindow);}, 5000);
}

function doCheckPopupBlocked(poppedWindow) {

    var result = false;

    try {
        if (typeof poppedWindow == 'undefined') {
            // Safari with popup blocker... leaves the popup window handle undefined
            result = true;
        }
        else if (poppedWindow && poppedWindow.closed) {
            // This happens if the user opens and closes the client window...
            // Confusing because the handle is still available, but it's in a "closed" state.
            // We're not saying that the window is not being blocked, we're just saying
            // that the window has been closed before the test could be run.
            result = false;
        }
        else if (poppedWindow && poppedWindow.outerWidth == 0) {
            // This is usually Chrome's doing. The outerWidth (and most other size/location info)
         // will be left at 0, EVEN THOUGH the contents of the popup will exist (including the
         // test function we check for next). The outerWidth starts as 0, so a sufficient delay
         // after attempting to pop is needed.
            result = true;
        }
        else if (poppedWindow && poppedWindow.test) {
            // This is the actual test. The client window should be fine.
            result = false;
        }
        else {
            // Else we'll assume the window is not OK
            result = true;
        }

    } catch (err) {
        //if (console) {
        //    console.warn("Could not access popup window", err);
        //}
    }

    if(result)
     alert("The popup was blocked. You must allow popups to use this site.");
}

Pour l'utiliser, procédez comme suit:

var popup=window.open('location',etc...);
checkPopupBlocked(popup);

Si la fenêtre contextuelle est bloquée, le message d'alerte s'affichera après la période de grâce de 5 secondes (vous pouvez l'ajuster, mais 5 secondes devraient être assez sûres).

Ce fragment intègre tout ce qui précède - Pour une raison quelconque - StackOverflow exclut les première et dernière lignes de code dans le bloc de code ci-dessous, j'ai donc écrit un blog à ce sujet. Pour une explication complète et le reste du code (téléchargeable), consultez mon blog à thecodeabode.blogspot.com

var PopupWarning = {

    init : function()
    {

        if(this.popups_are_disabled() == true)
        {
            this.redirect_to_instruction_page();
        }
    },

    redirect_to_instruction_page : function()
    {
        document.location.href = "http://thecodeabode.blogspot.com";
    },

    popups_are_disabled : function()
    {
        var popup = window.open("http://localhost/popup_with_chrome_js.html", "popup_tester", "width=1,height=1,left=0,top=0");

        if(!popup || popup.closed || typeof popup == 'undefined' || typeof popup.closed=='undefined')
        {
            return true;
        }

        window.focus();
        popup.blur();

        //
        // Chrome popup detection requires that the popup validates itself - so we need to give
        // the popup time to load, then call js on the popup itself
        //
        if(navigator && (navigator.userAgent.toLowerCase()).indexOf("chrome") > -1)
        {
            var on_load_test = function(){PopupWarning.test_chrome_popups(popup);};     
            var timer = setTimeout(on_load_test, 60);
            return;
        }


        popup.close();
        return false;
    },

    test_chrome_popups : function(popup)
    {
        if(popup && popup.chrome_popups_permitted && popup.chrome_popups_permitted() == true)
        {
            popup.close();
            return true;
        }

        //
        // If the popup js fails - popups are blocked
        //
        this.redirect_to_instruction_page();
    }
};

PopupWarning.init();

Wow, il y a certainement beaucoup de solutions ici. Ceci est le mien, il utilise des solutions tirées de la réponse acceptée actuelle (qui ne fonctionne pas dans le dernier Chrome et nécessite de l'encapsuler dans un délai d'attente), ainsi qu'une solution associée sur ce thread (qui est en fait vanilla JS, pas jQuery) .

Le mien utilise une architecture de rappel qui sera envoyée truelorsque le popup est bloqué et falseautrement.

window.isPopupBlocked = function(popup_window, cb)
{
    var CHROME_CHECK_TIME = 2000;       // the only way to detect this in Chrome is to wait a bit and see if the window is present

    function _is_popup_blocked(popup)
    {
        return !popup.innerHeight;
    }

    if (popup_window) {
        if (popup_window.closed) {
            // opened OK but was closed before we checked
            cb(false);
            return;
        }
        if (/chrome/.test(navigator.userAgent.toLowerCase())) {
            // wait a bit before testing the popup in chrome
            setTimeout(function() {
                cb(_is_popup_blocked(popup_window));
            }, CHROME_CHECK_TIME);
        } else {
            // for other browsers, add an onload event and check after that
            popup_window.onload = function() {
                cb(_is_popup_blocked(popup_window));
            };
        }
    } else {
        cb(true);
    }
};

La réponse de Jason est la seule méthode à laquelle je puisse penser aussi, mais se fier à une position comme celle-là est un peu douteux!

De nos jours, vous n'avez pas vraiment besoin de poser la question «mon popup non sollicité a-t-il été bloqué?», Parce que la réponse est invariablement «oui» - tous les principaux navigateurs ont le bloqueur de popup activé par défaut. La meilleure approche est de ne jamais utiliser window.open () en réponse à un clic direct, ce qui est presque toujours autorisé.

SALUT

J'ai légèrement modifié les solutions décrites ci-dessus et je pense que cela fonctionne au moins pour Chrome. Ma solution est faite pour détecter si le popup est bloqué lorsque la page principale est ouverte, pas quand le popup est ouvert, mais je suis sûr qu'il y a des personnes qui peuvent le modifier. :-) L'inconvénient ici est que la fenêtre popup est affichée pendant quelques secondes (peut être possible de raccourcir un peu) quand il n'y a pas de bloqueur de popup.

Je mets ceci dans la section de ma fenêtre 'principale'

<script type="text/JavaScript" language="JavaScript">

 var mine = window.open('popuptest.htm','popuptest','width=1px,height=1px,left=0,top=0,scrollbars=no');
 if(!mine|| mine.closed || typeof mine.closed=='undefined')
  {
    popUpsBlocked = true       
    alert('Popup blocker detected ');
    if(mine)
      mine.close();
 }
 else
 {
    popUpsBlocked = false    
    var cookieCheckTimer = null;
    cookieCheckTimer =  setTimeout('testPopup();', 3500);
 }


function testPopup()
{
  if(mine)
  {
    if(mine.test())
    {
       popUpsBlocked = false;
    }
    else
    {
        alert('Popup blocker detected ');
         popUpsBlocked = true;
     }
    mine.close();
}

} 
</script>

Le popuptest ressemble à ceci:

<!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>
    <title>Popup test</title>
<script type="text/javascript" language="Javascript">
   function test() {if(window.innerHeight!=0){return true;} else return false;}
</script>
</head>

<body>
</body>
</html>

Comme j'appelle la fonction de test sur la page contextuelle après 3500 ms, la hauteur intérieure a été réglée correctement par Chrome.

J'utilise la variable popUpsBlocked pour savoir si les popups sont affichés ou non dans d'autres javascripts. c'est à dire

function ShowConfirmationMessage()
{
if(popUpsBlocked)
 { 
  alert('Popups are blocked, can not display confirmation popup. A mail will be sent with the confirmation.');
 } 
 else
 { 
  displayConfirmationPopup();
 }
 mailConfirmation();
}

function openPopUpWindow(format)
{   
    var win = window.open('popupShow.html',
                          'ReportViewer',
                          'width=920px,height=720px,left=50px,top=20px,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=1,maximize:yes,scrollbars=0');

    if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined") 
    {
        alert("The popup was blocked. You must allow popups to use this site.");  
    }
    else if (win)
    {
        win.onload = function()
        {          
            if (win.screenX === 0) {
                alert("The popup was blocked. You must allow popups to use this site.");
                win.close();
            } 
        };
    }
}

Pour autant que je sache (d'après ce que j'ai testé), Chrome renvoie un objet window avec l'emplacement "about: blank". Ainsi, ce qui suit devrait fonctionner pour tous les navigateurs:

var newWin = window.open(url);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined' || newWin.location=='about:blank')
{
    //POPUP BLOCKED
}