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.navigatorJavaScript object. - The
windowprefix 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.navigatorJavaScript 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.navigatorobject 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
userAgentwill detect browser version information.