Blockiertes Popup in Chrome erkennen

Mir sind Javascript-Techniken bekannt, mit denen festgestellt werden kann, ob ein Popup in anderen Browsern blockiert ist (wie in der Antwort auf diese Frage beschrieben ). Hier ist der grundlegende Test:

var newWin = window.open(url);

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

Dies funktioniert jedoch nicht in Chrome. Der Abschnitt "POPUP BLOCKED" wird nie erreicht, wenn das Popup blockiert ist.

Natürlich funktioniert der Test in gewissem Umfang, da Chrome das Popup nicht blockiert, sondern es in einem winzigen minimierten Fenster in der unteren rechten Ecke öffnet, in dem "blockierte" Popups aufgelistet sind.

Ich möchte feststellen können, ob das Popup durch den Popup-Blocker von Chrome blockiert wurde. Ich versuche, das Schnüffeln des Browsers zugunsten der Funktionserkennung zu vermeiden. Gibt es eine Möglichkeit, dies ohne Browser-Schnüffeln zu tun?

Bearbeiten : Ich habe nun versucht , Gebrauch gemacht wird von newWin.outerHeight, newWin.leftund anderen ähnlichen Eigenschaften , dies zu erreichen. Google Chrome gibt alle Positions- und Höhenwerte als 0 zurück, wenn das Popup blockiert ist.

Leider werden auch dann dieselben Werte zurückgegeben, wenn das Popup tatsächlich für eine unbekannte Zeitspanne geöffnet ist. Nach einer magischen Zeit (einige Sekunden in meinen Tests) werden die Standort- und Größeninformationen als die richtigen Werte zurückgegeben. Mit anderen Worten, ich bin immer noch nicht näher dran, dies herauszufinden. Jede Hilfe wäre dankbar.

Nun, die "magische Zeit", von der Sie sprechen, ist wahrscheinlich, wenn das DOM des Popups geladen wurde. Oder es kann sein, dass alles (Bilder, Außenborder-CSS usw.) geladen wurde. Sie können dies einfach testen, indem Sie dem Popup eine sehr große Grafik hinzufügen (löschen Sie zuerst Ihren Cache!). Wenn Sie ein Javascript-Framework wie jQuery (oder ähnliches) verwenden, können Sie mit dem Ereignis ready () (oder ähnlichem) warten, bis das DOM geladen ist, bevor Sie den Fensterversatz überprüfen. Die Gefahr besteht darin, dass die Safari-Erkennung auf widersprüchliche Weise funktioniert: Das DOM des Popups ist in Safari niemals bereit (), da es Ihnen ein gültiges Handle für das Fenster gibt, das Sie öffnen möchten - unabhängig davon, ob es tatsächlich geöffnet wird oder nicht nicht. (Tatsächlich glaube ich, dass Ihr Popup-Testcode oben für Safari nicht funktioniert.)

Ich denke, das Beste, was Sie tun können, ist, Ihren Test in ein setTimeout () zu packen und dem Popup 3-5 Sekunden Zeit zu geben, um das Laden abzuschließen, bevor Sie den Test ausführen. Es ist nicht perfekt, aber es sollte mindestens 95% der Zeit funktionieren.

Hier ist der Code, den ich für die browserübergreifende Erkennung ohne den Chrome-Teil verwende.

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

Ich führe diesen Test vom übergeordneten Element aus aus und verpacke ihn in ein setTimeout (), sodass das untergeordnete Fenster 3-5 Sekunden zum Laden benötigt. Im untergeordneten Fenster müssen Sie eine Testfunktion hinzufügen:

Funktionstest() {}

Der Popup-Blocker-Detektor prüft, ob die Funktion "Test" als Mitglied des untergeordneten Fensters vorhanden ist.

HINZUGEFÜGT 15. JUNI 2015:

Ich denke, die moderne Art, damit umzugehen, wäre die Verwendung von window.postMessage (), damit das Kind das Elternteil benachrichtigt, dass das Fenster geladen wurde. Der Ansatz ist ähnlich (Kind teilt Eltern mit, dass es geladen ist), aber die Kommunikationsmittel haben sich verbessert. Ich konnte diese domänenübergreifende Funktion vom Kind aus ausführen:

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

Der Elternteil hört auf diese Nachricht mit:

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

Hoffe das hilft.

Nur eine Verbesserung des InvisibleBacon-Snipets (getestet in IE9, Safari 5, Chrome 9 und 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);
    };
}

Das Folgende ist a jQuery- Lösung zur Überprüfung von Popup-Blockern. Es wurde in FF (v11), Safari (v6), Chrome (v23.0.127.95) und IE (v7 & v9) getestet. Aktualisieren Sie die Funktion _displayError, um die Fehlermeldung nach Belieben zu behandeln.

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

Verwendung:

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

Hoffe das hilft! :) :)

Richs Antwort wird für Chrome nicht mehr funktionieren. Es sieht so aus, als würde Chrome jetzt tatsächlich Javascript im Popup-Fenster ausführen. Am Ende habe ich nach einem screenX-Wert von 0 gesucht, um nach blockierten Popups zu suchen. Ich denke auch, dass ich einen Weg gefunden habe, um sicherzustellen, dass diese Eigenschaft endgültig ist, bevor ich sie überprüfe. Dies funktioniert nur für Popups in Ihrer Domain. Sie können jedoch einen Onload-Handler wie den folgenden hinzufügen:

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

Wie viele berichtet haben, meldet die Eigenschaft "screenX" manchmal Nicht-Null für fehlgeschlagene Popups, selbst nach dem Laden. Ich habe dieses Verhalten ebenfalls erlebt, aber wenn Sie die Prüfung nach einem Timeout von null ms hinzufügen, scheint die Eigenschaft screenX immer einen konsistenten Wert auszugeben.

