因此使用JS代码自动触发window.open() ,第二个参数不为_self,打开新窗口在大部分浏览器中会被拦截。如果第二个参数为_self,则不会被拦截,如window.open("","_self") 。
如何Ajax回调中避免被拦截
很多人的需求是点击按钮发送Ajax请求,请求数据回来后,再使用window.open来打开新的窗口,由于是异步操作,直接window.open ,肯定会被拦截。这时我们可以变通以下,先打开一个空窗口,然后等数据回来后替换为需要的地址
如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拦截测试</title> <style type="text/css"> #btn{ width:100px; height: 30px; line-height: 30px; text-align:center; background-color:#0087dc; transition:all .2s; color:#fff; border-radius:3px;cursor:pointer; } #btn:hover{ background-color:#0060b2; } </style> </head> <body> <div>打开新窗口</div> <script type="text/javascript"> btn.addEventListener('click',(e)=>{ var xhr = new XMLHttpRequest(); var newWin = window.open('about:blank'); xhr.onreadystatechange = ()=>{ if(xhr.readyState == 4){ if(xhr.status == 200){ newWin.location.href="http://www.baidu.com"; } } }; xhr.open('post','/dnslookup',!1);//异步方式 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send('host=www.baidu.com&rrtype=A'); },!0); </script> </body> </html>
服务端代码如下:
var http = require('http'), url = require('url'), dns = require('dns'), qs = require('querystring'), fs = require('fs'); function router(req,res,pathname){ switch(pathname){ case '/dnslookup': lookup(req,res); break; default: showIndex(req,res); } } function showIndex(req,res){ var pagePath = __dirname+'https://www.jb51.net/'+'block.html'; var html = fs.readFileSync(pagePath); res.end(html); } function lookup(req,res){ var postData = ''; req.on('data',function(data){ postData+=data; }); req.on('end',function(data){ var json = qs.parse(postData); var hostname = json.host; var rrtype = json.rrtype; dns.resolve(hostname,rrtype,function(err,adresses){ if(err){ res.end(JSON.stringify({errcode:1,ips:[]})); } res.end(JSON.stringify({errcode:0,ips:adresses})); }); }); } http.createServer(function(req,res){ var pathname = url.parse(req.url).pathname; req.setEncoding("utf8"); res.writeHead(200,{'Content-Type':'text/html'}); router(req,res,pathname); }).listen(3000);
如上所示便可解决在Ajax回调中新窗口被拦截的问题。