window.open 打開新窗口被攔截的解決方案

Ajian 發(fā)布于2019-08-02 10:45 / 827人閱讀

摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時(shí)時(shí)間不能太短，否則也會(huì)被攔截。我們會(huì)遇到想要彈出一個(gè)窗口，可是卻是在事件執(zhí)行后，才去彈出來的，這時(shí)就會(huì)被瀏覽器攔截，我們可以通過下面的方法來避免先用打開一個(gè)窗口，然后修改地址。

最近公司開發(fā)的一個(gè)項(xiàng)目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會(huì)在當(dāng)前窗口直接打開，影響用戶體驗(yàn)，嘗試各種方案和百度總結(jié)一下幾點(diǎn)；

原理： 當(dāng)window.open為用戶觸發(fā)事件內(nèi)部或者加載時(shí)，不會(huì)被攔截，一旦將彈出代碼移動(dòng)到ajax或者一段異步代碼內(nèi)部，馬上就出現(xiàn)被攔截的表現(xiàn)了(瀏覽器認(rèn)為這可能是一個(gè)廣告，不是一個(gè)用戶希望看到的頁面) 常用辦法頁面打開方式：

超鏈接Welcome

等效于js代碼

window.location.; //在同當(dāng)前窗口中打開窗口

超鏈接Welcome

等效于js代碼

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

關(guān)閉新窗口：this.window.opener =null; window.close();

解決方案：

使用a標(biāo)簽替代：

給出如下函數(shù)，將此函數(shù)綁定到click的事件回調(diào)中，就可以避免大部分瀏覽器對窗口彈出的攔截：

function newWin(url, id) {  
    var a = document.createElement(‘a(chǎn)‘);  
    a.setAttribute(‘href‘, url);  
    a.setAttribute(‘target‘, ‘_blank‘);  
    a.setAttribute(‘id‘, id);  
    // 防止反復(fù)添加  
    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);
}

//調(diào)用方法newWin(url,"bbb") / openUrl(url)
//原理都是通過創(chuàng)建一個(gè)a標(biāo)簽對象，通過里面自帶的target執(zhí)行跳轉(zhuǎn)

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

//這樣用戶點(diǎn)擊這個(gè)超鏈接，瀏覽器會(huì)認(rèn)為它是打開一個(gè)新的鏈接，所以就不會(huì)攔截。

使用 setTimeout 包裝一下，也可以防止被瀏覽器攔截。

//注意這里的超時(shí)時(shí)間不能太短，否則也會(huì)被攔截。

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

我們會(huì)遇到想要彈出一個(gè)窗口，可是卻是在onckick事件執(zhí)行后，才去彈出來的，這時(shí)就會(huì)被瀏覽器攔截，我們可以通過下面的方法來避免

//先用window.open打開一個(gè)窗口，然后修改地址。如:

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

呵呵噠，你以為這樣就完事了？大錯(cuò)特錯(cuò)了，以上辦法也就是在已聲明url下有效，如果異步ajax請求獲取下載路徑呢？

解決1：

click: () => {
    var tempwindow=window.open();//先打開臨時(shí)窗體，由于是點(diǎn)擊事件內(nèi)觸發(fā)，不會(huì)被攔截 
    this.$http.get(url+id,
    {emulateJSON: true}
    ).then(response => {
        let resd = response.data;
        if(resd.code==0){
             tempwindow.location.href = resd.result//當(dāng)回調(diào)的時(shí)候更改臨時(shí)窗體的路徑
        }
        else{
            tempwindow.close()//回調(diào)發(fā)現(xiàn)無需打開窗體時(shí)可以關(guān)閉之前的臨時(shí)窗體
            this.$Message.error(resd.message)
        }
   }, response => {
        tempwindow.close()//回調(diào)發(fā)現(xiàn)無需打開窗體時(shí)可以關(guān)閉之前的臨時(shí)窗體
        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");//當(dāng)回調(diào)的時(shí)候更改頁面上或創(chuàng)建的某個(gè)a標(biāo)簽的href   
           flag = true;//更改標(biāo)志   
        },   
        error:function(){   
          
        }   
   });   
   if(flag){   
       $("#a")[0].click();//href屬性更改后模擬點(diǎn)擊   
   }  
}