JS获取系统和浏览器信息

文章导航 系统定义浏览器定义系统和 *** 作系统信息获取

---

声明：全文手撸代码，移动端部分场景未经完全测试。

🐞 放弃兼容 IE 浏览器；仅支持识别主流浏览器，不能精确识别国产浏览器！当然，有兴趣的话可以拓展 UA 标识来识别更多浏览器。

系统定义

'use strict';
function _OS(name, identifier) {
  this.name = name;
  this.identifier = identifier;
}
_OS.prototype.getVersion = () => '';

// Apple device 苹果设备
const getAppleVersion = (ua) => {
  const [versionInfo] = ua.match(/ [0-9]+(_|.)?[0-9]*(_|.)?[0-9]*/gi);
  const osVersion = versionInfo.trim()?.replaceAll('_', '.');
  return osVersion || '';
};

// iOS
const iOS = new _OS('iOS', ['iPhone', 'iPhone OS']);
iOS.getVersion = getAppleVersion;
// iPad
const iPadOS = new _OS('iPad', ['iPad']);
iPadOS.getVersion = getAppleVersion;
// MacOS
const MacOS = new _OS('Mac OS', ['Macintosh', 'Mac OS']);
MacOS.getVersion = getAppleVersion;

// Windows PC
const windowsOS = [
  {
    name: '10',
    identifier: ['10', '10.0']
  },
  {
    name: '7',
    identifier: ['6.1']
  },
  {
    name: '8',
    identifier: ['6.3']
  },
  {
    name: 'XP',
    identifier: ['5.1']
  }
];
const Windows = new _OS('Windows', ['Windows']);
Windows.getVersion = (ua) => {
  const [versionInfo] = ua.match(/ ?Windows NT [0-9]+.?[0-9]*/g);
  const osVersion = versionInfo.trim()?.replaceAll('Windows NT', '');
  const matchVersion = windowsOS.find((identifier) => identifier.some((id) => id === osVersion))?.['name'];
  return matchVersion || '';
};

const Android = new _OS('Android', ['Android']);
Android.getVersion = (ua) => {
  const [versionInfo] = ua.match(/ ?Android [0-9]+.?[0-9]*/g);
  const osVersion = versionInfo.trim()?.replaceAll('Android', '');
  return osVersion || '';
};

const Linux = new _OS('Linux', ['Linux']);

const systems = [iOS, iPadOS, MacOS, Windows, Android, Linux];

export { systems as default, iOS, iPadOS, MacOS, Windows, Android, Linux };

浏览器定义

'use strict';
function _Browser(name, identifier) {
  this.name = name;
  this.identifier = identifier;
}

// 获取版本默认方式
_Browser.prototype.getVersion = function (ua) {
  const { identifier = '' } = this;
  const [versionInfo] = ua.match(new RegExp(`(Version|${identifier})\/[0-9]+(\.?[0-9]*)*`, 'gi')) || [];
  const [_versionInfo] = (versionInfo||'').trim().split(' '); //如果同时存在 Version 和 identifier 时
  const [, version] = (_versionInfo||'').trim().split('/');
  return (version ?? '').trim();
};
const Firefox = new _Browser('Firefox', 'Firefox');
const Opera = new _Browser('Opera', 'OPR');
const MicrosoftEdge = new _Browser('Microsoft Edge', 'Edg');
const Edge = new _Browser('Edge', 'Edge');
const Safari = new _Browser('Safari', 'Safari');
const Chrome = new _Browser('Chrome', 'Chrome');

const browsers = [Firefox, Opera, MicrosoftEdge, Edge, Chrome, Safari];
export { browsers as default, Firefox, Opera, MicrosoftEdge, Edge, Safari, Chrome };

系统和 *** 作系统信息获取

import browsers from './browsers';
import systems from './systems';

/**
 * @description 获取 *** 作系统信息
 * @returns {Object}
 */
export const getOSInfo = () => {
  const { userAgent } = navigator;
  const osInfo = systems.find(({ identifier }) => identifier.some((id) => userAgent.includes(id)));
  const osVersion = osInfo.getVersion(userAgent);
  return {
    osName: osInfo.name,
    osVersion
  };
};
/**
 * @description 获取浏览器信息
 * @returns {Object}
 */
export const getBrowserInfo = () => {
  const { userAgent } = navigator;
  const browserInfo = browsers.find(({ identifier }) => userAgent.includes(identifier));
  const browserVersion = browserInfo.getVersion(userAgent); // 系统名称

  return {
    browserName: browserInfo.name,
    browserVersion
  };
};

/**
 * @description 判断是否移动设备
 * @returns {Boolean} true: 移动端 & false: PC 端
 */
export const isMobile = () => {
  const isMatch = !!window.navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  );
  return isMatch;
};

/**
 * @description 获取全部设备信息
 * @returns {Object}
 */
export const getDeviceInfo = () => {
  return {
    ...getOSInfo(),
    ...getBrowserInfo(),
    isMobile: isMobile()
  };
};

export { getDeviceInfo as default };