Wykryj zablokowane wyskakujące okienko w Chrome

Znam techniki javascript służące do wykrywania, czy wyskakujące okienko jest blokowane w innych przeglądarkach (jak opisano w odpowiedzi na to pytanie ). Oto podstawowy test:

var newWin = window.open(url);

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

Ale to nie działa w Chrome. Sekcja „POPUP BLOCKED” nie jest nigdy otwierana, gdy wyskakujące okienko jest zablokowane.

Oczywiście test działa do pewnego stopnia, ponieważ Chrome w rzeczywistości nie blokuje wyskakującego okienka, ale otwiera je w małym zminimalizowanym oknie w prawym dolnym rogu, które zawiera listę „zablokowanych” wyskakujących okienek.

Chciałbym móc stwierdzić, czy wyskakujące okienko zostało zablokowane przez moduł blokujący wyskakujące okienka Chrome. Staram się unikać podsłuchiwania przeglądarki na rzecz wykrywania funkcji. Czy można to zrobić bez węszenia przeglądarki?

Edit : Mam teraz próbował Wykorzystując newWin.outerHeight, newWin.lefti inne podobne właściwości do osiągnięcia tego celu. Google Chrome zwraca wszystkie wartości pozycji i wysokości jako 0, gdy wyskakujące okienko jest zablokowane.

Niestety zwraca również te same wartości, nawet jeśli wyskakujące okienko jest faktycznie otwarte przez nieznany czas. Po pewnym magicznym okresie (kilka sekund w moich testach) informacje o lokalizacji i rozmiarze są zwracane jako prawidłowe wartości. Innymi słowy, nadal nie jestem bliżej rozwiązania tego problemu. Każda pomoc będzie mile widziana.

Cóż, "magiczny czas", o którym mówisz, jest prawdopodobnie wtedy, gdy zostanie załadowany DOM wyskakującego okienka. Albo może się tak zdarzyć, gdy wszystko (obrazy, zewnętrzny CSS itp.) Zostało załadowane. Możesz to łatwo przetestować, dodając bardzo dużą grafikę do wyskakującego okienka (najpierw wyczyść pamięć podręczną!). Jeśli używasz JavaScript Framework, takiego jak jQuery (lub coś podobnego), możesz użyć zdarzenia ready () (lub czegoś podobnego), aby poczekać na załadowanie DOM przed sprawdzeniem przesunięcia okna. Niebezpieczeństwo polega na tym, że wykrywanie Safari działa w sposób sprzeczny: DOM wyskakującego okienka nigdy nie będzie gotowy () w Safari, ponieważ da ci prawidłowy uchwyt dla okna, które próbujesz otworzyć - niezależnie od tego, czy faktycznie się otworzy, czy nie. (w rzeczywistości uważam, że powyższy kod testu wyskakującego okienka nie zadziała w przypadku safari).

Myślę, że najlepszą rzeczą, jaką możesz zrobić, jest zawinięcie testu w setTimeout () i pozostawienie wyskakującemu okienku 3-5 sekund na zakończenie ładowania przed uruchomieniem testu. Nie jest doskonały, ale powinien działać co najmniej w 95% przypadków.

Oto kod, którego używam do wykrywania w różnych przeglądarkach, bez części 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;
}

To, co robię, to uruchamianie tego testu od rodzica i zawijanie go w setTimeout (), dając okno podrzędne 3-5 sekund na załadowanie. W oknie podrzędnym musisz dodać funkcję testową:

test funkcji () {}

Detektor blokowania wyskakujących okienek sprawdza, czy funkcja „test” istnieje jako element składowy okna podrzędnego.

DODANO 15 CZERWCA 2015:

Myślę, że nowoczesnym sposobem radzenia sobie z tym byłoby użycie window.postMessage (), aby dziecko powiadomiło rodzica, że ​​okno zostało załadowane. Podejście jest podobne (dziecko mówi rodzicowi, że jest załadowane), ale sposób komunikacji się poprawił. Mogłem zrobić to między domenami od dziecka:

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

Rodzic nasłuchuje tej wiadomości za pomocą:

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

Mam nadzieję że to pomoże.

Tylko jedno ulepszenie snipet'a InvisibleBacon (testowane w IE9, Safari 5, Chrome 9 i 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);
    };
}

Poniżej przedstawiono rozwiązanie jQuery do sprawdzania blokowania wyskakujących okienek. Został przetestowany w FF (v11), Safari (v6), Chrome (v23.0.127.95) i IE (v7 i v9). Zaktualizuj funkcję _displayError, aby obsłużyć komunikat o błędzie według własnego uznania.

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

Stosowanie:

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

Mam nadzieję że to pomoże! :)

Odpowiedź Richa nie będzie już działać w Chrome. Wygląda na to, że Chrome faktycznie wykonuje teraz dowolny JavaScript w wyskakującym okienku. Skończyło się na sprawdzaniu wartości screenX równej 0, aby sprawdzić, czy nie ma zablokowanych wyskakujących okienek. Myślę też, że znalazłem sposób, aby zagwarantować, że ta nieruchomość jest ostateczna przed sprawdzeniem. Działa to tylko w przypadku wyskakujących okienek w Twojej domenie, ale możesz dodać moduł obsługi ładowania w następujący sposób:

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

Jak wielu informowało, właściwość „screenX” czasami zgłasza wartość niezerową w przypadku nieudanych wyskakujących okienek, nawet po załadowaniu. Doświadczyłem również tego zachowania, ale jeśli dodasz sprawdzenie po przekroczeniu limitu czasu równego zero ms, właściwość screenX zawsze wydaje się zwracać spójną wartość.

