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

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

var newWin = window.open(url);

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

Вот ответ для хрома: обнаружить заблокированное всплывающее окно в хроме

@ ajwaka, не могли бы вы уточнить, не подходит ли этот ответ для Chrome или есть ли причина, по которой другой ответ лучше подходит для Chrome? Благодарность!

@ ajwaka, по крайней мере, сегодня этот код работает в Chrome, отсюда и вопрос.

@ Crashalot - Вы спрашиваете меня о чем-то, на что я ответил 6 лет назад - к сожалению, я больше не помню ситуацию, и браузеры прошли долгий путь за 6 лет.

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

@ Surendra, пожалуйста, не могли бы вы уточнить, что вы имеете в виду под «не работает»? Ошибка во время синтаксического анализа? Ошибка во время выполнения? Всплывающее окно открывается, но оно помечено как заблокированное? Всплывающее окно заблокировано, но помечено как открытое? Я не вижу причин, по которым проводник не сможет это сделать, если только не разрешен вызов focus() для NULL, и в этом случае проверка на NULL перед попыткой просто сработает.

IE всегда возвращает null, даже если всплывающее окно было успешным.

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

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

Я думаю, вам нужно больше подчеркиваний

В firefox это отображает пустую страницу, и вы даже не можете увидеть сообщение блокировщика всплывающих окон на странице открытия. Как закрыть пустую страницу?

Обратите внимание, что если URL-адрес всплывающего окна является загружаемым файлом (который указан Content-Disposition: attachment;в заголовке ответа), всплывающее окно немедленно закроется, поэтому setTimeout код завершится ошибкой, и браузер сообщит, что «Блокировщик всплывающих окон включен!». Для Chrome я рекомендую решение @ DanielB, и оно отлично работает.

@ wonsuc при открытии ссылки с Content-Disposition: attachment; заголовком вам не нужно открывать ее во всплывающем окне. Просто сделайте прямую ссылку на ресурс, который вы хотите загрузить, и собственное поведение браузера позволит вам загрузить его, не перенаправляя вас с текущей страницы.

@ KevinB Должен сказать, что я в особой ситуации. Мне нужно загрузить несколько файлов, которые генерируют PDF-файлы из HTML. И если содержимое HTML большое, иногда это занимает несколько секунд, и если я использую window.location для этого, если первый файл слишком долго генерируется, он будет проигнорирован при запуске второго запроса. Вот почему я должен использовать window.open, так как window.location никогда не сообщает мне, когда ответ заканчивается.

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

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

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

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

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

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

isPopupBlockerActivated функция никогда не возвращается return (popupWindow.innerHeight > 0) === false;. Ваша функция возвращает false, если ваш браузер не Chrome. Потому что onload — это асинхронный процесс. Ваша функция возвращает false, а затем выполняется загрузка, но ее результат никогда не возвращается.

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

как насчет того, чтобы поместить это в окно обработчика загрузки.

@ bhansa Мы не можем, потому что проверка происходит в родительском окне, тогда как magicNumber переменная находится в дочернем окне.

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

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

Для некоторых блокировщиков всплывающих окон это не работает, но я использую его как базовое решение и добавляю try {} catch

try {
        const newWindow = window.open(url, '_blank');
        if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined')         {
            return null;
        }

        (newWindow as Window).window.focus();
        newWindow.addEventListener('load', function () {
            console.info('Please allow popups for this website')
        })
        return newWindow;
    } catch (e) {
        return null;
    }

Это попытается вызвать функцию addEventListaner, но если всплывающее окно не открыто, оно сломается и перейдет к перехвату, затем спросит, является ли его объект или null, и запустит остальную часть кода.

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

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

open()
open(url)
open(url, target)
open(url, target, windowFeatures)