How to Get Browser Name and Version via JavaScript

Today I ran into a strange issue where Firefox version 28 and below rendered style widths different than Firefox 29 and above. Firefox 29 and above appear to have fixed the issue and render sizes to match Chrome/IE8+/Opera/Safari. Unfortunately, as old as Firefox 28 is, our client’s legal review team is stuck on that version as IT refuses to let them upgrade. As such, we needed to add a kludge fix to the site to add a style to fix the issue for those running older Firefox versions. JQuery removed the version support from version 1.9 so here’s a handy script that will allow you to detect the browser and version without any extra dependencies.

Usage is very simple:

BONUS: If you need to detect a specific version and add special classes, here’s a quick snippet that will allow you to add a class to the HTML tag  using plain old vanilla.js.

 


Comments
Harvey Specter
Posted at 1:31 pm May 8, 2015
Hugo
Reply
Author

Thanks! I had terrible problems using navigator =/ this script works for me!

    Harvey Specter
    Posted at 2:22 pm May 8, 2015
    Greg
    Reply
    Author

    Glad it helped, Hugo! It’s always nice to know that posting these solutions help someone so thank you for the feedback. 🙂

Harvey Specter
Posted at 4:32 am January 7, 2016
Farhat Aziz
Reply
Author

Thank you! Your script is a blessing post JQuery 1.9!!!

Harvey Specter
Posted at 3:39 pm May 15, 2016
Erica
Reply
Author

Thank you so much for sharing this! I made the mistake of creating an animated logo for my web app with SVG and SMIL, thinking it would be supported in all major browsers. Ha. Now I can display a static image to IE users instead. This was so easy, even a non-coder like me can use it. I made sure to give you credit on my page. 🙂

    Harvey Specter
    Posted at 5:43 pm May 20, 2016
    Greg
    Reply
    Author

    Glad it helped, Erica and thank you for the comment. It’s feedback like this that keeps me posting as I love knowing it might help someone else too!

Harvey Specter
Posted at 5:10 pm January 19, 2017
Matt
Reply
Author

Here is an updated version that will include the full version of browsers as well as handle Microsoft’s Edge

var ua = navigator.userAgent,
tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident|edge(?=\/))\/?\s*(\d+)(\.\d+)+/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return { name: ‘IE ‘, version: (tem[1] || ”) };
}
if (M[1] === ‘Chrome’) {
tem = ua.match(/\bOPR\/(\d+)/);
if (tem != null) {
return { name: ‘Opera’, version: tem[1] };
}

tem = ua.match(/\bEdge\/(\d+(.\d+)+)/i);
if (tem != null) {
return { name: ‘Microsoft Edge’, version: tem[1] };
}
}
M = M[2] ? [M[1], M[0].substring(M[0].indexOf(‘/’)+1)] : [navigator.appName, navigator.appVersion, ‘-?’];
if ((tem = ua.match(/version\/(\d+)/i)) != null) {
M.splice(1, 1, tem[1]);
}
return {
name: M[0],
version: M[1]
};

    Harvey Specter
    Posted at 2:46 pm January 23, 2017
    Greg
    Reply
    Author

    Thanks for the updated version, Matt! I’ll update and give you credit.

Leave a Reply