Explicação detalhada da solução para window.open sendo interceptado pelo navegador

Recentemente, quando estava trabalhando em um projeto, me deparei com uma situação em que o uso de window.open foi interceptado pelo navegador, o que deixou as pessoas extremamente deprimidas. Embora a página possa ser liberada em seu próprio ambiente, para os usuários, os usuários não podem ficar. necessário para passar pela interceptação. Além do mais, quando ocorre uma interceptação, muitos novatos não têm ideia do que está acontecendo e não sabem onde olhar a página interceptada. É muito triste.

Além disso, pode-se descobrir que quando window.open aciona um evento para o usuário ou é carregado, ele não será interceptado. Depois que o código pop-up for movido para ajax ou um trecho de código assíncrono, ele será interceptado imediatamente. .

Quando o navegador detecta uma nova janela pop-up gerada por operações que não são do usuário, ele a bloqueia. Porque o navegador pensa que esta não é uma página que o usuário deseja ver.

Por exemplo, se executado diretamente em js, o seguinte código:

código js:

 //Abre uma página diretamente window.open('//www.baidu.com', '_blank');

Navegador ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

Seja para evitar que NNYYY apareça e para o seguinte código:

código js:

 document.body.addEventListener('click', function() { window.open('//www.baidu.com', '_blank'); });

Todos os navegadores não irão bloqueá-lo.

Resumindo, cada navegador tem julgamentos diferentes sobre o tempo de interceptação, e a resposta ao código colocado no retorno de chamada do ajax é diferente, então não entrarei em detalhes aqui. No entanto, não é o que os programadores desejam que a janela pop-up do nosso código seja interceptada pelo navegador.

1. Use uma tag

Dada a seguinte função, vincular esta função ao retorno de chamada do evento click pode evitar a interceptação de pop-ups de janelas pela maioria dos navegadores:

código js:

 função newWin(url, id) { var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('target', '_blank'); ', id); // Evita adição repetida if(!document.getElementById(id)) document.body.appendChild(a);

2. Use o método de envio do formulário para abrir uma página

Este método requer a construção de um from e, em seguida, acionar o envio do formulário pelo código js e enviar o formulário para uma nova página. O código é longo, então não vou escrevê-lo aqui. solução.

Observe que os dois métodos acima não são adequados para serem colocados na função de retorno de chamada do ajax. Se forem colocados na função de retorno de chamada, eles ainda serão interceptados pelo navegador.

3. A solução definitiva - primeiro abra a janela e depois redirecione

A terceira solução é na verdade uma solução alternativa. A ideia central é: primeiro abrir a página por meio de cliques do usuário e, em seguida, redirecioná-la. O código de exemplo é o seguinte.

código js:

 xx.addEventListener('click', function () { // Abra a página, é melhor usar a página de prompt aqui var newWin = window.open('loading page'); ajax().done(function() { // Repita direto para a página de destino newWin.location.href = 'target url' } });

O método acima, na verdade, abre dois endereços, por isso é recomendável que você forneça uma mensagem semelhante a ‘A página atual está carregando, aguarde’ ao abrir o primeiro endereço. . página de prompt simples, que pode evitar a abertura da página de destino real duas vezes e permitir que os usuários percebam o redirecionamento da página.

Solução dois:

 <a href=javascript:; onclick=dialog();>Clique na janela pop-up</a><script>function dialog(){ $.ajax({ url: 'url', type: 'POST', dataType: 'json ', async: false, // Deve ser definido como dados síncronos: {param1: 'value1'}, sucesso: function(data){ window.open(data.url, '_blank'); janela pop-up} })} </script>

Desvantagens deste método:

Os testes reais podem resolver o problema de interceptação da maioria dos navegadores, mas não podem resolver a interceptação de software de segurança (360 não interceptará, mas QQ Butler irá)

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.