Browser object model (BOM) lets you gain more control on how websites are displayed in the browser. BOM has several components: history, location, screen, document, and a navigator. The last one is the main focus of this tutorial.
This tutorial explains the BOM navigator JavaScript uses. Learn about it if you want to apply the JavaScript browser detect functionality. You will read all about JavaScript navigator properties and different ways to apply them as well.
Furthermore, you will learn to make JavaScript detect browser information like its name, the engine name, enabled cookies, etc.
Contents
JavaScript Detect Browser: Main Tips
- Information about the user's browser is contained in the
window.navigator
JavaScript object. - The
window
prefix is not necessary. - JavaScript navigator object information does not always turn out true. You should not rely on it when using JavaScript detect browser version.
- The same name can be used by different browsers.
- Some browsers give false information on purpose to bypass site tests.
Browser Names
You can use JavaScript detect browser name functionality by deploying properties appName
and appCodeName
.
document.getElementById("browser").innerHTML ="AppName is " + navigator.appName + ". appCodeName is " + navigator.appCodeName;
Note: If you're using IE11, Chrome, Firefox, or Safari, appName will return Netscape.
Possible Properties
JavaScript navigator object information might be obtained using a few different properties. In this chapter, we will introduce you to cookieEnabled, product, appVersion, userAgent, platform, language, and javaEnabled.
You might have noticed their names are pretty self-explanatory. That makes them easier to memorize and use. Let's view them one by one and see the code example provided to get a better understanding.
cookieEnabled
The cookieEnabled
property returns true
if cookies are enabled - otherwise it displays false
:
document.getElementById("test").innerHTML ="Cookies: " + navigator.cookieEnabled;
product
The product
property returns the engine name of the browser:
document.getElementById("engine").innerHTML = navigator.product;
appVersion
The appVersion
makes JavaScript detect browser version information:
document.getElementById("version").innerHTML = navigator.appVersion;
userAgent
The navigator userAgent
property also makes JavaScript detect browser version information:
document.getElementById("agent").innerHTML = navigator.userAgent;
platform
The platform
property makes JavaScript detect browser platform (operating system):
language
The language
property makes JavaScript detect browser language:
document.getElementById("lang").innerHTML = navigator.language;
javaEnabled
The javaEnabled()
method returns true
if Java is enabled in a website:
document.getElementById("java").innerHTML = navigator.javaEnabled();
JavaScript Detect Browser: Summary
window.navigator
JavaScript object contains information about the users' browser.- You should not rely on the navigator object information when using JavaScript browser detect version, as some browsers share wrong information intentionally.
window.navigator
object has multiple properties.- You can use these properties to get the name of the browser, check for cookies, browser version information and more. For example, using navigator
userAgent
will detect browser version information.