Ignore o bloqueador de pop-up em window.open quando JQuery event.preventDefault () estiver definido

Quero mostrar uma caixa de diálogo JQuery condicionalmente no evento de clique de um hiperlink.

Eu tenho um requisito como na condição1 abrir um diálogo JQuery e se a condição1 não for satisfeita, navegue até a página conforme referenciado pela tag 'href' cujo evento de clique está em questão.

Consigo chamar uma função no evento de clique do link. Esta função agora verifica a referida condição executando outra URL (que executa meu controlador Spring e retorna uma resposta).

Tudo funciona perfeitamente com apenas window.open sendo bloqueado pelo bloqueador de pop-up.

$('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);
        }
    });
});

Se eu remover e.preventDefault();do código, o bloqueador de popoup não bloqueia a página, no entanto, para a condição1, ele abre a caixa de diálogo, bem como abre a página 'href'.

Se eu resolver um, criará problemas para outro. Não sou capaz de fazer justiça a ambas as condições simultaneamente.

Você poderia me ajudar a resolver este problema, por favor?

Assim que isso for resolvido, tenho outro problema para resolver, ou seja, a navegação no evento OK do diálogo :)

Os bloqueadores de pop-up normalmente só permitirão window.opense usados durante o processamento de um evento do usuário (como um clique). No seu caso, você está ligando window.open mais tarde , não durante o evento, porque $.getJSONé assíncrono.

Você tem duas opções:

1. Faça outra coisa, em vez de window.open.

2. Faça a chamada ajax síncrona, que é algo que você normalmente deve evitar como uma praga, pois bloqueia a IU do navegador. $.getJSONé equivalente a:

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

   ... e assim você pode fazer sua $.getJSONchamada síncrona mapeando seus parâmetros para o acima e adicionando 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);
           }
       }
   });
   

   Novamente, eu não defendo chamadas ajax síncronas se você puder encontrar qualquer outra maneira de atingir seu objetivo. Mas se você não puder, aí está.

   Aqui está um exemplo de código que falha no teste por causa da chamada assíncrona:

   Exemplo ao vivo | Fonte ao vivo (os links ao vivo não funcionam mais devido às mudanças no 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");
       });
     });
   });
   

   E aqui está um exemplo que funciona, usando uma chamada síncrona:

   Exemplo ao vivo | Fonte ao vivo (os links ao vivo não funcionam mais devido às mudanças no 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");
         }
       });
     });
   });
   

você pode chamar window.open sem o bloqueio do navegador apenas se o usuário realizar alguma ação diretamente. O navegador envia alguma bandeira e determina a janela aberta pela ação do usuário.

Então, você pode tentar este cenário:

1. var myWindow = window.open ('')
2. desenhe qualquer mensagem de carregamento nesta janela
3. quando a solicitação for concluída, basta chamar myWindow.location = ' http://google.com '

Eu tive esse problema e não tinha meu url pronto até que o retorno de chamada retornasse alguns dados. A solução foi abrir a janela em branco antes de iniciar o retorno de chamada e então apenas definir o local quando o retorno de chamada retornar.

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

tente isso, funciona para mim,

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

É violar este http://jsfiddle.net/safeeronline/70kdacL4/1/

O Windows deve ser criado na mesma pilha (também conhecido como microtarefa ) que o evento iniciado pelo usuário, por exemplo, um retorno de chamada de clique - para que não possam ser criados posteriormente, de forma assíncrona.

No entanto, você pode criar uma janela sem um URL e, em seguida, alterar o URL dessa janela assim que o souber , mesmo de forma assíncrona!

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

Os navegadores modernos abrirão a janela com uma página em branco (frequentemente chamada about:blank) e, supondo que sua tarefa assíncrona para obter a URL seja bastante rápida, o UX resultante é geralmente bom. Se você quiser renderizar uma mensagem de carregamento (ou qualquer coisa) na janela enquanto o usuário espera, você pode usar URIs de dados .

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

Este código me ajuda. Espero que ajude algumas pessoas

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

    });
});

Tente usar um elemento de link e clique nele com javascriipt

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

e o roteiro

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

Use assim

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

A observação de que o evento tinha que ser iniciado pelo usuário me ajudou a descobrir a primeira parte disso, mas mesmo depois disso o Chrome e o Firefox ainda bloquearam a nova janela. A segunda parte foi adicionar target = "_ blank" ao link, que foi mencionado em um comentário.

Em resumo: você precisa chamar window.open de um evento iniciado pelo usuário, neste caso clicando em um link, e esse link precisa ter target = "_ blank".

No exemplo abaixo, o link está usando 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";

isso funcionou para mim.

Estou usando esse método para evitar o bloqueador de pop-up em meu código React. funcionará em todos os outros códigos javascript também.

Quando você estiver fazendo uma chamada assíncrona no evento de clique, apenas abra uma janela em branco primeiro e depois escreva o URL quando a chamada assíncrona for concluída.

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

sobre o sucesso da chamada assíncrona, escreva o seguinte

popupWindow.document.write(resonse.url)