Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can you detect the version of a browser using Javascript?
In this article, we are going to discuss how to detect the version of a browser using JavaScript.
These days, most browsers are JavaScript-enabled. But still, there are some browsers that don't support JavaScript; or, some versions of some browsers don't support certain features of JavaScript.
Therefore, in certain instances, there is a need to know the details of the client's web browser so that the applications can deliver appropriate content.
Detecting the Version of a Browser
You can detect the details of the current browser using navigator.appName and navigator.appVersion properties.
To detect the version of the browser in JavaScript we need to use navigator.appVersion or navigator.userAgent. The navigator.appVersion is a read-only property that returns a string representing the version information of the browser.
Using navigator.appVersion
In the following example, we are demonstrating the navigator.appVersion to find the version and details of the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigator</title>
</head>
<body>
<h3>Navigator appVersion</h3>
<p id="demo"></p>
<button onclick="browserVersion()">Return Browser Version</button>
<script>
function browserVersion() {
var v = "Version: " + navigator.appVersion;
document.getElementById("demo").innerHTML = v;
}
</script>
</body>
</html>
Version: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Using navigator.userAgent
In the following example, we are demonstrating the navigator.userAgent to find the version and details of the browser. This method provides more detailed information than appVersion.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigator</title>
</head>
<body>
<h3>Navigator userAgent</h3>
<p id="demo"></p>
<button onclick="browserVersion()">Return Browser Version</button>
<script>
function browserVersion() {
var v = "User Agent: " + navigator.userAgent;
document.getElementById("demo").innerHTML = v;
}
</script>
</body>
</html>
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Parsing Browser Information
For more specific browser detection, you can parse the user agent string to extract browser name and version:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Browser Detection</title>
</head>
<body>
<h3>Browser Detection</h3>
<p id="result"></p>
<button onclick="detectBrowser()">Detect Browser</button>
<script>
function detectBrowser() {
var userAgent = navigator.userAgent;
var browser = "Unknown";
var version = "Unknown";
if (userAgent.indexOf("Chrome") > -1) {
browser = "Chrome";
version = userAgent.match(/Chrome\/(\d+)/)[1];
} else if (userAgent.indexOf("Firefox") > -1) {
browser = "Firefox";
version = userAgent.match(/Firefox\/(\d+)/)[1];
} else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1) {
browser = "Safari";
version = userAgent.match(/Version\/(\d+)/)[1];
} else if (userAgent.indexOf("Edge") > -1) {
browser = "Edge";
version = userAgent.match(/Edge\/(\d+)/)[1];
}
document.getElementById("result").innerHTML =
"Browser: " + browser + "<br>Version: " + version;
}
</script>
</body>
</html>
Browser: Chrome Version: 91
Key Points
-
navigator.appVersionprovides version information but may not always be accurate -
navigator.userAgentgives more detailed browser information - User agent strings can be spoofed, so don't rely on them for security
- Modern web development favors feature detection over browser detection
Conclusion
Browser version detection in JavaScript can be achieved using navigator.appVersion and navigator.userAgent properties. While useful for compatibility checks, consider using feature detection for better web development practices.
5K+ Views
