ts获取浏览器名称和版本号

69次阅读

共计 2241 个字符，预计需要花费 6 分钟才能阅读完成。

刚刚完结苦楚的期末，开始寒假的学习。寒假用上了 mac mini，不必再为零碎的事件发愁。这个星期光跑我的项目了，起我的项目真是能遇到各种问题，再加上对新零碎不相熟，真是废了一番功夫。
本周老师让咱们先找个 issue 解决一个本人不会然而通过略微致力一下就能解决的问题。我找了一个对于浏览器导致的问题。

问题最终起因是一些浏览器的旧版本没有特定性能。会导致系统出错。最简略的当然是在用户通过这些浏览器去应用生成试卷性能时揭示一下该浏览器不反对此性能。而要实现最重要的就是去获取以后浏览器的名称和版本号。有了这两项，剩下的都迎刃而解。

从网上看教程，原来间接有内置字段有着对于浏览器的各种信息。要害是如何提取。咱们先把它全副打印进去看看。

console.log(window.navigator);

外面有各种字段，咱们找到咱们所须要的，别离在咱们的 appVersion 字段和 userAgent 字段里。然而换成火狐浏览器，只有 userAgent 字段里有，咱们抉择从 userAgent 中提取。
剩下的是怎么提取的问题。从网上看到的办法，先把所有字段变成全副小写，再匹配 firefox 或者 chrome 字符串。如果有，前面就是版本号。

public getExplorerInfo() {this.explorer = window.navigator.userAgent.toLowerCase();
    if (this.explorer.indexOf('msie') >= 0) {this.ver = this.explorer.match(/msie ([\d.]+)/)[1];
      return {type: 'IE', version: this.ver};
    } else if (this.explorer.indexOf('firefox') >= 0) {this.ver = this.explorer.match(/firefox\/([\d.]+)/)[1];
      return {type: 'Firefox', version: this.ver};
    } else if (this.explorer.indexOf('chrome') >= 0) {this.ver = this.explorer.match(/chrome\/([\d.]+)/)[1];
      return {type: 'Chrome', version: this.ver};
    }
}

而后打印进去看看
谷歌浏览器下

火狐浏览器下

如果是一些旧版本的问题，咱们还要限度一下版本号，这就用到了比拟版本号算法。

版本号大抵以下几个局部组成：*   主版本号
*   次版本号
*   修改版本号
*   编译版本号
示例：3.5.20.9527

大抵算法思路是，先将版本字符串依照 . 宰割，而后主版本与主版本比拟、次版本与次版本比拟，如此按序一级一级往后比拟，直到有分出大小。
很多版本号还带有字母，所以咱们不能用数字比拟，要用字符串比拟，在比拟前，咱们先判断位数大小，位数大的大于位数小的，比方 210 大于 30。
依据以上思路写出代码。

   /**
    * 比拟版本号的大小, 前者大则返回一个负数, 后者大返回一个正数, 相等则返回 0
    */
    public compareVersion(version1: string, version2: string) {if (version1 == null || version2 == null) {throw new Error('版本获取谬误');
        }
        console.log(version1);
        console.log(version2);
        this.versionArray1 = version1.split('\.'); // 留神此处为正则匹配，不能用 "."；this.versionArray2 = version2.split('\.');
        this.minLength = Math.min(this.versionArray1.length, this.versionArray2.length); // 取最小长度值
        this.idx = 0;
        this.diff = 0;
        while (this.idx < this.minLength
          && (this.diff = this.versionArray1[this.idx].length - this.versionArray2[this.idx].length) === 0 // 先比拟长度
          && (this.diff = this.versionArray1[this.idx].localeCompare(this.versionArray2[this.idx])) === 0) { // 再比拟字符
          ++this.idx;
        }

        // 如果曾经分出大小，则间接返回，如果未分出大小，则再比拟位数，有子版本的为大；this.diff = this.diff = (this.diff != 0) ? this.diff : this.versionArray1.length - this.versionArray2.length;
        return this.diff;
    }

打印进去看看

假如第二行为咱们预设的最低版本号，第一行为咱们以后浏览器版本号，第一行大于第二行，返回 1.

通过实现这两项办法，issue 的问题就能够解决了。然而，咱们获取浏览器名称只能挨个判断是否是 ie，火狐，谷歌。咱们无奈累出所有浏览器。然而对于开发者来说，咱们更心愿让用户去用什么浏览器，而不是不必什么浏览器。咱们测试所有浏览器的能用与否是项大工程，所以咱们就让用户用咱们制订的特定浏览器，比方谷歌和火狐。

正文完