Як я можу виявити, чи браузер блокує спливаюче вікно?

Інколи я натрапляю на веб-сторінку, яка намагається відкрити нове вікно (для введення користувача або щось важливе), але блокувальник спливаючих вікон заважає цьому не статися.

Які методи може використовувати вікно виклику, щоб переконатися, що нове вікно запустилось належним чином?

Якщо ви використовуєте JavaScript для відкриття спливаючого вікна, ви можете використовувати щось подібне:

var newWin = window.open(url);             

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

Я спробував ряд прикладів вище, але мені не вдалося змусити їх працювати з Chrome. Цей простий підхід, здається, працює з Chrome 39, Firefox 34, Safari 5.1.7 та IE 11. Ось фрагмент коду з нашої бібліотеки 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.");
    }
}

Оновлення: спливаючі вікна існують з дуже давніх часів. Початковою ідеєю було показати інший контент, не закриваючи головне вікно. На сьогоднішній день існують інші способи зробити це: JavaScript може надсилати запити на сервер, тому спливаючі вікна використовуються рідко. Але іноді вони все-таки зручні.

У минулому злі місця зловживань з'являлися багато. Погана сторінка може відкрити багато спливаючих вікон з рекламою. Тож тепер більшість браузерів намагаються блокувати спливаючі вікна та захищати користувача.

Більшість браузерів блокує спливаючі вікна, якщо вони викликаються поза оброблюваними користувачами подій, як-от onclick.

Якщо ви задумаєтесь, це трохи хитро. Якщо код знаходиться безпосередньо в обробці onclick, це легко. Але що відкриває спливаюче вікно у setTimeout?

Спробуйте цей код:

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

Спливаюче вікно відкривається в Chrome, але блокується у Firefox.

… І це працює і в Firefox:

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

Різниця полягає в тому, що Firefox обробляє час очікування в 2000 мс або менше, але після цього - видаляє "довіру", припускаючи, що зараз це "поза діями користувача". Тож перший заблокований, а другий - ні.

Оригінальна відповідь, яка була поточною у 2012 році:

Це рішення для перевірки блокаторів спливаючих вікон було протестовано у FF (v11), Safari (v6), Chrome (v23.0.127.95) та IE (v7 та v9). Оновіть функцію displayError, щоб обробляти повідомлення про помилку, як вважаєте за потрібне.

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

Використання:

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

Сподіваюся, це допомагає! :)

Одне "рішення", яке завжди працюватиме незалежно від компанії чи версії браузера, - просто поставити попереджувальне повідомлення на екран, десь близько до елемента керування, який створить спливаюче вікно, яке ввічливо попереджає користувача про те, що для дії потрібна поп- і, будь ласка, включіть їх для сайту

Я знаю, що це не фантазії чи нічого, але це не може бути простішим і вимагає приблизно 5 хвилин тестування, то ви можете перейти до інших кошмарів.

Після того, як користувач дозволив спливаючі вікна для вашого сайту, було б також уважно, якщо ви не перестараєтеся зі спливаючими вікнами. Останнє, що ви хочете зробити, це дратувати відвідувачів.

Я поєднав рішення @Kevin B та @ DanielB.
Це набагато простіше.

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

Використання:

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

Я спробував безліч рішень, але єдиний, з яким я міг придумати, що також працював з uBlock Origin, був за допомогою таймауту, щоб перевірити закритий статус спливаючого вікна.

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

Очевидно, це хак; як і всі рішення цієї проблеми.

Вам потрібно забезпечити достатньо часу у вашому setTimeout для обліку початкового відкриття та закриття, так що це ніколи не буде ретельно точним. Це буде позиція проб і помилок.

Додайте це до свого списку спроб.

Простий підхід, якщо ви також володієте дочірнім кодом , полягав би в тому, щоб створити просту змінну в її html, як показано нижче:

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

А потім перевірити його існування від батьків щось подібне до наступного:

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

Ми чекаємо деякого часу, щоб переконатися, що веб-сторінка завантажена, і перевірити її існування. Очевидно, якби вікно не завантажувалося після 1500мс, то змінна все-таки була б undefined.

За допомогою події onbeforeunload ми можемо перевірити наступне

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

це відкриє 2 чорних вікна у фоновому режимі

функція повертає булеве значення.