最近公司开发的一个项目，平凡用到下载各种类型的文件，但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开，影响用户体验，尝试各种方案和百度总结一下几点；
原理：
当window.open为用户触发事件内部或者加载时，不会被拦截，一旦将弹出代码移动到ajax或者一段异步代码内部，马上就出现被拦截的表现了(浏览器认为这可能是一个广告，不是一个用户希望看到的页面)
常用办法页面打开方式：
- 超链接
<a href="https://www.baidu.com" title="">Welcome</a>等效于js代码
window.location.href="https://www.baidu.com"; //在同当前窗口中打开窗口
- 超链接
<a href="https://www.baidu.com/" title=""target="_blank">Welcome</a>等效于js代码
window.open("https://www.baidu.com/"); //在另外新建窗口中打开窗口
- 关闭新窗口：this.window.opener =null; window.close();
解决方案：
- 使用a标签替代：
给出如下函数，将此函数绑定到click的事件回调中，就可以避免大部分浏览器对窗口弹出 的拦截：
function newWin(url, id) { var a = document.createElement(‘a‘); a.setAttribute(‘href‘, url); a.setAttribute(‘target‘, ‘_blank‘); a.setAttribute(‘id‘, id); // 防止反复添加 if(!document.getElementById(id)) { document.body.appendChild(a); } a.click(); } function openUrl(url) { var a = $('')[0]; var e = document.createEvent('MouseEvents'); e.initEvent('click', true, true); a.dispatchEvent(e);}//调用方法newWin(url,'bbb') / openUrl(url)//原理都是通过创建一个a标签对象，通过里面自带的target执行跳转 - 在超链接里加入onclick事件,如:
//这样用户点击这个超链接，浏览器会认为它是打开一个新的链接，所以就不会拦 截。
- 使用 setTimeout 包装一下，也可以防止被浏览器拦截。
//注意这里的超时时间不能太短，否则也会被拦截。
setTimeout('window.open(url);', 500); - 我们会遇到想要弹出一个窗口，可是却是在onckick事件执行后，才去弹出来的，这时就会被浏览器拦截，我们可以通过下面的方法来避免
//先用window.open打开一个窗口，然后修改地址。如:
var tempwindow=window.open('_blank'); 呵呵哒，你以为这样就完事了？大错特错了，以上办法也就是在已声明url下有效，如果异步ajax请求获取下载路径呢？
解决1：
click: () => { var tempwindow=window.open();//先打开临时窗体，由于是点击事件内触发，不会被拦截 this.$http.get(url+id, {emulateJSON: true} ).then(response => { let resd = response.data; if(resd.code==0){ tempwindow.location.href = resd.result//当回调的时候更改临时窗体的路径 } else{ tempwindow.close()//回调发现无需打开窗体时可以关闭之前的临时窗体 this.$Message.error(resd.message) } }, response => { tempwindow.close()//回调发现无需打开窗体时可以关闭之前的临时窗体 console.log('error:', response) //for debug });} 解决2：
click: () => { var flag = false; $.ajax({ 'url': url+id, 'type': 'post', 'dataType': 'json', 'data': data, 'async':false,//同步请求 success: function (data) { $("#a").attr("href","www.baidu.com");//当回调的时候更改页面上或创建的某个a标签的href flag = true;//更改标志 }, error:function(){ } }); if(flag){ $("#a")[0].click();//href属性更改后模拟点击 } }