window.open to open a new window solutions intercepted

The company recently developed a project, use ordinary download files of various types, but such as .txt, .jpg, .pdf format file browser, it will open in the current window directly affect the user experience, try a variety of programs and Baidu summarize points;

---

principle:

When the user trigger window.open event or internal loads, will not be intercepted, the code will pop up once to move inside or some ajax asynchronous code, immediately appeared to be intercepted performance (the browser thinks this may be an advertisement, not a user wants to see the page)

Open commonly used way to page :

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

   Js code is equivalent to

   window.location.href = "https://www.baidu.com"; // open in the same window the current window

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

   Js code is equivalent to

   window.open ( "https://www.baidu.com/"); // open new window in another window

3. Close the new window: this.window.opener = null; window.close ();

---

solution:

• Alternative use of a tag:

Gives the following function, this function is bound to the click event callback, you can avoid most of the browser window pop-up blocking:

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执行跳转

• Adding onclick event hyperlink years, such as:

// so the user clicks on the hyperlink, the browser will think it is to open a new link, it will not be intercepted.

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

• Use setTimeout packaged, can also be blocked to prevent the browser.

// Note timeout here is not too short, otherwise it will be blocked.

setTimeout('window.open(url);', 500);

• We want to encounter a pop-up window, but it is executed after onckick event, before going to pop up, then it will be intercepted browser, we can be avoided by the following method

// First open a window with window.open, then modify the address. Such as:

var tempwindow=window.open('_blank');

---

Oh da, do you think this get away? Wrong, way more than that is declared effective under the url, if the asynchronous ajax requests for downloading trails?

1 resolved:

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
    });
}

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