怎么使用 JavaScript 来识别不同的浏览器？
在前端快速发展的今天， JavaScript 代码可以在不同的运行环境中执行。为了更好的适应各种运行环境，需要判断当前代码是在哪个运行环境中执行的，下面提供Vue是如何判断运行环境的：
vue/src/core/util/env.js在文件的第 6 行开始，代码如下：
// Browser environment sniffing
export const inBrowser = typeof window !== 'undefined'
export const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
export const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE = UA && /msie|trident/.test(UA)
export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
export const isEdge = UA && UA.indexOf('edge/') > 0
export const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
export const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
export const isPhantomJS = UA && /phantomjs/.test(UA)
export const isFF = UA && UA.match(/firefox\/(\d+)/)
下面是一个使用 Peter-Paul Koch 的脚本检测用户的浏览器和版本：
const BrowserDetect = {
init: function () {
this.browser =
this.searchString(this.dataBrowser) || "An unknown browser";
this.version =
this.searchVersion(navigator.userAgent) ||
this.searchVersion(navigator.appVersion) ||
"an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
const dataString = data[i].string;
const dataProp = data[i].prop;
this.versionSearchString =
data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
} else if (dataProp) return data[i].identity;
}
},
searchVersion: function (dataString) {
const index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(
dataString.substring(index + this.versionSearchString.length + 1)
);
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome",
},
{
string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb",
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version",
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version",
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab",
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror",
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox",
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino",
},
{
// for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape",
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE",
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv",
},
{
// for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla",
},
],
dataOS: [
{
string: navigator.platform,
subString: "Win",
identity: "Windows",
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac",
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod",
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux",
},
],
};
BrowserDetect.init();
const browser = BrowserDetect.browser;
const version = BrowserDetect.version;
console.log(browser);
console.log(version);
THE END
