MOCKSTACKS
EN
Questions And Answers

More Tutorials




How to detect browser version in Javascript?


check Browser version js

<!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>

Detect Browser Version in JavaScript

if (userAgent.includes('Firefox/')) {
    console.log(userAgent)
} else if (userAgent.includes('Edg/')) {
    console.log(userAgent)
} else if (userAgent.includes('Chrome/')) {
    console.log(userAgent)
} else if (userAgent.includes('Safari/')) {
    // Safari
}

Output

//Mozilla Firefox
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0

//Microsoft Edge
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36 Edg/98.0.1108.50

// Google Chrome
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
Detect Browser Version using JavaScript

The browser version and its name are present at the end of the string provided by the userAgent.


ADVERTISING


You can run the code below if you want to get the end part, i.e., the browser version and name and not the entire string.

if (userAgent.includes('Firefox/')) {
console.log(`Firefox v${userAgent.split('Firefox/')[1]}`)
} else if (userAgent.includes('Edg/')) {
console.log(`Edg v${userAgent.split('Edg/')[1]}`)
} else if (userAgent.includes('Chrome/')) {
console.log(`Chrome v${userAgent.split('Chrome/')[1]}`)
} else if (userAgent.includes('Safari/')) {
// Safari
}
Output:

//Mozilla Firefox
Firefox v98.0

//Microsoft Edge
Edg v98.0.1108.50

// Google Chrome
Chrome v98.0.4758.102 Safari/537.36
All browser displays the same output. It is because all are built on chromium.

Why Browser Version Detection Should Be Avoided in JavaScript
It’s not a good idea to detect the browser name and its version using userAgent because it’s not 100% accurate.

Every browser sets this data differently, and all browsers do not follow a particular standard.

Another Option to Detect Browser Version in JavaScript
Feature detection in a browser-

It can be a better idea to detect whether a particular browser supports a particular feature or not. And based on whether it supports a feature or not, you can take further action and write your code accordingly.

Progressively developing a website-

Following a design technique, you develop a website for smaller devices first with fewer features and move your way up to the top while increasing the features. It is known as a bottom-up approach.

Building for modern browsers-

Develop a full-fledged website with all the features for modern browsers and then tweak some changes so that it is supported on older browsers. It can be difficult to implement and less effective than the progressive or bottom-up approach.

Write for us
DelftStack articles are written by software geeks like you. If you also would like to contribute to DelftStack by writing paid articles, you can check the write for us page.
Related Article - JavaScript Browser
Hide JavaScript Code in View Source
Get Browser Width in JavaScript
Edit JavaScript in Browser
Current Year Copyright In JavaScript
Detecting A Finger Swipe Events In JavaScript
Ezoicreport this ad
Copyright © 2020. All right reserved

About USWrite For UsPrivacy PolicyAdvertisingSitemapContact


Conclusion

In this page (written and validated by ) you learned about . What's Next? If you are interested in completing Javascript tutorial, we encourage you simply to start here: Javascript Tutorial.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.