admin 管理员组

文章数量: 887017

 最近有个需求需要在低版本浏览器中对用户进行提示（应用系统支持浏览器版本有要求），所以整理了一下目前主流浏览器各版本的获取方式，以下是具体代码：

（包括IE、谷歌、360、火狐、欧朋、Safari、Edge、qq、UC，返回浏览器名称+版本号）

declare interface IBrowserListProps {
  'IE': boolean;
  'IE>11': boolean;
  Chrome: boolean;
  Firefox: boolean;
  Opera: boolean;
  Safari: boolean;
  Edge: boolean;
  qq: boolean;
  UC: boolean;
  [key: string]: boolean;
}

declare interface IBrowserReturnProps {
  type: string;
  versions: number;
}

// 判断是否是360浏览器
const isBrowser360 = (mimeTypes: any) => {
  for (let mt in mimeTypes) {
    // 检测是否是360浏览器(测试只有pc端的360才起作用)
    if (mimeTypes[mt]['type'] === 'application/360softmgrplugin') {
      return '360';
    }
  }
};

// 获取浏览器信息 类型、版本号
export const getBrowser = () => {
  const UserAgent = navigator.userAgent.toLowerCase();
  const browserInfo: IBrowserReturnProps = {
    type: 'unknown',
    versions: 0,
  };
  const browserArray: IBrowserListProps = {
    // IE
    'IE': UserAgent.indexOf("compatible") > -1 && UserAgent.indexOf("MSIE") > -1,
    'IE>11': window.ActiveXObject || 'ActiveXObject' in window,
    // Chrome浏览器
    Chrome: UserAgent.indexOf('chrome') > -1 && UserAgent.indexOf('safari') > -1,
    // 火狐浏览器
    Firefox: UserAgent.indexOf('firefox') > -1,
    // Opera浏览器
    Opera: UserAgent.indexOf('opera') > -1 || UserAgent.indexOf('opr') > -1,
    // safari浏览器
    Safari: UserAgent.indexOf('safari') > -1 && UserAgent.indexOf('chrome') === -1,
    // Edge浏览器
    Edge: UserAgent.indexOf('edg') > -1,
    // qq浏览器
    qq: /qqbrowser/.test(UserAgent),
    // UC浏览器
    UC: UserAgent.indexOf("UBrowser") > -1
  };
  for (let i in browserArray) {
    if (browserArray[i]) {
      let versions = '';
      let result = null;
      switch (i) {
        case 'IE':
          versions = UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)?.[2] ?? '';
          break;
        case 'Chrome':
          result = isBrowser360(navigator.mimeTypes);
          result && (i = result);
          versions = UserAgent.match(/chrome\/([\d.]+)/)?.[1] ?? '';
          break;
        case 'Firefox':
          versions = UserAgent.match(/firefox\/([\d.]+)/)?.[1] ?? '';
          break;
        case 'Opera':
          versions = UserAgent.match(/(?:opera|opr).([\d\.]+)/)?.[1] ?? '';
          break;
        case 'Safari':
          versions = UserAgent.match(/version\/([\d.]+)/)?.[1] ?? '';
          break;
        case 'Edge':
          versions = UserAgent.match(/edg\/([\d.]+)/)?.[1] ?? '';
          break;
        case 'qq':
          versions = UserAgent.match(/qqbrowser\/([\d.]+)/)?.[1] ?? '';
          break;
        case 'UC':
           versions = UserAgent.match(/ubrowser\/([\d.]+)/)?.[1] ?? '';
        default:
          break;
      }
      browserInfo.type = i;
      browserInfo.versions = parseInt(versions, 10);
    }
  }
  return browserInfo;
};

使用：

var browserInfo = getBrowser()
console.log(browserInfo)

本文标签： 浏览器 名称 版本 测试 信息

版权声明：本文标题：获取各个浏览器的版本信息及名称（已测试） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729173549h1326977.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。