javascript - permitir - Evite bloqueadores de ventanas emergentes del navegador

permitir ventanas emergentes firefox

Question

Estoy desarrollando un flujo de autenticación OAuth exclusivamente en JavaScript y quiero mostrarle al usuario la ventana "conceder acceso" en una ventana emergente, pero se bloquea.

¿Cómo puedo evitar que las ventanas emergentes creadas por window.open o window.showModalDialog sean bloqueadas por los bloqueadores de ventanas emergentes de los diferentes navegadores?

Answer 1

de la API de JavaScript oauth de Google:

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

Ver el área donde se lee:

Configurando la Autenticación

La implementación del cliente de OAuth 2.0 usa una ventana emergente para solicitar al usuario que inicie sesión y apruebe la aplicación. La primera llamada a gapi.auth.authorize puede desencadenar bloqueadores de ventanas emergentes, ya que abre la ventana emergente de forma indirecta. Para evitar que el bloqueador de pop-ups se active en las llamadas de autenticación, llame a gapi.auth.init (devolución de llamada) cuando el cliente cargue. La devolución de llamada suministrada se ejecutará cuando la biblioteca esté lista para realizar llamadas de autenticación.

Supongo que está relacionado con la respuesta real anterior en cómo explica si hay una respuesta inmediata, no disparará la alarma emergente. El "gapi.auth.init" lo está haciendo para que la API ocurra inmediatamente.

Aplicación práctica

Hice un microservicio de autenticación de código abierto utilizando el pasaporte de nodo en npm y los diversos paquetes de pasaporte para cada proveedor. Usé un enfoque de redireccionamiento estándar para el tercero, dándole una URL de redireccionamiento para volver. Esto fue programático, así que podría tener diferentes lugares a los que redirigir si se registra / se registra y en páginas particulares.

github.com/sebringj/athu

passportjs.org

Answer 2

Además del post de Swiss Mister, en mi caso el window.open fue lanzado dentro de una promesa, que activó el bloqueador de ventanas emergentes, mi solución fue: en angular:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
        browserService.updateLocation(res.url, myNewTab);

    }
  );
};

browserService:

this.openNewTab = function(){
     var newTabWindow = $window.open();
     return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
     if(!tabLocation){
       tab.close();
     }
     tab.location.href = tabLocation;
}

así es como puede abrir una nueva pestaña usando la respuesta de la promesa y no invocando el bloqueador de pop-ups.

Answer 3

Basado en el consejo muy útil de Jason Sebring , y en las cosas cubiertas here y there , encontré la solución perfecta para mi caso:

Pseudo código con fragmentos de JavaScript:

1. crear inmediatamente una ventana emergente en blanco en la acción del usuario

   var importantStuff = window.open('''', ''_blank'');

   Opcional: agregue algún mensaje de información "en espera". Ejemplos:

   a) Una página HTML externa: reemplace la línea anterior con

   var importantStuff = window.open(''http://example.com/waiting.html'', ''_blank'');

   b) Texto: agregue la siguiente línea debajo de la anterior:

   importantStuff.document.write(''Loading preview...'');

2. llenarlo con contenido cuando esté listo (cuando se devuelve la llamada AJAX, por ejemplo)

   importantStuff.location.href = ''http://shrib.com'';

Enriquezca la llamada a window.open con las opciones adicionales que necesite.

De hecho, uso esta solución para una redirección de mailto, y funciona en todos mis navegadores (Windows 7, Android). El bit _blank ayuda a que la redirección de mailto funcione en dispositivos móviles, por cierto.

¿Tu experiencia? ¿Alguna forma de mejorar esto?

Answer 4

Como buena práctica, creo que es una buena idea probar si una ventana emergente fue bloqueada y tomar medidas por si acaso. Necesita saber que window.open tiene un valor de retorno, y ese valor puede ser nulo si la acción falla. Por ejemplo, en el siguiente código:

function pop(url,w,h) {
    n=window.open(url,''_blank'',''toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width=''+w+'',height=''+h);
    if(n==null) {
        return true;
    }
    return false;
}

si la ventana emergente está bloqueada, window.open devolverá nulo. Entonces la función devolverá falso.

Como ejemplo, imagina llamar a esta función directamente desde cualquier enlace con target="_blank" : si la ventana emergente se abre con éxito, al devolver false se bloqueará la acción de enlace; de ​​lo contrario, si la ventana emergente está bloqueada, devolver true permitirá que el comportamiento predeterminado (abrir nueva _blank window) y continúa.

<a href="http://whatever.com" target="_blank" onclick=''return pop("http://whatever.com",300,200);'' >

De esta manera tendrá una ventana emergente si funciona, y una ventana _blank si no.

Si la ventana emergente no se abre, puede:

• abrir una ventana en blanco como en el ejemplo y continuar
• abrir una ventana emergente falsa (un iframe dentro de la página)
• informar al usuario ("permitir ventanas emergentes para este sitio")
• abra una ventana en blanco y luego informe al usuario, etc.

Answer 5

La forma más fácil de deshacerse de esto es, que funcionó muy bien para mí:

1. No use document.open ().
2. En su lugar, use this.document.location.href = location; donde la ubicación es la url que se va a cargar

Ej .:

<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>

<div onclick="loadUrl(''company_page.jsp'')">Abc</div>

Esto funciona muy bien Aclamaciones

Answer 6

La regla general es que los bloqueadores de ventanas emergentes se activarán si se invoca window.open o similar desde javascript que no es invocado por la acción directa del usuario . Es decir, puede llamar a window.open en respuesta a un clic de botón sin ser golpeado por el bloqueador de pop-ups, pero si coloca el mismo código en un evento de temporizador, se bloqueará. La profundidad de la cadena de llamadas también es un factor: algunos navegadores más antiguos solo miran al llamador inmediato, los navegadores más nuevos pueden retroceder un poco para ver si la persona que llama tiene un clic de ratón, etc. Manténgalo tan superficial como pueda para evitar los bloqueadores de ventanas emergentes.

Answer 7

No quería hacer la nueva página a menos que la devolución de llamada haya sido exitosa, así que hice esto para simular que el usuario haga clic en:

function submitAndRedirect {
  apiCall.then(({ redirect }) => {
      const a = document.createElement(''a'');
      a.href = redirect;
      a.target = ''_blank'';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  });
}