¿Cómo evito que Google Chrome bloquee mi window emergente?

En mi website hay un button que acaba de usar para llamar a una function que llama a window.open ; sin embargo, recientemente se necesitó un ajuste para hacer una verificación en el server antes de que se abriera la window emergente.

Desde que se agregó el código que hace la llamada AJAX, los browseres bloquean la window emergente, que se abre en la callback success de la llamada AJAX. Leí que los browseres pueden bloquear la window emergente si un evento de clic del usuario no la llama, así que intenté configurar la request AJAX en async: false , que resolvió el problema en Firefox, pero Google Chrome sigue bloqueando mi window emergente. ¿Hay alguna forma de evitar esto?

Podría mover la verificación del lado del server a la página que se abre en la window emergente, pero me gustaría hacerlo antes de abrir la window emergente, si es posible.

Código:

 <a id="attackButton" href="#">Attack Base!</a> <script type="text/javascript"> $(function() { $('#attackButton').click(function() { $.ajax({ url: baseurl + '/index.php?option=com_pbbgs&format=raw&getinfo=goingame', data: { 'gameid': 618 }, dataType: 'text', async: false, type: 'POST', success: function(data) { eval(data); if (window.gameURL) { goingameRaw(); } } }); return false; }); }); function goingameRaw() { window.open(window.gameURL,'test','left=20,top=20,width=1024,height=640,toolbar=0,resizable=0,location=0'); } </script> 

Ejemplo de cuerpo de respuesta:

 window.gameURL="http://mydomain.com/index.php?option=com_pbbgs&format=raw&startgame=618&width=1024&height=640";checktutorial('js','attack'); 

Sí, las windows emergentes deben ser un resultado directo de una acción del usuario. Hacerlos en la callback ajax no hará el truco. Además, usar async:false es malo: en FF se sabe que bloquea todo el browser. Piense en otra forma de hacer el cheque:

  • podría ser lo primero que haces en la window emergente
  • puede abrir la window emergente onclick y manipularla más adelante cuando se activa la callback
  • puede requerir que el usuario haga clic de nuevo en algún button para activar la window emergente (probablemente la peor solución)
  • puedes hacerlo en la carga de la página

Siguiendo con la excelente respuesta de Emil, "puede abrir la window emergente onclick y manipularla más adelante cuando se active la callback". Usé esta implementación.

 $('#attackButton').click(function() { 

Nuevo código aquí

  var win = window.open(''); window.oldOpen = window.open; window.open = function(url) { // reassignment function win.location = url; window.open = oldOpen; win.focus(); } 

fin nuevo código

  $.ajax({ url: baseurl + '/index.php', data: { 'gameid': 618 }, type: 'POST', success: function(data) { window.open('some url'); // will call reassignment function above } }); return false; }); 

Puede abrir una window que no está bloqueada justo debajo del evento onclick, si lo abre en una llamada jaja se lo considera emergente. Sin embargo, utilicé este método con éxito durante algún time para abrir una window emergente y no ser bloqueado.

http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/

En mi caso, el window.open se lanzó dentro de una promise en angular, que activó el bloqueador de pop-ups, mi solución fue:

 $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 promise y no invocando el bloqueador de pop-ups.

La solución anterior no funcionó para mí, pero me basé en ella y usé la window con nombre.

 internalCounter++; var tabbedWin = window.open('','windowName_'+internalCounter); $.ajax({ url: url, async: false, indexValue:internalCounter, success: function(){ var w= window.open(url, 'windowName_'+this.indexValue); w.focus(); } }) 

Yo uso este método:

  1. Redirigir a la misma página con URL de descarga agregada como parámetro:
 window.location.href = window.location.protocol + '//' + window.location.host + window.location.pathname + "?download=" + encodeURIComponent(urlToDownload) 
  1. Detecte este parámetro en la initialization de la página y networkingireccione para download:
 function param(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0; } var downloadParam = param('download'); if (downloadParam) { window.location = decodeURIComponent(downloadParam); }