Hello guys! Welcome to this tutorial post on JavaScript. In this tutorial post, am going to be discussing about the compatibility of JavaScript across various browsers and this is also the last topic on my JavaScript tutorial course. From my next tutorial post, i will be discussing about jQuery.
Its very important to understand the differences between different web browsers in order to be able to handle each of them in the appropriate way that is expected. So it is important to know which browser your web page is running in.
To get the information about the browser your web page is currently running in, use the built-in navigator object.
Its very important to understand the differences between different web browsers in order to be able to handle each of them in the appropriate way that is expected. So it is important to know which browser your web page is running in.
To get the information about the browser your web page is currently running in, use the built-in navigator object.
The Navigator Properties
There are several Navigator related properties that you can use in your Web page. Below is the list of the names and descriptions of each.
| Sr.No. | Property & Description |
|---|---|
| 1 |
appCodeName
This property is a string that contains the code name of the browser, Netscape for Netscape and Microsoft Internet Explorer for Internet Explorer.
|
| 2 |
appVersion
This property is a string that contains the version of the browser as well as other useful information such as its language and compatibility.
|
| 3 |
language
This property contains the two-letter abbreviation for the language that is used by the browser. Netscape only.
|
| 4 |
mimTypes[]
This property is an array that contains all MIME types supported by the client. Netscape only.
|
| 5 |
platform[]
This property is a string that contains the platform for which the browser was compiled."Win32" for 32-bit Windows operating systems
|
| 6 |
plugins[]
This property is an array containing all the plug-ins that have been installed on the client. Netscape only.
|
| 7 |
userAgent[]
This property is a string that contains the code name and version of the browser. This value is sent to the originating server to identify the client.
|
You can also read our tutorial post on: The Basic Concepts of Debugging in JavaScript
The Navigator Methods
There are several Navigator specific method. Below is the list of the names and descriptions of each of them.
| Sr.No. | Description |
|---|---|
| 1 |
javaEnabled()
This method determines if JavaScript is enabled in the client. If JavaScript is enabled, this method returns true; otherwise, it returns false.
|
| 2 |
plugings.refresh
This method makes newly installed plug-ins available and populates the plugins array with all new plug-in names. Netscape only.
|
| 3 |
preference(name,value)
This method allows a signed script to get and set some Netscape preferences. If the second parameter is omitted, this method will return the value of the specified preference; otherwise, it sets the value. Netscape only.
|
| 4 |
taintEnabled()
This method returns true if data tainting is enabled; false otherwise.
|
You can also read our tutorial post on: JavaScript Array object with examples
Browser Detection
There is a simple JavaScript code which can be used to find out the name of a browser and then accordingly an HTML page can be served to the user.
<html>
<head>
<title>Browser Detection</title>
</head>
<body>
<script type = "text/javascript">
<!--
var userAgent = navigator.userAgent;
var opera = ( userAgent.indexOf( 'opera' ) != -1 );
var ie = ( userAgent.indexOf( 'MSIE' ) != -1 );
var gecko = ( userAgent.indexOf( 'Gecko' ) != -1 );
var netscape = ( userAgent.indexOf( 'Mozilla' ) != -1 );
var version = navigator.app.Version;
if ( opera ) {
document.write("Opera based browser");
// Keep your opera specific URL here.
} else if ( gecko ) {
document.write("Mozilla based browser");
// Keep your gecko specific URL here.
} else if ( ie ) {
document.write("IE based browser");
// Keep your IE specific URL here.
} else if ( netscape ) {
document.write("Netscape based browser");
// Keep your Netscape specific URL here.
} else {
document.write("Unknown browser" + "<br />" );
}
// You can as well include version along with any of the above condition.
document.write("Browser Versions information : " + version );
//-->
</script>
</body>
</html>
<head>
<title>Browser Detection</title>
</head>
<body>
<script type = "text/javascript">
<!--
var userAgent = navigator.userAgent;
var opera = ( userAgent.indexOf( 'opera' ) != -1 );
var ie = ( userAgent.indexOf( 'MSIE' ) != -1 );
var gecko = ( userAgent.indexOf( 'Gecko' ) != -1 );
var netscape = ( userAgent.indexOf( 'Mozilla' ) != -1 );
var version = navigator.app.Version;
if ( opera ) {
document.write("Opera based browser");
// Keep your opera specific URL here.
} else if ( gecko ) {
document.write("Mozilla based browser");
// Keep your gecko specific URL here.
} else if ( ie ) {
document.write("IE based browser");
// Keep your IE specific URL here.
} else if ( netscape ) {
document.write("Netscape based browser");
// Keep your Netscape specific URL here.
} else {
document.write("Unknown browser" + "<br />" );
}
// You can as well include version along with any of the above condition.
document.write("Browser Versions information : " + version );
//-->
</script>
</body>
</html>
You can try the above code out to see the result for yourselves.
Alright guys we have come to the end of this tutorial post. Feel free to ask your questions where necessary.
Thanks for reading and bye for now.
Alright guys we have come to the end of this tutorial post. Feel free to ask your questions where necessary.
Thanks for reading and bye for now.