Omitir el bloqueador de ventanas emergentes en window.open cuando se establece JQuery event.preventDefault ()

Quiero mostrar un diálogo de JQuery condicionalmente en el evento de clic de un hipervínculo.

Tengo un requisito como en condition1 abrir un diálogo de JQuery y si condition1 no se satisface, navegue a la página como se hace referencia en la etiqueta 'href' de cuyo evento de clic está en cuestión.

Puedo llamar a una función en el evento de clic del enlace. Esta función ahora verifica dicha condición ejecutando otra URL (que ejecuta mi controlador Spring y devuelve la respuesta).

Todo funciona perfectamente con solo window.open bloqueado por el bloqueador de ventanas emergentes.

$('a[href*=/viewpage?number]').live('click', function(e) {
    e.preventDefault();
    redirectionURL = this.href;
    pageId= getUrlVars(redirectionURL)["number"];
    $.getJSON("redirect/" + pageId, {}, function(status) {
        if (status == null) {
            alert("Error in verifying the status.");
        } else if(!status) {
            $("#agreement").dialog("open");
        } else {
            window.open(redirectionURL);
        }
    });
});

Si e.preventDefault();elimino del código, el bloqueador de popup no bloquea la página, sin embargo, para la condición 1, abre el diálogo y abre la página 'href'.

Si resuelvo uno, crea problemas para otro. No puedo hacer justicia a ambas condiciones simultáneamente.

¿Podría ayudarme a resolver este problema, por favor?

Una vez que esto se resuelve, tengo otro problema que resolver, es decir, la navegación en el evento OK del diálogo :)

Los bloqueadores de ventanas emergentes normalmente solo permitirán window.opensi se usan durante el procesamiento de un evento de usuario (como un clic). En su caso, está llamando window.open más tarde , no durante el evento, porque $.getJSONes asincrónico.

Tienes dos opciones:

1. Haz algo más, en lugar de window.open.

2. Haga que la llamada ajax sea sincrónica, que es algo que normalmente debe evitar como la plaga, ya que bloquea la interfaz de usuario del navegador. $.getJSONes equivalente a:

   $.ajax({
     url: url,
     dataType: 'json',
     data: data,
     success: callback
   });
   

   ... y para que pueda $.getJSONsincronizar su llamada asignando sus parámetros a lo anterior y agregando async: false:

   $.ajax({
       url:      "redirect/" + pageId,
       async:    false,
       dataType: "json",
       data:     {},
       success:  function(status) {
           if (status == null) {
               alert("Error in verifying the status.");
           } else if(!status) {
               $("#agreement").dialog("open");
           } else {
               window.open(redirectionURL);
           }
       }
   });
   

   Una vez más, no defiendo las llamadas ajax sincrónicas si puede encontrar otra forma de lograr su objetivo. Pero si no puede, ahí lo tiene.

   A continuación, se muestra un ejemplo de código que no supera la prueba debido a la llamada asincrónica:

   Ejemplo en vivo | Fuente en vivo (los enlaces en vivo ya no funcionan debido a cambios en JSBin)

   jQuery(function($) {
     // This version doesn't work, because the window.open is
     // not during the event processing
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.getJSON("http://jsbin.com/uriyip", function() {
         window.open("http://jsbin.com/ubiqev");
       });
     });
   });
   

   Y aquí hay un ejemplo que funciona, usando una llamada sincrónica:

   Ejemplo en vivo | Fuente en vivo (los enlaces en vivo ya no funcionan debido a cambios en JSBin)

   jQuery(function($) {
     // This version does work, because the window.open is
     // during the event processing. But it uses a synchronous
     // ajax call, locking up the browser UI while the call is
     // in progress.
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.ajax({
         url:      "http://jsbin.com/uriyip",
         async:    false,
         dataType: "json",
         success:  function() {
           window.open("http://jsbin.com/ubiqev");
         }
       });
     });
   });
   

puede llamar a window.open sin bloquear el navegador solo si el usuario realiza alguna acción directamente. El navegador envía una bandera y determina la ventana abierta por la acción del usuario.

Entonces, puedes probar este escenario:

