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

JeOam 發布于2019-08-22 18:16 / 3127人閱讀

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

最近公司開發的一個項目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會在當前窗口直接打開，影響用戶體驗，嘗試各種方案和百度總結一下幾點；

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

超鏈接Welcome

等效于js代碼

window.location.; //在同當前窗口中打開窗口

超鏈接Welcome

等效于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屬性更改后模擬點擊   
   }  
}

云服務器 GPU云服務器彈出窗口被攔截新窗口打開打開新窗口 ajax打開新窗口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95678.html

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

摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時時間不能太短，否則也會被攔截。我們會遇到想要彈出一個窗口，可是卻是在事件執行后，才去彈出來的，這時就會被瀏覽器攔截，我們可以通過下面的方法來避免先用打開一個窗口，然后修改地址。最近公司開發的一個項目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會在當前窗口直接打開，影響用戶體驗，嘗試各種方案和百...

Ajian 2019-08-02 10:45 評論0 收藏0
window.open 打開新窗口被攔截的解決方案

摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時時間不能太短，否則也會被攔截。我們會遇到想要彈出一個窗口，可是卻是在事件執行后，才去彈出來的，這時就會被瀏覽器攔截，我們可以通過下面的方法來避免先用打開一個窗口，然后修改地址。最近公司開發的一個項目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會在當前窗口直接打開，影響用戶體驗，嘗試各種方案和百...

Object 2019-08-30 15:53 評論0 收藏0
js 打開新窗口方式

摘要：之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入就會下載那個文件了。之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入 url 就會下載那個文件了。當時我只是簡單得使用 window.open ，但是卻會被瀏覽器進行攔截，要手動開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結一下解決下載功能這里就先說解決下載功能的方法，通過同事...

mgckid 2019-08-21 17:21 評論0 收藏0
js 打開新窗口方式

摘要：之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入就會下載那個文件了。之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入 url 就會下載那個文件了。當時我只是簡單得使用 window.open ，但是卻會被瀏覽器進行攔截，要手動開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結一下解決下載功能這里就先說解決下載功能的方法，通過同事...

Jensen 2019-08-01 17:54 評論0 收藏0