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


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

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

6 97

6 ответов:

Если вы используете 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.");
    }
}

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

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

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

добавить это к вашему списку попыток.

С помощью 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 черных окна в фоновом режиме

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