¿Cómo puedo detectar si un navegador está bloqueando una ventana emergente?

Question

De vez en cuando, me encuentro con una página web que intenta abrir una nueva ventana (para información del usuario o algo importante), pero el bloqueador de ventanas emergentes evita que esto suceda.

¿Qué métodos puede utilizar la ventana de llamada para asegurarse de que la nueva ventana se inicie correctamente?

Answer 1

Si usa JavaScript para abrir la ventana emergente, puede usar algo como esto:

var newWin = window.open(url);             

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

Answer 2

Probé varios de los ejemplos anteriores, pero no pude hacerlos funcionar con Chrome.Este enfoque simple parece funcionar con Chrome 39, Firefox 34, Safari 5.1.7 e IE 11.Aquí está el fragmento de código de nuestra biblioteca 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

Actualizar:Las ventanas emergentes existen desde tiempos realmente antiguos.La idea inicial era mostrar otro contenido sin cerrar la ventana principal.A partir de ahora, hay otras formas de hacerlo:JavaScript puede enviar solicitudes al servidor, por lo que rara vez se utilizan ventanas emergentes.Pero a veces siguen siendo útiles.

En el pasado, los sitios malignos abusaban mucho de las ventanas emergentes.Una página incorrecta podría abrir toneladas de ventanas emergentes con anuncios.Por eso ahora la mayoría de los navegadores intentan bloquear las ventanas emergentes y proteger al usuario.

La mayoría de los navegadores bloquean las ventanas emergentes si se llaman fuera de los controladores de eventos activados por el usuario, como onclick.

Si lo piensas bien, es un poco complicado.Si el código está directamente en un controlador onclick, entonces es fácil.Pero, ¿qué es la ventana emergente que se abre en setTimeout?

Pruebe este código:

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

La ventana emergente se abre en Chrome, pero se bloquea en Firefox.

…Y esto también funciona en Firefox:

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

La diferencia es que Firefox considera aceptable un tiempo de espera de 2000 ms o menos, pero después elimina la "confianza", suponiendo que ahora está "fuera de la acción del usuario".Entonces el primero está bloqueado y el segundo no.

---

Respuesta original que estaba vigente en 2012:

Esta solución para la verificación del bloqueador emergente se ha probado en FF (V11), Safari (V6), Chrome (V23.0.127.95) e IE (V7 y V9).Actualice la función DisplayError para manejar el mensaje de error como lee el ajuste.

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

Uso:

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

¡Espero que esto ayude!:)

Answer 4

Una "solución" que siempre funcionar independientemente de la compañía o la versión del navegador es simplemente colocar un mensaje de advertencia en la pantalla, en algún lugar cercano al control que creará una ventana emergente, que advierta cortésmente al usuario que la acción requiere una ventana emergente y que por favor habilítela para el sitio.

Sé que no es sofisticado ni nada por el estilo, pero no puede ser más simple y solo requiere unos 5 minutos de prueba, luego puedes pasar a otras pesadillas.

Una vez que el usuario haya permitido las ventanas emergentes para su sitio, también sería considerado no exagerar con las ventanas emergentes.Lo último que quieres hacer es molestar a tus visitantes.

Answer 5

Probé muchas soluciones, pero la única que se me ocurrió y que también funcionó con uBlock Origin fue utilizar un tiempo de espera para verificar el estado cerrado de la ventana emergente.

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

Obviamente esto es un truco;como todas las soluciones a este problema.

Debe proporcionar suficiente tiempo en su setTimeout para tener en cuenta la apertura y el cierre iniciales, por lo que nunca será completamente preciso.Será una posición de prueba y error.

Añade esto a tu lista de intentos.

Answer 6

Al usar el evento onbeforeunload podemos verificar lo siguiente

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

Se abrirán 2 ventanas negras en segundo plano.

la función devuelve un valor booleano.

Answer 7

Combiné las soluciones de @Kevin B y @DanielB.
Esto es mucho más sencillo.

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

Uso:

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