Lassen Sie mich wissen, ob es Möglichkeiten gibt, dieses Skript robuster zu machen. Scheint aber für meine Zwecke zu arbeiten.

Das hat bei mir funktioniert:

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

OuterHeight und OuterWidth sind für Chrom, da der Trick 'about: blank' von oben in Chrom nicht mehr funktioniert.

Ich werde einfach die hier bereitgestellte Antwort kopieren / einfügen: https://stackoverflow.com/a/27725432/892099 von DanielB. funktioniert auf Chrom 40 und es ist sehr sauber. Keine schmutzigen Hacks oder Wartezeiten.

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

Wie wäre es mit einem PromiseAnsatz?

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

Und Sie können es wie den Klassiker verwenden window.open

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

Sie könnten den Code so ändern, dass er das Versprechen nicht einhält, anstatt zurückzukehren undefined. Ich dachte nur, dass dies ifein einfacherer Kontrollfluss ist als try / catchin diesem Fall.

Überprüfen Sie die Position des Fensters relativ zum übergeordneten Fenster. Chrome lässt das Fenster fast außerhalb des Bildschirms erscheinen.

Ich hatte ein ähnliches Problem mit Popups, die nicht in Chrome geöffnet wurden. Ich war frustriert, weil ich nicht versuchte, etwas hinterhältiges zu tun, wie ein Onload-Popup, sondern nur ein Fenster öffnete, wenn der Benutzer darauf klickte. Ich war doppelt frustriert, weil das Ausführen meiner Funktion, die window.open () über die Firebug-Befehlszeile enthielt, funktionierte, während das Klicken auf meinen Link nicht funktionierte! Hier war meine Lösung:

Falscher Weg: Ausführen von window.open () über einen Ereignis-Listener (in meinem Fall dojo.connect mit der Onclick-Ereignismethode eines DOM-Knotens).

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

Richtiger Weg: Zuweisen einer Funktion zur onclick-Eigenschaft des Knotens, der window.open () aufgerufen hat.

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

Und natürlich kann ich bei Bedarf immer noch Ereignis-Listener für dasselbe Onclick-Ereignis erstellen. Mit dieser Änderung konnte ich meine Fenster öffnen, obwohl Chrome auf "Keine Website darf Popups anzeigen" eingestellt war. Freude.

Wenn jemand, der mit Chrome vertraut ist, dem Rest von uns sagen kann, warum es einen Unterschied macht, würde ich es gerne hören, obwohl ich vermute, dass es nur ein Versuch ist, böswilligen programmatischen Popups die Tür zu schließen.

Hier ist eine Version, die derzeit in Chrome funktioniert. Nur eine kleine Änderung von Richs Lösung entfernt, obwohl ich einen Wrapper hinzugefügt habe, der auch das Timing regelt.

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

Um es zu benutzen, gehen Sie einfach so vor:

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

Wenn das Popup blockiert wird, wird die Warnmeldung nach Ablauf der Nachfrist von 5 Sekunden angezeigt (Sie können dies anpassen, aber 5 Sekunden sollten ziemlich sicher sein).

Dieses Fragment enthält alle oben genannten Elemente. Aus irgendeinem Grund schließt StackOverflow die erste und die letzte Codezeile im folgenden Codeblock aus. Deshalb habe ich einen Blog darüber geschrieben. Eine vollständige Erklärung und den Rest des (herunterladbaren) Codes finden Sie in meinem Blog unter 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, hier gibt es sicher viele Lösungen. Dies ist meine, es verwendet Lösungen aus der aktuell akzeptierten Antwort (die in der neuesten Version von Chrome nicht funktioniert und das Einschließen einer Zeitüberschreitung erfordert) sowie eine verwandte Lösung für diesen Thread (die eigentlich Vanilla JS ist, nicht jQuery). .

Meins verwendet eine Rückrufarchitektur, die gesendet wird, truewenn das Popup blockiert wird und falseansonsten.

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

Jasons Antwort ist die einzige Methode, an die ich auch denken kann, aber sich auf eine solche Position zu verlassen, ist ein bisschen zwielichtig!

Heutzutage müssen Sie die Frage "Wurde mein unerwünschtes Popup blockiert?" Nicht wirklich stellen, da die Antwort immer "Ja" lautet. In allen gängigen Browsern ist der Popupblocker standardmäßig aktiviert. Der beste Ansatz ist immer nur window.open () als Reaktion auf einen direkten Klick, der fast immer zulässig ist.

HALLO

Ich habe die oben beschriebenen Lösungen leicht modifiziert und denke, dass sie zumindest für Chrome funktionieren. Meine Lösung besteht darin, zu erkennen, ob das Popup beim Öffnen der Hauptseite blockiert ist, nicht beim Öffnen des Popups, aber ich bin sicher, dass es einige Leute gibt, die es ändern können. :-) Der Nachteil hier ist, dass das Popup-Fenster angezeigt wird für ein paar Sekunden (möglicherweise etwas verkürzbar), wenn kein Popup-Blocker vorhanden ist.

Ich habe dies in den Bereich meines Hauptfensters eingefügt

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

Der Popuptest sieht so aus:

<!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>

Da ich nach 3500 ms die Testfunktion auf der Popup-Seite aufrufe, wurde die Innenhöhe von Chrome korrekt eingestellt.

Ich benutze die Variable popUpsBlocked, um zu wissen, ob die Popups in anderen Javascripts angezeigt werden oder nicht. dh

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

Soweit ich das beurteilen kann (nach dem, was ich getestet habe), gibt Chrome ein Fensterobjekt mit der Position "about: blank" zurück. Folgendes sollte also für alle Browser funktionieren:

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