Как я могу определить, блокирует ли браузер всплывающее окно?

Question

Иногда я сталкивался с веб-страницей, которая пытается открыть новое окно (для ввода пользователем или чего-то важного), но блокировщик всплывающих окон предотвращает это.

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

Answer 1

Если вы используете JavaScript для открытия всплывающего окна, вы можете использовать что-то вроде этого:

var newWin = window.open(url);             

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

Answer 2

Я попробовал несколько приведенных выше примеров, но мне не удалось заставить их работать с 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.");
    }
}

Answer 3

Обновить:Всплывающие окна существуют с действительно древних времен.Первоначальная идея состояла в том, чтобы показывать другой контент, не закрывая главное окно.На данный момент есть и другие способы сделать это: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);

Надеюсь, это поможет!:)

Answer 4

Одно "решение", которое позволит всегда работа независимо от компании или версии браузера заключается в том, чтобы просто вывести предупреждающее сообщение на экран, где-нибудь рядом с элементом управления, который создаст всплывающее окно, вежливо предупреждающее пользователя о том, что для выполнения действия требуется всплывающее окно, и, пожалуйста, включить его для сайта.

Я знаю, что это не модно или что-то в этом роде, но это не может стать проще и требует всего около 5 минут тестирования, после чего вы можете переходить к другим кошмарам.

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

Answer 5

Я перепробовал множество решений, но единственное, которое я смог придумать, которое также работало с 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, чтобы учесть начальное открытие и закрытие, поэтому оно никогда не будет полностью точным.Это будет позиция проб и ошибок.

Добавьте это в свой список попыток.

Answer 6

Используя событие 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 черных окна в фоновом режиме

функция возвращает логическое значение.

Answer 7

Я объединил решения @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.
}