Firefox下代碼觸發a標籤的click事件無效

經過一次導出功能是讓本身如何一步一步掉坑最後又是怎麼爬起來的

在頁面中經過document.createElement('a');建立一個a標籤,而後給a標籤的href屬性賦url,經過代碼觸發a標籤的click事件請求後臺,在Chrome瀏覽器中請求正常,可是在Firefox中始終無效,debugger發現代碼也走到了a.click()方法,可是就是沒反應。代碼以下:程序員

$.ajax({
        url: Config.ApiUrl + "TZTZ/DowloadFile", 
        type: "Post",
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(datas),
        success: function (data) {
            debugger
            var strs = new Array(); //定義數組 
            if (data.Code == 200) {
                strs = data.Data.split(";"); //字符分割 
                console.info(strs);
                for (i = 0; i < strs.length; i++) {
                    if (strs[i] == ";" || strs[i] == "")
                        break;

                    var requestUrl = Config.ApiSite + "/Upload/Excel/" + strs[i];
                    console.info(requestUrl);
                    var a = document.createElement('a');
                    // 利用URL.createObjectURL()方法爲a元素生成blob URL
                    a.href = requestUrl;
                    // 給文件命名
                    a.download = strs[i];
                    // 模擬點擊(Firefox安全機制禁止了客戶端程序員模擬點擊)
                    a.click();
                } 
            } else {
                alert("導出異常:" + data.msg);

            }
        
        }
    });

第一次是直接建立一個a標籤去經過a標籤的download屬性模擬用戶點擊,可是發現a標籤在火狐瀏覽器上是失效的,經過百度得出答案是由於火狐瀏覽器的同源策略不容許用戶模擬點擊事件也多是由於Firefox的安全機制不容許開發這麼作,後面就作了兼容,關鍵代碼以下:ajax

if (navigator.userAgent.indexOf("Firefox") > -1){
                    //判斷是否Firefox瀏覽器
                    //window.open(requestUrl);
                    window.location.href = requestUrl;
           }else {
                    var a = document.createElement('a');
                    // 利用URL.createObjectURL()方法爲a元素生成blob URL
                    a.href = requestUrl;
                    // 給文件命名
                    a.download = strs[i];
                    // 模擬點擊
                    a.click();
            }

注意:這樣經過重定向取作導出excel對於單條數據是沒問題的,可是導出多條對的話就會發現
循環window.location.href下載文件卻只執行最後一個,每次都跑到了,可是隻下載了循環的最後一個,這是由於頁面跳轉和下載是異步的,上一條還沒來得及跳轉呢,你又跳轉了json

網上看到有人說判斷document.all來決定怎樣調用click事件數組

if(document.all) {
  a.click();
} else {  
    var evt = document.createEvent("MouseEvents");  
    evt.initEvent("click",true,true);  
    a.dispatchEvent(evt); 
}

可是仍然不行,再次debugger發現,在Firefox下document.all不爲空,所以仍是執行的a.click()方法,改成不判斷document.all,直接建立鼠標事件對象調用。最後完整代碼以下:瀏覽器

$.ajax({
        url: Config.ApiUrl + "TZTZ/DowloadFile", 
        type: "Post",
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(datas),
        success: function (data) {
            debugger
            var strs = new Array(); //定義數組 
            if (data.Code == 200) {
                strs = data.Data.split(";"); //字符分割 
                console.info(strs);
                for (i = 0; i < strs.length; i++) {
                    if (strs[i] == ";" || strs[i] == "")
                        break;

                    var requestUrl = Config.ApiSite + "/Upload/Excel/" + strs[i];
                    console.info(requestUrl);
                    var a = document.createElement('a');
                    // 利用URL.createObjectURL()方法爲a元素生成blob URL
                    a.href = requestUrl;
                    // 給文件命名
                    a.download = strs[i];
                    // 模擬點擊(Firefox安全機制禁止了客戶端程序員模擬點擊)
                    //a.click();
                    var evt = document.createEvent("MouseEvents");
                    evt.initEvent("click", true, true);
                    a.dispatchEvent(evt); 
                } 
                
            
               

          
            } else {
                alert("導出異常:" + data.msg);

            }
        
        }
    });
相關文章
相關標籤/搜索