zoukankan      html  css  js  c++  java
  • 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的安全机制不允许开发这么做,后面就做了兼容,关键代码如下:

    
               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);
    
                }
            
            }
        });
    
  • 相关阅读:
    UVA1349 Optimal Bus Route Design 最优巴士路线设计
    POJ3565 Ants 蚂蚁(NEERC 2008)
    UVA1663 Purifying Machine 净化器
    UVa11996 Jewel Magic 魔法珠宝
    NEERC2003 Jurassic Remains 侏罗纪
    UVA11895 Honorary Tickets
    gdb调试coredump(使用篇)
    使用 MegaCLI 检测磁盘状态并更换磁盘
    员工直接坦诚直来直去 真性情
    山东浪潮超越3B4000申泰RM5120-L
  • 原文地址:https://www.cnblogs.com/imtudou/p/11251953.html
Copyright © 2011-2022 走看看