Introduction
Its a very common thing as we know, how to check browser in Jquery. But he point is when we are going to do this in Javascript we will find a bit problem there as there is no inbuilt method to get you the exact browser. Here I will explain how to achieve this and what is the advantage of using Javascript instead of Jquery.
Behind The Scene
First lets focus why should we go for using Javascript instead of using Jquery where as its very simple to use the latter.
The point is that while using the Jquery you need to load the manifest file for each and every time you load the page. That is the "$" will need the jquery file so the browser downloads the whole file every time by reducing the performance of the site. Hence its always advisable that try avoiding Jquery when the work can be done through Javascript.
Recently I have a requirement of checking the browser so I did this in Jquery but when I go to my deployment manager to deployment manager for deploying this he denied me by telling me that for this small thing we don't need to load the whole Jquery manifest file. And advice me to do it in Javascript. Finally I got a way to do this in Javascript.
Javascript provides a object called "navigator" that gives the visitors browser's information.
The information from the navigator object can often be misleading, and should not be used to detect browser versions because:
- The navigator data can be changed by the browser owner
- Some browsers misidentify themselves to bypass site tests
- Browsers cannot report new operating systems, released later than the browser
Here is the code you can use this to check in cross browser, I have found this is giving the browser appCodeName "Mozila" in all my browsers and some different values. I mean if you want to check the browser name only you can not do this by using a particular object.
<html xmlns="http://www.w3.org/1999/xhtml" > <head> </head> <body> <div id="example"></div> <script> txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>"; txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script> </body> </html>Here I found a way to do this in javascript. And below is the code for that
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) ||
"An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch ||
data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
Use this method in your page and it will return you the browser name by calling "BrowserDetect.browser" object.
You can download the sample code and check this by opening it on different browsers it will show you an alert containing the browser name, that you are using.
Happy Coding...
No comments:
Post a Comment