Daj mi znać, jeśli istnieją sposoby na ulepszenie tego skryptu. Wydaje się, że działa to dla moich celów.

To zadziałało dla mnie:

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

Zewnętrzna wysokość i zewnętrzna szerokość dotyczą chromu, ponieważ sztuczka „about: blank” z góry nie działa już w przypadku chromu.

Mam zamiar po prostu skopiować / wkleić podaną tutaj odpowiedź: https://stackoverflow.com/a/27725432/892099 przez DanielB. działa na chrome 40 i jest bardzo czysty. nie ma brudnych hacków ani czekania.

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

Co powiesz na Promisepodejście?

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

I możesz go używać jak klasycznego window.open

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

Możesz zmienić kod tak, aby nie spełniał obietnicy zamiast zwracać undefined, po prostu pomyślałem, że ifto łatwiejszy przepływ sterowania niż try / catchw tym przypadku.

Sprawdź położenie okna względem rodzica. Chrome sprawia, że ​​okno pojawia się prawie poza ekranem.

Miałem podobny problem z wyskakującymi okienkami, które nie otwierały się w Chrome. Byłem sfrustrowany, ponieważ nie próbowałem zrobić czegoś podstępnego, na przykład wyskakującego okienka ładowania, po prostu otwierając okno, gdy użytkownik kliknął. Byłem PODWÓJNIE sfrustrowany, ponieważ uruchomienie funkcji obejmującej window.open () z wiersza poleceń firebug działało, podczas gdy kliknięcie mojego łącza nie działało! Oto moje rozwiązanie:

Niepoprawny sposób: uruchamianie window.open () z detektora zdarzeń (w moim przypadku dojo.connect z metodą zdarzenia onclick węzła DOM).

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

Właściwy sposób: przypisanie funkcji do właściwości onclick węzła, który wywołał window.open ().

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

Oczywiście, jeśli zajdzie taka potrzeba, nadal mogę obsługiwać detektory zdarzeń dla tego samego zdarzenia onclick. Dzięki tej zmianie mogłem otwierać okna, mimo że Chrome było ustawione na „Nie zezwalaj żadnej witrynie na pokazywanie wyskakujących okienek”. Radość.

Jeśli ktoś mądry w Chrome może powiedzieć reszcie z nas, dlaczego to robi różnicę, chciałbym to usłyszeć, chociaż podejrzewam, że to tylko próba zamknięcia drzwi przed złośliwymi programowymi wyskakującymi okienkami.

Oto wersja, która obecnie działa w przeglądarce Chrome. Tylko mała zmiana w stosunku do rozwiązania Richa, chociaż dodałem w opakowaniu, które również obsługuje synchronizację.

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

Aby go użyć, po prostu zrób to:

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

Jeśli wyskakujące okienko zostanie zablokowane, komunikat ostrzegawczy pojawi się po 5 sekundach okresu karencji (możesz to zmienić, ale 5 sekund powinno być całkiem bezpieczne).

Ten fragment zawiera wszystkie powyższe - z jakiegoś powodu - StackOverflow wyklucza pierwszą i ostatnią linię kodu w poniższym bloku kodu, więc napisałem o tym blog. Pełne wyjaśnienie i resztę (do pobrania) kodu można znaleźć na moim blogu pod adresem 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, na pewno jest tu wiele rozwiązań. To jest moje, wykorzystuje rozwiązania wzięte z aktualnej akceptowanej odpowiedzi (która nie działa w najnowszym Chrome i wymaga zawijania go w timeout), a także powiązane rozwiązanie w tym wątku (który jest właściwie waniliowym JS, a nie jQuery) .

Mój używa architektury wywołania zwrotnego, która zostanie wysłana, truegdy wyskakujące okienko zostanie zablokowane lub w falseinny sposób.

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

Odpowiedź Jasona to jedyna metoda, o której również przychodzi mi do głowy, ale poleganie na takiej pozycji jest trochę podejrzane!

W dzisiejszych czasach tak naprawdę nie musisz zadawać pytania „czy moje niechciane wyskakujące okienka zostały zablokowane?”, Ponieważ odpowiedź zawsze brzmi „tak” - wszystkie główne przeglądarki mają domyślnie włączoną funkcję blokowania wyskakujących okienek. Najlepszym podejściem jest użycie metody window.open () w odpowiedzi na bezpośrednie kliknięcie, co prawie zawsze jest dozwolone.

CZEŚĆ

Zmodyfikowałem nieco rozwiązania opisane powyżej i uważam, że działa przynajmniej pod Chrome. Moje rozwiązanie ma na celu wykrycie, czy wyskakujące okienko jest blokowane po otwarciu strony głównej, a nie po otwarciu wyskakującego okienka, ale jestem pewien, że są osoby, które mogą je modyfikować. :-) Wadą jest to, że wyświetlane jest wyskakujące okienko przez kilka sekund (może być możliwe trochę skrócenie), gdy nie ma programu blokującego wyskakujące okienka.

Umieściłem to w sekcji mojego „głównego” okna

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

Wyskakujący test wygląda następująco:

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

Gdy wywołuję funkcję test na stronie wyskakującej po 3500 ms, wewnętrzna wysokość została poprawnie ustawiona przez Chrome.

Używam zmiennej popUpsBlocked, aby wiedzieć, czy wyskakujące okienka są wyświetlane, czy nie w innych skryptach JavaScript. to znaczy

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

O ile wiem (z tego, co przetestowałem), Chrome zwraca obiekt okna z lokalizacją „about: blank”. Tak więc następujące elementy powinny działać we wszystkich przeglądarkach:

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