• 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);
    
                }
            
            }
        });
    
  • 相关阅读:
    英文词频统计预备,组合数据类型练习
    凯撒密码、GDP格式化输出、99乘法表
    字符串基本操作
    条件、循环、函数定义 练习
    Turtle库基础练习
    Python基础练习
    理解管理信息系统
    HTML鼠标划过更换图片(透视X-ray)
    谷歌浏览器默认允许flash运行
    鼠标单击烟花效果
  • 原文地址:https://www.cnblogs.com/imtudou/p/11251953.html
Copyright © 2020-2023  润新知