近來公司開闢的一個項目，尋經常運用到下載種種類型的文件，然則比方.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屬性變動后模仿點擊   
   }  
}