Sử dụng Javascript để kiểm tra trình duyệt người dùng Cũng như CSS không phải tất cả các trình duyệt đều có mức độ hỗ trợ như nhau, sẽ có một số chức năng Javascript nào đó của bạn có thể sẽ không hoạt động trên một số trình duyệt cũ như IE6, IE7, hoặc IE8..., và cũng không phải tất cả các trình duyệt đều chạy trơn chu ứng dụng của bạn, có thể một số trình duyệt sẽ ngốn tài nguyên hệ
thống và bạn phải tìm cách để thay thế bằng một đoạn mã khác hoặc loại đoạn mã đó khỏi những trình duyệt mà bạn không mong muốn. Chúng ta đều biết khả năng xử lý Javascript của mỗi trình duyệt mỗi khác, sẽ là lý tưởng nếu ứng dụng Javascript của bạn đều chạy tốt trên tất cả các trình duyệt, nhưng thực tế thì không như vậy, trong bài này mình xin giới thiệu một đoạn mã đơn giản trong Javascript, nó sẽ kiểm tra người dùng đang sử dụng trình duyệt gì và phiên bản bao nhiêu từ đó bạn có thể
dễ ràng khắc phục javascript trên mỗi trình duyệt theo hướng của bạn. Ý tưởng để xây dựng đoạn mã là việc sử dụng thuộc tính navigator.userAgent, trong bài một số thuộc tính và phương thức của đối tượng Window mình đã có đề cập đến thuộc tính này, và đây là ví dụ điển hình cho ứng dụng của thuộc tính mà mình đã đề cập. Ngoài ra để xây dựng đoạn mã bạn còn cần phải biết các phương thức và thuộc tính của đối tượng chuỗi trong Javascript, chúng ta sẽ dùng nó để lọc thông tin cần thiết từ
đoạn chuỗi trả về của thuộc tính userAgnet. Sau đây sẽ là đoạn mã chương trình. Xây dựng hàm trả về tên trình duyệt Mã: function browserName(){
var Browser = navigator.userAgent;
if (Browser.indexOf('MSIE') >= 0){
Browser = 'MSIE';
}
else if (Browser.indexOf('Firefox') >= 0){
Browser = 'Firefox';
}
else if (Browser.indexOf('Chrome') >= 0){
Browser = 'Chrome';
}
else if (Browser.indexOf('Safari') >= 0){
Browser = 'Safari';
}
else if (Browser.indexOf('Opera') >= 0){
Browser = 'Opera';
}
else{
Browser = 'UNKNOWN';
}
return Browser;
}
Ở đoạn mã trên biến "Browser" sẽ lưu đoạn chuỗi trả về từ thuộc tính "userAgent", đoạn chuỗi sẽ chứa tên của trình duyệt nên chúng ta dùng phương thức indexOf() để kiểm tra tên trình duyệt trong đoạn chuỗi. Bản chất của phương thức indexOf() sẽ trả về vị trí của một đoạn chuỗi mà nó tìm thấy nên
nếu nó lớn hơn bằng không tức là nó đã trả về vị trí mà nó tìm được (chuỗi trong Javascript cũng là một mảng ký tự và được đánh chỉ mục bắt đầu từ 0). Xây dựng hàm trả về phiên bản trình duyệt Mã: function browserVersion(){
var index;
var version = 0;
var name = browserName();
var info = navigator.userAgent;
index = info.indexOf(name) + name.length + 1;
version = parseFloat(info.substring(index,index + 3));
return version;
}
Trong đoạn chuỗi trả về từ thuộc tính userAgent chúng ta thấy phiên bản của trình duyệt được ghi ngay sau tên trình duyệt và được ngăn cách bằng một ký tự có thể là dấu "/" hoặc một khoảng trắng, từ kết quả đó trong đoạn
mã trên tại dòng 6 chính là việc chúng ta lấy vị trí bắt đầu của đoạn chuỗi chứa thông tin phiên bản trình duyệt. ở dòng 7 chúng ta dùng phương thức substring() để tách ra một chuỗi con từ một chuỗi với đối số của phương thức chính là vị trí bắt đầu và vị trí kết thúc của đoạn chuỗi cần tách như ở trên chúng ta sẽ tách ra 3 ký tự. Ngoài ra chúng ta sẽ dùng hàm parseFloat() trong Javascript để trả về số thực từ đoạn chuỗi cần tách giả sử nếu tách được "10." thì sẽ thành "10"... Chúc các
bạn thành công. Nguồn: sothichweb.com Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.
I've written a
method to detect browsers by duck-typing. Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible. Demo: 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;
Analysis of reliabilityThe previous method depended on properties of the rendering engine (-moz-box-sizing and -webkit-transform) to detect the browser. These prefixes will eventually be dropped, so to make detection even more robust, I switched to browser-specific
characteristics: - 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.
Successfully tested in:- 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
Updated in November 2016 to include detection of Safari browsers from 9.1.3 and upwards Updated in August 2018 to update the latest successful tests on chrome, firefox IE and edge. Updated in January 2019 to fix chrome detection
(because of the window.chrome.webstore deprecation) and include the latest successful tests on chrome. Updated in December 2019 to add Edge based on Chromium detection (based on the @Nimesh comment).
73 You can try following way to check Browser version. <!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>
And if you need to know only IE Browser version then you can follow below code. This code works well for version IE6 to 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>
John Henckel 9,1333 gold badges70 silver badges77 bronze badges answered Oct 14, 2014 at
10:44 NimeshNimesh 3,0801 gold
badge27 silver badges32 bronze badges 14 Here are several prominent libraries that handle browser
detection as of Dec 2019. Bowser by lancedikson - 4,065★s - Last updated Oct 2, 2019 - 4.8KBvar result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
" v" + result.parsedResult.browser.version +
" on " + result.parsedResult.os.name);
<script src="https://unpkg.com//es5.js"></script>
*supports Edge based on Chromium
console.log(platform);
document.write("You are using " + platform.name +
" v" + platform.version +
" on " + platform.os);
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>
jQuery Browser by gabceb - 504★s - Last updated Nov 23, 2015 - 1.3KBconsole.log($.browser)
document.write("You are using " + $.browser.name +
" v" + $.browser.versionNumber +
" on " + $.browser.platform);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
Detect.js (Archived) by darcyclarke -
522★s - Last updated Oct 26, 2015 - 2.9KBvar result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
" v" + result.browser.version +
" on " + result.os.family);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>
Browser Detect (Archived) by QuirksMode - Last updated Nov 14, 2013 - 884Bconsole.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
" v" + BrowserDetect.version +
" on " + BrowserDetect.OS);
<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>
Notable Mentions:- WhichBrowser - 1,355★s - Last updated Oct 2, 2018
- Modernizr - 23,397★s - Last updated Jan 12, 2019 - To feed a fed horse, feature detection should drive any canIuse style questions. Browser detection is really just for providing customized images,
download files, or instructions for individual browsers.
Further Reading- Stack Overflow - Browser detection in JavaScript?
- Stack Overflow - How can you detect the version of a browser?
answered Mar 30, 2018 at 21:13
KyleMit♦KyleMit 34.2k61 gold badges427 silver badges617 bronze badges 1
I know it may be overkill to use a lib for that, but just to enrich the thread, you could check is.js way of doing this: is.firefox();
is.ie(6);
is.not.safari();
answered May 13, 2015 at 20:55 Rafael EyngRafael Eyng 4,3821 gold badge31 silver badges34 bronze
badges 6 In case anyone finds this useful, I've made Rob W's
answer into a function that returns the browser string rather than having multiple variables floating about. Since the browser also can't really change without loading all over again, I've made it cache the result to prevent it from needing to work it out the next time the function is called. /**
* Gets the browser name or returns an empty string if unknown.
* This function also caches the result to provide for any
* future calls this function has.
*
* @returns {string}
*/
var browser = function() {
// Return cached result if avalible, else get result then cache it.
if (browser.prototype._cachedResult)
return browser.prototype._cachedResult;
// 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'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
return browser.prototype._cachedResult =
isOpera ? 'Opera' :
isFirefox ? 'Firefox' :
isSafari ? 'Safari' :
isChrome ? 'Chrome' :
isIE ? 'IE' :
isEdge ? 'Edge' :
isBlink ? 'Blink' :
"Don't know";
};
console.log(browser());
answered Jul 17, 2015 at 15:19 Will SquireWill Squire 5,6206 gold badges39 silver badges52 bronze badges 7 Short variant (update 10 july 2020 mobile browser detection fix) 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)
answered Mar 23, 2018 at 11:02
Alex NikulinAlex Nikulin 7,3794 gold badges34 silver badges35 bronze badges 8 No idea if it is useful to
anyone but here is a variant that would make TypeScript happy: export function getBrowser() {
// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
return 'opera';
}
// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
return 'firefox';
}
// Safari 3.0+ "[object HTMLElementConstructor]"
if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
return 'safari';
}
// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document["documentMode"]) {
return 'ie';
}
// Edge 20+
if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
return 'edge';
}
// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
return 'chrome';
}
// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
return 'blink';
}
}
 Emma 26.9k10 gold badges41 silver
