window.open 打开新窗口被拦截的解决方案

最近公司开发的一个项目，平凡用到下载各种类型的文件，但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开，影响用户体验，尝试各种方案和百度总结一下几点；

---

原理：

当window.open为用户触发事件内部或者加载时，不会被拦截，一旦将弹出代码移动到ajax或者一段异步代码内部，马上就出现被拦截的表现了(浏览器认为这可能是一个广告，不是一个用户希望看到的页面)

常用办法页面打开方式：

1. 超链接<a href="https://www.baidu.com" title="">Welcome</a>

   等效于js代码

   window.location.href="https://www.baidu.com"; //在同当前窗口中打开窗口

2. 超链接<a href="https://www.baidu.com/" title=""target="_blank">Welcome</a>

   等效于js代码

   window.open("https://www.baidu.com/"); //在另外新建窗口中打开窗口

3. 关闭新窗口：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 = $('<a href="'+url+'" target="_blank"></a>')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent('click', true, true);
    a.dispatchEvent(e);
}

//调用方法newWin(url,'bbb') / openUrl(url)
//原理都是通过创建一个a标签对象，通过里面自带的target执行跳转

• 在超链接里加入onclick事件,如:

//这样用户点击这个超链接，浏览器会认为它是打开一个新的链接，所以就不会拦 截。

<a href="javascript:void(0)" onclick="window.open()"></a>

• 使用 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属性更改后模拟点击
   }
}