我有5个插件/扩展Firefox, Chrome, Internet Explorer(IE), Opera和Safari。
我如何正确识别用户浏览器和重定向(一旦安装按钮已被点击)下载相应的插件?
我有5个插件/扩展Firefox, Chrome, Internet Explorer(IE), Opera和Safari。
我如何正确识别用户浏览器和重定向(一旦安装按钮已被点击)下载相应的插件?
当前回答
我知道这可能是使用一个库,但只是为了丰富线程,你可以检查is.js的方式:
is.firefox();
is.ie(6);
is.not.safari();
其他回答
如果您需要知道某个特定浏览器的数字版本是什么,可以使用下面的代码片段。目前它会告诉你Chrome/Chromium/Firefox的版本:
var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
短变体(更新2020年7月10日移动浏览器检测修复)
var browser = (function() { var test = function(regexp) {return regexp.test(window.navigator.userAgent)} switch (true) { case test(/edg/i): return "Microsoft Edge"; case test(/trident/i): return "Microsoft Internet Explorer"; case test(/firefox|fxios/i): return "Mozilla Firefox"; case test(/opr\//i): return "Opera"; case test(/ucbrowser/i): return "UC Browser"; case test(/samsungbrowser/i): return "Samsung Browser"; case test(/chrome|chromium|crios/i): return "Google Chrome"; case test(/safari/i): return "Apple Safari"; default: return "Other"; } })(); console.log(browser)
打字文件版本:
export enum BROWSER_ENUM {
EDGE ,
INTERNET_EXPLORER ,
FIRE_FOX ,
OPERA ,
UC_BROWSER ,
SAMSUNG_BROWSER ,
CHROME ,
SAFARI ,
UNKNOWN ,
}
const testUserAgent = (regexp: RegExp): boolean => regexp.test(window.navigator.userAgent);
function detectBrowser(): BROWSER_ENUM {
switch (true) {
case testUserAgent(/edg/i): return BROWSER_ENUM.EDGE;
case testUserAgent(/trident/i): return BROWSER_ENUM.INTERNET_EXPLORER;
case testUserAgent(/firefox|fxios/i): return BROWSER_ENUM.FIRE_FOX;
case testUserAgent(/opr\//i): return BROWSER_ENUM.OPERA;
case testUserAgent(/ucbrowser/i): return BROWSER_ENUM.UC_BROWSER;
case testUserAgent(/samsungbrowser/i): return BROWSER_ENUM.SAMSUNG_BROWSER;
case testUserAgent(/chrome|chromium|crios/i): return BROWSER_ENUM.CHROME;
case testUserAgent(/safari/i): return BROWSER_ENUM.SAFARI;
default: return BROWSER_ENUM.UNKNOWN;
}
}
export const BROWSER: BROWSER_ENUM = detectBrowser();
export const IS_FIREFOX = BROWSER === BROWSER_ENUM.FIRE_FOX;
函数式算法,只是为了好玩:
const BROWSER = Object.entries({
"Microsoft Edge": /edg/i,
"Microsoft Internet Explorer": /trident/i,
"Mozilla Firefox": /firefox|fxios/i,
"Opera": /opr\//i,
"UC Browser": /ucbrowser/i,
"Samsung Browser": /samsungbrowser/i,
"Google Chrome": /chrome|chromium|crios/i,
"Apple Safari": /safari/i,
"Unknown": /.+/i,
}).find(([, value]) => value.test(window.navigator.userAgent)).pop();
以下是2016年Rob的答案调整版本,包括Microsoft Edge和Blink检测:
(编辑:我用这些信息更新了Rob的答案。)
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera) isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); // Internet Explorer 6-11 isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ isEdge = !isIE && !!window.StyleMedia; // Chrome 1+ isChrome = !!window.chrome && !!window.chrome.webstore; // Blink engine detection isBlink = (isChrome || isOpera) && !!window.CSS; /* Results: */ console.log("isOpera", isOpera); console.log("isFirefox", isFirefox); console.log("isSafari", isSafari); console.log("isIE", isIE); console.log("isEdge", isEdge); console.log("isChrome", isChrome); console.log("isBlink", isBlink);
这种方法的美妙之处在于它依赖于浏览器引擎属性,因此它甚至涵盖了衍生浏览器,如Yandex或Vivaldi,这些浏览器实际上与它们所使用的引擎的主要浏览器兼容。例外是Opera,它依赖于用户代理嗅探,但是今天(即ver。15岁及以上)甚至Opera本身也只是Blink的一个外壳。
您可以使用try和catch来使用不同的浏览器错误消息。 IE和edge被混淆了,但我使用了Rob W的duck typing(基于这个项目:https://www.khanacademy.org/computer-programming/i-have-opera/2395080328)。
var getBrowser = function() {
try {
var e;
var f = e.width;
} catch(e) {
var err = e.toString();
if(err.indexOf("not an object") !== -1) {
return "safari";
} else if(err.indexOf("Cannot read") !== -1) {
return "chrome";
} else if(err.indexOf("e is undefined") !== -1) {
return "firefox";
} else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
if(!(false || !!document.documentMode) && !!window.StyleMedia) {
return "edge";
} else {
return "IE";
}
} else if(err.indexOf("cannot convert e into object") !== -1) {
return "opera";
} else {
return undefined;
}
}
};
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"},
{string: navigator.userAgent, subString: "OPR", identity: "Opera"},
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"}
]
};
BrowserDetect.init();
var bv= BrowserDetect.browser;
if( bv == "Chrome"){
$("body").addClass("chrome");
}
else if(bv == "MS Edge"){
$("body").addClass("edge");
}
else if(bv == "Explorer"){
$("body").addClass("ie");
}
else if(bv == "Firefox"){
$("body").addClass("Firefox");
}
$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
'width' : '100%',
'margin-left' : '0px',
});
});