jquery - desactivar - preventdefault not working

Omitir el bloqueador de pop-ups en la ventana. Abrir cuando se establece JQuery event.preventDefault()

Question

Quiero mostrar un diálogo de JQuery condicionalmente sobre el evento click de un hipervínculo.

Tengo un requisito como condición1 abrir un diálogo JQuery y si la condición1 no está satisfecha, navegue a la página a la que hace referencia la etiqueta ''href'' cuyo evento click está en cuestión.

Puedo invocar 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 de Spring y devuelve respuesta).

Todo funciona perfecto con solo window.open siendo bloqueado por el bloqueador de pop-ups.

$(''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(); desde el código, popoup blocker no bloquea la página, sin embargo, para condition1 abre el diálogo y abre la página ''href''.

Si resuelvo uno, crea problemas para otro. No soy capaz de dar justicia a ambas condiciones simultáneamente.

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

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

Answer 1

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

    });
});

Answer 2

Intenta usar un elemento de enlace y haz clic 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

Answer 3

La observación de que el evento tuvo que ser iniciado por el usuario me ayudó a descubrir la primera parte de esto, pero incluso después de eso, Chrome y Firefox aún bloqueaban la nueva ventana. La segunda parte agregaba 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'');
});

Answer 4

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

Tienes dos opciones:

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

2. Haz que la llamada ajax sea sincrónica, algo que normalmente deberías evitar como la peste, ya que bloquea la IU del navegador. $.getJSON es equivalente a:

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

   ... y entonces puede hacer que su llamada $.getJSON sincrónica mapeando sus parámetros a los de arriba 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);
           }
       }
   });

   De nuevo, no defiendo las llamadas síncronas ajax si puede encontrar otra forma de lograr su objetivo. Pero si no puedes, ahí tienes.

   Aquí hay un ejemplo de código que falla la prueba debido a la llamada asíncrona:

   Ejemplo en vivo | Fuente en vivo (Los enlaces en vivo ya no funcionan debido a los 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 síncrona:

   Ejemplo en vivo | Fuente en vivo (Los enlaces en vivo ya no funcionan debido a los 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");
         }
       });
     });
   });

Answer 5

Tuve este problema y no tenía mi url listo hasta que la devolución de llamada devuelva algunos datos. La solución fue abrir una ventana en blanco antes de iniciar la devolución de llamada y luego simplemente 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, "");
    });
};

Answer 6

Windows debe crearse en el mismo tick / stack que el evento iniciado por el usuario, por ejemplo, una devolución de llamada por clic.

Sin embargo, puedes crear una ventana sin una URL y luego puedes cambiar la URL de esa ventana una vez que la conozcas , ¡incluso asíncronamente!

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 inicialmente con about:blank , y asumiendo que su tarea asincrónica para obtener la URL es bastante rápida, el UX resultante es bastante bueno. Si en su lugar desea mostrar un mensaje de carga (o cualquier otro) en la ventana mientras el usuario espera, puede usar los URI de datos .

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

Answer 7

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 violín para esto http://jsfiddle.net/safeeronline/70kdacL4/1/

Answer 8

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

Entonces, puedes probar este escenario:

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