1. var myWindow = ventana.open ('')
2. dibuja cualquier mensaje de carga en esta ventana
3. cuando se complete la solicitud, simplemente llame a myWindow.location = ' http://google.com '

Tuve este problema y no tenía mi URL lista hasta que la devolución de llamada devolviera algunos datos. La solución fue abrir una ventana en blanco antes de iniciar la devolución de llamada y luego establecer la ubicación cuando regrese la devolución de llamada.

$scope.testCode = function () {
    var newWin = $window.open('', '_blank');
    service.testCode().then(function (data) {
        $scope.testing = true;
        newWin.location = '/Tests/' + data.url.replace(/["]/g, "");
    });
};

prueba esto, funciona para mí,

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        success: function (data) {
            redirectWindow.location;
        }
    });
});

Es un violín para esto http://jsfiddle.net/safeeronline/70kdacL4/1/

Windows debe crearse en la misma pila (también conocida como microtask ) que el evento iniciado por el usuario, por ejemplo, una devolución de llamada de clic, para que no se puedan crear más tarde, de forma asincrónica.

Sin embargo, puede crear una ventana sin una URL y luego puede cambiar la URL de esa ventana una vez que la sepa , ¡incluso de forma asincrónica!

window.onclick = () => {
  // You MUST create the window on the same event
  // tick/stack as the user-initiated event (e.g. click callback)
  const googleWindow = window.open();

  // Do your async work
  fakeAjax(response => {
    // Change the URL of the window you created once you
    // know what the full URL is!
    googleWindow.location.replace(`https://google.com?q=${response}`);
  });
};

function fakeAjax(callback) {
  setTimeout(() => {
    callback('example');
  }, 1000);
}

Los navegadores modernos abrirán la ventana con una página en blanco (a menudo llamada about:blank), y suponiendo que su tarea asíncrona para obtener la URL sea bastante rápida, la UX resultante es en su mayoría buena. Si, en cambio, desea representar un mensaje de carga (o cualquier cosa) en la ventana mientras el usuario espera, puede usar URI de datos .

window.open('data:text/html,<h1>Loading...<%2Fh1>');

Este código me ayuda. Espero que esto ayude a algunas personas

$('formSelector').submit( function( event ) {

    event.preventDefault();

    var newWindow = window.open('', '_blank', 'width=750,height=500');

    $.ajax({

        url: ajaxurl,
        type: "POST",
        data: { data },

    }).done( function( response ) {

        if ( ! response ) newWindow.close();
        else newWindow.location = '/url';

    });
});

Intente usar un elemento de enlace y haga clic en él con javascriipt

<a id="SimulateOpenLink" href="#" target="_blank" rel="noopener noreferrer"></a>

y el guion

function openURL(url) {
    document.getElementById("SimulateOpenLink").href = url
    document.getElementById("SimulateOpenLink").click()
}

Úselo así

//do stuff
var id = 123123141;
openURL("/api/user/" + id + "/print") //this open webpage bypassing pop-up blocker
openURL("https://www.google.com") //Another link

La observación de que el usuario tenía que iniciar el evento me ayudó a descubrir la primera parte de esto, pero incluso después de eso, Chrome y Firefox seguían bloqueando la nueva ventana. La segunda parte fue agregar target = "_ blank" al enlace, que se mencionó en un comentario.

En resumen: debe llamar a window.open desde un evento iniciado por el usuario, en este caso haciendo clic en un enlace, y ese enlace debe tener target = "_ blank".

En el siguiente ejemplo, el enlace usa class = "button-twitter".

$('.button-twitter').click(function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  var tweet_popup = window.open(href, 'tweet_popup', 'width=500,height=300');
});

var url = window.open("", "_blank");
url.location = "url";

esto funcionó para mí.

Estoy usando este método para evitar el bloqueador de ventanas emergentes en mi código React. también funcionará en todos los demás códigos javascript.

Cuando esté realizando una llamada asíncrona al hacer clic en un evento, simplemente abra una ventana en blanco primero y luego escriba la URL en ella cuando se complete una llamada asíncrona.

const popupWindow = window.open("", "_blank");
popupWindow.document.write("<div>Loading, Plesae wait...</div>")

sobre el éxito de la llamada asíncrona, escriba lo siguiente

popupWindow.document.write(resonse.url)