Firefox下代码触发a标签的click事件无效

Posted 2022-05-18 imtudou

通过一次导出功能是让自己如何一步一步掉坑最后又是怎么爬起来的

在页面中通过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的安全机制不允许开发这么做，后面就做了兼容，关键代码如下：

           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下载文件却只执行最后一个,每次都跑到了,但是只下载了循环的最后一个,这是因为页面跳转和下载是异步的，上一条还没来得及跳转呢，你又跳转了

网上看到有人说判断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);

            
        
        
    );