识别浏览器类型-在360中开发ftp跳转下载极速版本文件有乱码情况下载后不能识别

项目中用到tpf,点击事件跳转到后端tpf源文件地址下载,在其它浏览器都正常

在360浏览器的极速版浏览器会出问题:

点击下载会在本页面跳转空白页下载后文件名只要包含括号,空格,稀有单位符号,都会解析成乱码切只解析到第一个出现乱码的地方,后面就不会再解析,导致下载的文件没有后缀名(已经不再往后解析的原因)

因此就无法直接打开(下载还是能下,只不过文件名不全,也没有后缀)

解决这个问题其实也只有再360极速浏览器中常出现这现象。

而且你不能直接改下载名字,因为下载机制时内核内的,下载是通过访问后端接口的跳转路径文件解析的

所以更改a连接或者用utf8解码(浏览器解码不同的原因导致的乱码因此用解码)是会改变访问路径的,因此如果前端改名或解码就访问不到下载文件了

首先解决第一个问题,即跳转到空白页面导致只能手动返回,如果是个下载列表,每次手动返回都要重新输入获得下载列表,如果需要很多下载,这时候就不现实了

所以解决方案在识别360快速浏览器时用window.open(url)在新页面中打开下载,然后关闭下载页,这样原网页下载列表就不会受影响了

解决第二个问题只能从后端去utf8解码,或者更改名字,因为浏览器访问并下载时不受前端脚本控制的,它会自动读取到路径并自动下载保存,保存名即为访问并下载时的路径

如果不确定可以尝试下,不管是用h5新特性download='文件名'还是分开事件方式都浏览器都会默认用访问的路径名做保存名,这是一个整体事件。网上找的大神的用的更改流文件的方式也会报xhr找不到或不支持

但是如果更改url地址名的话那么文件又访问不到:所以要么让上传时候更改或规范文件命名(只要不出现括号空格和稀有字符基本就没大问题)

要么就是更改浏览器(360极速浏览器的原版开发人员建议要么改浏览器要么改老版本9.0...),或者就是让后端给映射一个,把实际数据地址映射到后端指定数据库然后具体就是后端讨论的事情了

扩展:

360浏览器识别问题:

 check360(){
          console.log(window.navigator.userAgent,'useragent')
          var is360 = false;
          var isIE = false;
          var isFirefox = false;
          var isChrome = false;
          var isEdge = false;
          var broName = 'Runing';
          var userAgent = window.navigator.userAgent; //包含以下属性中所有或一部分的字符串:appCodeName,appName,appVersion,language,platform
          //360极速模式可以区分360安全浏览器和360极速浏览器
          if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") < 0 && userAgent.indexOf("Firefox") < 0) {
          if(navigator.javaEnabled()){
          is360 = true;
          this.is360 = true;
          broName = '360安全浏览器-极速模式';
          this.broName = broName
          }else{
          is360 = true;
          this.is360 = true;
          broName = '360极速浏览器-极速模式';
          this.broName = broName
          } 
          }
          //360兼容
          if (userAgent.indexOf('WOW') != -1 && userAgent.indexOf("NET") != -1 && userAgent.indexOf("MSIE") != -1 && userAgent.indexOf("rv") < 0) {
          is360 = true;
          this.is360 = true;
          broName = '360兼容模式';
          this.broName = broName;
          }
          console.log('是否360?模式是:',this.is360,this.broName)
      },

使用时直接调用即可:

 this.check360()

 更详细的浏览器辨识信息可以参考这篇文章:

https://www.cnblogs.com/muscleape/p/6897356.html

posted @ 2020-07-29 15:24  少哨兵  阅读(523)  评论(0编辑  收藏  举报