我有5个插件/扩展Firefox, Chrome, Internet Explorer(IE)， Opera和Safari。
我如何正确识别用户浏览器和重定向(一旦安装按钮已被点击)下载相应的插件?
当前回答
您可以使用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;
}
}
};
其他回答
您可以尝试以下方法检查浏览器版本。
<!DOCTYPE html>
<html>
<body>
<p>What is the name(s) of your browser?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )
{
alert('Opera');
}
else if(navigator.userAgent.indexOf("Edg") != -1 )
{
alert('Edge');
}
else if(navigator.userAgent.indexOf("Chrome") != -1 )
{
alert('Chrome');
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
alert('Safari');
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
alert('Firefox');
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
alert('IE');
}
else
{
alert('unknown');
}
}
</script>
</body>
</html>
如果你只需要知道IE浏览器版本，那么你可以遵循下面的代码。这段代码适用于IE6到IE11版本
<!DOCTYPE html>
<html>
<body>
<p>Click on Try button to check IE Browser version.</p>
<button onclick="getInternetExplorerVersion()">Try it</button>
<p id="demo"></p>
<script>
function getInternetExplorerVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var rv = -1;
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
//For IE 11 >
if (navigator.appName == 'Netscape') {
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1);
alert(rv);
}
}
else {
alert('otherbrowser');
}
}
else {
//For < IE11
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
return false;
}}
</script>
</body>
</html>
简单的一行JavaScript代码会告诉你浏览器的名称:
function GetBrowser()
{
return navigator ? navigator.userAgent.toLowerCase() : "other";
}
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
还有一种不那么“hack”的方法，适用于所有流行的浏览器。 谷歌在他们的闭包库中包含了一个浏览器检查。特别是，看看goog。userAgent和google .userAgent.product。通过这种方式，如果浏览器显示自身的方式发生了变化(假定您总是运行闭包编译器的最新版本)，您也可以了解最新情况。
google浏览器可靠检测的结果通常是检查User代理字符串。这个方法不可靠，因为欺骗这个值很简单。 我已经编写了一个通过duck-typing检测浏览器的方法。
只有在确实有必要时才使用浏览器检测方法，例如显示特定于浏览器的安装扩展指令。尽可能使用特征检测。
演示:https://jsfiddle.net/6spj1059/
// Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification)); // Internet Explorer 6-11 var isIE = /*@cc_on!@*/false || !!document.documentMode; // Edge 20+ var isEdge = !isIE && !!window.StyleMedia; // Chrome 1 - 79 var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); // Edge (based on chromium) detection var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1); // Blink engine detection var isBlink = (isChrome || isOpera) && !!window.CSS; var output = 'Detecting browsers by ducktyping:<hr>'; output += 'isFirefox: ' + isFirefox + '<br>'; output += 'isChrome: ' + isChrome + '<br>'; output += 'isSafari: ' + isSafari + '<br>'; output += 'isOpera: ' + isOpera + '<br>'; output += 'isIE: ' + isIE + '<br>'; output += 'isEdge: ' + isEdge + '<br>'; output += 'isEdgeChromium: ' + isEdgeChromium + '<br>'; output += 'isBlink: ' + isBlink + '<br>'; document.body.innerHTML = output;
可靠性分析
前一种方法依赖于呈现引擎的属性(-moz-box-sizing和-webkit-transform)来检测浏览器。这些前缀最终将被删除，所以为了使检测更加健壮，我切换到特定于浏览器的特征:
Internet Explorer: JScript's Conditional compilation (up until IE9) and document.documentMode. Edge: In Trident and Edge browsers, Microsoft's implementation exposes the StyleMedia constructor. Excluding Trident leaves us with Edge. Edge (based on chromium): The user agent include the value "Edg/[version]" at the end (ex: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.16 Safari/537.36 Edg/80.0.361.9"). Firefox: Firefox's API to install add-ons: InstallTrigger Chrome: The global chrome object, containing several properties including a documented chrome.webstore object. Update 3 chrome.webstore is deprecated and undefined in recent versions Safari: A unique naming pattern in its naming of constructors. This is the least durable method of all listed properties and guess what? In Safari 9.1.3 it was fixed. So we are checking against SafariRemoteNotification, which was introduced after version 7.1, to cover all Safaris from 3.0 and upwards. Opera: window.opera has existed for years, but will be dropped when Opera replaces its engine with Blink + V8 (used by Chromium). Update 1: Opera 15 has been released, its UA string looks like Chrome, but with the addition of "OPR". In this version the chrome object is defined (but chrome.webstore isn't). Since Opera tries hard to clone Chrome, I use user agent sniffing for this purpose. Update 2: !!window.opr && opr.addons can be used to detect Opera 20+ (evergreen). Blink: CSS.supports() was introduced in Blink once Google switched on Chrome 28. It's of course, the same Blink used in Opera.
成功测试:
Firefox 0.8 - 61 Chrome 1.0 - 71 Opera 8.0 - 34 Safari 3.0 - 10 Ie 6 - 11 Edge - 20-42 Edge Dev - 80.0.361.9
2016年11月更新，包括检测9.1.3及以上版本的Safari浏览器 2018年8月更新，更新chrome, firefox IE和edge上的最新成功测试。 2019年1月更新，修复了chrome检测(因为window.chrome.webstore已弃用)，并包括最新成功的chrome测试。 2019年12月更新，添加了基于铬检测的Edge(基于@Nimesh评论)。