badges65 bronze badges answered Dec 5, 2018 at 16:21 Tony SmithTony Smith 8291 gold badge11 silver badges25 bronze badges 3 Here's a 2016 adjusted version of Rob's answer, including Microsoft Edge and detection of Blink: (edit: I updated Rob's answer above with this information.) // 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);
The beauty of this approach is that it relies on browser engine properties, so it covers
even derivative browsers, such as Yandex or Vivaldi, which are practically compatible with the major browsers whose engines they use. The exception is Opera, which relies on user agent sniffing, but today (i.e. ver. 15 and up) even Opera is itself only a shell for Blink. answered Jan 17, 2016 at 16:27 pilaupilau 6,5274 gold badges55 silver badges66 bronze badges 9 Thank you, everybody. I tested the code snippets here on the recent browsers: Chrome 55, Firefox 50, IE 11 and Edge 38, and I came up with the following combination that
worked for me for all of them. I'm sure it can be improved, but it's a quick solution for whoever needs: var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
browser_name = 'ie';
}
else if(isEdge)
{
browser_name = 'edge';
}
else
{
browser_name = 'other-browser';
}
$('html').addClass(browser_name);
It adds a CSS class to the HTML, with the name of the browser. answered Jan 31, 2017 at 8:12 dnnsdnns 3164 silver badges10 bronze badges 1 You can use try and catch to use the different browser error messages. IE and edge were mixed up, but I used the duck typing from Rob W (based on this project here:
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;
}
}
};
answered Oct 25, 2016 at 17:50 Mason JonesMason Jones 1413 silver badges7 bronze badges
6 If you need to know what is the numeric version of some particular browser you can use the following snippet. Currently it will tell you the version of
Chrome/Chromium/Firefox: var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
answered Mar 22, 2016 at 5:55 Detecting Browsers on Desktop and Mobile : Edge, Opera, Chrome, Safari,
Firefox, IE I did some changes in @nimesh code now it is working for Edge also, and Opera issue fixed:
function getBrowserName() {
if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
return 'Edge';
}
else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
{
return 'Opera';
}
else if( navigator.userAgent.indexOf("Chrome") != -1 )
{
return 'Chrome';
}
else if( navigator.userAgent.indexOf("Safari") != -1)
{
return 'Safari';
}
else if( navigator.userAgent.indexOf("Firefox") != -1 )
{
return 'Firefox';
}
else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
{
return 'IE';
}
else
{
return 'unknown';
}
}
Thanks @nimesh user:2063564 answered Jan 4, 2019 at 11:50
Irshad KhanIrshad Khan 5,3302 gold badges42 silver badges38 bronze badges 1 There is also a less "hacky" method which works for all popular browsers. Google has included a browser-check in their Closure Library. In particular, have a look at
goog.userAgent and goog.userAgent.product. In this way, you are also up to date if something changes in the way the browsers present themselves (given that you always run the latest version of the closure compiler.) answered Mar 23, 2017 at
3:56 AlbertAlbert 1531 silver badge7 bronze badges 1 UAParser is one of the JavaScript Library to identify browser, engine, OS, CPU, and device type/model from userAgent string. There's an CDN available. Here, I have included a example code to detect browser using UAParser. <!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
var parser = new UAParser();
var result = parser.getResult();
console.log(result.browser); // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>
Now you can use the value of result.browser to conditionally program your page. Source Tutorial:
How to detect browser, engine, OS, CPU, and device using JavaScript? answered May 23, 2018 at 6:30 Luzan BaralLuzan Baral 3,5405 gold badges37 silver badges66 bronze badges 1 Detecting Browser and Its version This code snippet is based on the article from
MDN. Where they gave a brief hint about various keywords that can be used to detect the browser name. The data shown in the image above is not sufficient for detecting all the browsers
e.g. userAgent of Firefox will have Fxios as a keyword rather than Firefox. A few changes are also done to detect browsers like Edge and UCBrowser The code is currently tested for the following browsers by changing userAgent with the help of dev-tools (How to change userAgent):
- FireFox
- Chrome
- IE
- Edge
- Opera
- Safari
- UCBrowser
getBrowser = () => {
const userAgent = navigator.userAgent;
let browser = "unkown";
// Detect browser name
browser = (/ucbrowser/i).test(userAgent) ? 'UCBrowser' : browser;
browser = (/edg/i).test(userAgent) ? 'Edge' : browser;
browser = (/googlebot/i).test(userAgent) ? 'GoogleBot' : browser;
browser = (/chromium/i).test(userAgent) ? 'Chromium' : browser;
browser = (/firefox|fxios/i).test(userAgent) && !(/seamonkey/i).test(userAgent) ? 'Firefox' : browser;
browser = (/; msie|trident/i).test(userAgent) && !(/ucbrowser/i).test(userAgent) ? 'IE' : browser;
browser = (/chrome|crios/i).test(userAgent) && !(/opr|opera|chromium|edg|ucbrowser|googlebot/i).test(userAgent) ? 'Chrome' : browser;;
browser = (/safari/i).test(userAgent) && !(/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i).test(userAgent) ? 'Safari' : browser;
browser = (/opr|opera/i).test(userAgent) ? 'Opera' : browser;
// detect browser version
switch (browser) {
case 'UCBrowser': return `${browser}/${browserVersion(userAgent,/(ucbrowser)\/([\d\.]+)/i)}`;
case 'Edge': return `${browser}/${browserVersion(userAgent,/(edge|edga|edgios|edg)\/([\d\.]+)/i)}`;
case 'GoogleBot': return `${browser}/${browserVersion(userAgent,/(googlebot)\/([\d\.]+)/i)}`;
case 'Chromium': return `${browser}/${browserVersion(userAgent,/(chromium)\/([\d\.]+)/i)}`;
case 'Firefox': return `${browser}/${browserVersion(userAgent,/(firefox|fxios)\/([\d\.]+)/i)}`;
case 'Chrome': return `${browser}/${browserVersion(userAgent,/(chrome|crios)\/([\d\.]+)/i)}`;
case 'Safari': return `${browser}/${browserVersion(userAgent,/(safari)\/([\d\.]+)/i)}`;
case 'Opera': return `${browser}/${browserVersion(userAgent,/(opera|opr)\/([\d\.]+)/i)}`;
case 'IE': const version = browserVersion(userAgent,/(trident)\/([\d\.]+)/i);
// IE version is mapped using trident version
// IE/8.0 = Trident/4.0, IE/9.0 = Trident/5.0
return version ? `${browser}/${parseFloat(version) + 4.0}` : `${browser}/7.0`;
default: return `unknown/0.0.0.0`;
}
}
browserVersion = (userAgent,regex) => {
return userAgent.match(regex) ? userAgent.match(regex)[2] : null;
}
console.log(getBrowser());
answered Aug 8, 2020 at 21:25 AnkitAnkit 5344 silver badges12 bronze badges 1 Here is my customized solution. const inBrowser = typeof window !== 'undefined'
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
const isIE =
UA && /; msie|trident/i.test(UA) && !/ucbrowser/i.test(UA).test(UA)
const isEdge = UA && /edg/i.test(UA)
const isAndroid = UA && UA.indexOf('android') > 0
const isIOS = UA && /iphone|ipad|ipod|ios/i.test(UA)
const isChrome =
UA &&
/chrome|crios/i.test(UA) &&
!/opr|opera|chromium|edg|ucbrowser|googlebot/i.test(UA)
const isGoogleBot = UA && /googlebot/i.test(UA)
const isChromium = UA && /chromium/i.test(UA)
const isUcBrowser = UA && /ucbrowser/i.test(UA)
const isSafari =
UA &&
/safari/i.test(UA) &&
!/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i.test(UA)
const isFirefox = UA && /firefox|fxios/i.test(UA) && !/seamonkey/i.test(UA)
const isOpera = UA && /opr|opera/i.test(UA)
const isMobile =
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
const isSamsung = UA && /samsungbrowser/i.test(UA)
const isIPad = UA && /ipad/.test(UA)
const isIPhone = UA && /iphone/.test(UA)
const isIPod = UA && /ipod/.test(UA)
console.log({
UA,
isAndroid,
isChrome,
isChromium,
isEdge,
isFirefox,
isGoogleBot,
isIE,
isMobile,
isIOS,
isIPad,
isIPhone,
isIPod,
isOpera,
isSafari,
isSamsung,
isUcBrowser,
}
}
answered Dec 1, 2020 at 19:14 You can use
Detect-browser.js, JavaScript library that detects and prints an object of browser information including browser language/name, user agent, device type, user OS, referer, online/0ffline, user timezone, screen resolution, and cookie enabled. Get it from here detect-browser.js it will give you something like that: answered Jun 11, 2020 at 9:52 Malki MohamedMalki Mohamed 1,3882 gold badges20 silver badges36 bronze badges Chrome & Edge introduced a new User-Agent Client Hints API for this: navigator.userAgentData.brands.map(item => item.brand).includes('Google Chrome')
Firefox & Safari don't support it yet unfortunately. answered Apr 7 at 8:45
Ollie WilliamsOllie Williams 1,4673 gold
badges17 silver badges37 bronze badges 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',
});
});
answered May 4, 2017 at 10:29
To check for IE browser using following code. console.log(/MSIE|Trident/.test(window.navigator.userAgent))
OR var isIE = !!document.documentMode;
console.log(isIE)
Thanks answered Jun 23, 2021 at 17:04 Rahul DakshRahul Daksh 2892 silver badges8 bronze badges This combines both Rob's original answer and Pilau's update for 2016 var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
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 += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
answered Jan 21, 2016 at 9:48 Joe BorgJoe Borg 651 silver badge12 bronze badges 2 Here you find out which browser is it running. function isValidBrowser(navigator){
var isChrome = navigator.indexOf('chrome'),
isFireFox= navigator.indexOf('firefox'),
isIE = navigator.indexOf('trident') ,
isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;
if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}
if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox Browser")}
if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}
}
answered Dec 6, 2017 at 4:21
Ajay KumarAjay Kumar 4,28437 silver badges38 bronze badges We can use below util methods utils.isIE = function () {
var ver = navigator.userAgent;
return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
};
utils.isIE32 = function () {
return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
};
utils.isChrome = function () {
return (window.chrome);
};
utils.isFF64 = function () {
var agent = navigator.userAgent;
return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
};
utils.isFirefox = function () {
return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
};
answered Feb 20, 2019 at 5:28 NPENPE 4462 silver badges14 bronze badges const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
answered May 8, 2019 at
11:50 LandaidaLandaida 1342 silver badges8 bronze badges 2 You can detect it like: if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)) {
alert('Firefox');
}
answered
Sep 10, 2020 at 9:38 CodeWhispererCodeWhisperer 1,0931 gold badge18 silver badges37 bronze badges import getAgent, { getAccurateAgent } from "@egjs/agent";
const agent = getAgent();
getAccurateAgent().then((accurate_agent)=>{
console.log(agent,'accurate.');
})
console.log(agent);
https://github.com/naver/egjs-agent answered Aug 26, 2021 at 7:37 Simple: var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
if (navigator.appVersion.indexOf("Linux x86_64")!=-1) OSName="Ubuntu";
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
fullVersion = nAgt.substring(verOffset+6);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
fullVersion = nAgt.substring(verOffset+7);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
(verOffset=nAgt.lastIndexOf('/')) )
{
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
fullVersion=fullVersion.substring(0,ix);
majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
fullVersion = ''+parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion,10);
}
document.write(''
+'Hey! i see you\'re using '+browserName+'! <br>'
+'The full version of it is '+fullVersion+'. <br>'
+'Your major version is '+majorVersion+', <br>'
+'And your "navigator.appName" is '+navigator.appName+'. <br>'
+'Your "navigator.userAgent" is '+navigator.userAgent+'. <br>'
)
document.write('And, your OS is '+OSName+'. <br>');
answered Jul 11, 2020 at 13:13
AlonAlon 1611
silver badge7 bronze badges 1 Simple, single line of JavaScript code will give you the name of browser: function GetBrowser()
{
return navigator ? navigator.userAgent.toLowerCase() : "other";
}
answered Aug 1, 2014 at 8:56 Nirav MehtaNirav Mehta 6,7759 gold badges41 silver badges51 bronze badges 4 | 
