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

            }
        
        }
    });
相关文章
相关标签/搜索