Recientemente, cuando estaba trabajando en un proyecto, me encontré con una situación en la que el navegador interceptó el uso de window.open, lo que deprimió mucho a la gente. Aunque la página se puede publicar en su propio entorno, para los usuarios, los usuarios no pueden hacerlo. requerido para pasar la intercepción. Es más, cuando ocurre una intercepción, muchos novatos no tienen idea de lo que está pasando y no saben dónde mirar la página interceptada. Es realmente triste ~~.
Además, se puede encontrar que cuando window.open activa un evento para el usuario o se carga, no será interceptado. Una vez que el código emergente se mueva a ajax o un fragmento de código asincrónico, será interceptado inmediatamente. .
Análisis de causas e investigación en profundidad.Cuando el navegador detecta una nueva ventana emergente generada por operaciones ajenas al usuario, la bloqueará. Porque el navegador cree que esta no es una página que el usuario quiere ver.
Por ejemplo, si se ejecuta directamente en js, el siguiente código:
código js:
//Abre una página directamente window.open('//www.baidu.com', '_blank');Navegador ie8 chrome 40 firefox 34 opera 27 safari 5.1.7
Ya sea para evitar que aparezca NNYYY y para el siguiente código:
código js:
document.body.addEventListener('click', function() { window.open('//www.baidu.com', '_blank'); });Todos los navegadores no lo bloquearán.
En resumen, cada navegador tiene diferentes criterios sobre el tiempo de interceptación y la respuesta al código colocado en la devolución de llamada ajax es diferente, por lo que no entraré en detalles aquí. Sin embargo, no es lo que los programadores quieren que la ventana emergente en nuestro código sea interceptada por el navegador.
Solución:1. Utilice una etiqueta en su lugar
Dada la siguiente función, vincular esta función a la devolución de llamada del evento de clic puede evitar la interceptación de ventanas emergentes por parte de la mayoría de los navegadores:
código js:
función newWin(url, id) { var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('target', '_blank'); ', id); // Evitar la adición repetida if(!document.getElementById(id)) document.body.appendChild(a);2. Utilice el método de envío del formulario para abrir una página.
Este método requiere construir un desde y luego activar el envío del formulario mediante el código js y enviar el formulario a una nueva página. El código es largo, por lo que no lo escribiré aquí. solución.
Tenga en cuenta que los dos métodos anteriores no son adecuados para colocarse en la función de devolución de llamada ajax. Si se colocan en la función de devolución de llamada, el navegador aún los interceptará.
3. La solución definitiva: primero abra la ventana y luego redirija
La tercera solución es en realidad una solución alternativa. La idea principal es: primero abrir la página mediante los clics del usuario y luego redirigir la página. El código de muestra es el siguiente.
código js:
xx.addEventListener('click', function () { // Abra la página, es mejor usar la página de aviso aquí var newWin = window.open('cargando página'); ajax().done(function() { // Repita Directo a la página de destino newWin.location.href = 'url de destino' } });El método anterior en realidad abre dos direcciones, por lo que se recomienda que envíe un mensaje similar a "La página actual se está cargando, espere" al abrir la primera dirección. . La página de aviso simple puede evitar abrir la página de destino real dos veces y permitir que los usuarios noten la redirección de la página.
Solución dos:
<a href=javascript:; onclick=dialog();>Haga clic en la ventana emergente</a><script>función de diálogo(){ $.ajax({ url: 'url', tipo: 'POST', tipo de datos: 'json ', async: false, // Esto debe definirse como datos sincrónicos: {param1: 'value1'}, Success: function(data){ window.open(data.url, '_blank'); ventana emergente} })} </script>Desventajas de este método:
Las pruebas reales pueden resolver el problema de interceptación de la mayoría de los navegadores, pero no pueden resolver la interceptación del software de seguridad (360 no interceptará, pero QQ Butler sí)
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.