The feature testing method is preferable over the browser detection, unless, you absolutely want to support only, say, IE and FireFox and don’t care about others. In some situations (like a custom control, for example) a particular browser supports 90% of what your piece of code wants, but there are these couple of important things you want are missing in that browser.
So, in some cases, there is no point in proceeding further unless you know for sure your JavaScript code works all the way. The designMode property on IFrame is not available on some browsers. If you are writing a web editor, there is no point in proceeding further (you might display just a text box).
How does ASP.NET AJAX implement browser detection?
The ASP.NET AJAX actually uses code kind of similar to what you might have in your old JavaScript file, except that the old code might not be object-oriented like what you see in MS AJAX (MicrosoftAjax.js). This Sys.Browser can be used to check the current browser.
Figure 1. Browser detection classes in ASP.NET AJAX
Following is the short and sweet piece of code that ASP.NET AJAX uses in its client-side libraries to store the basic information about the browser.
Code Listing 1. The browser detection code from ASP.NET AJAX
Sys.Browser = {};
Sys.Browser.InternetExplorer = {};
Sys.Browser.Firefox = {};
Sys.Browser.Safari = {};
Sys.Browser.Opera = {};
Sys.Browser.agent = null;
Sys.Browser.hasDebuggerStatement = false;
Sys.Browser.name = navigator.appName;
Sys.Browser.version = parseFloat(navigator.appVersion);
if (navigator.userAgent.indexOf(’ MSIE ’) > -1) {
Sys.Browser.agent = Sys.Browser.InternetExplorer;
Sys.Browser.version = parseFloat(navigator.userAgent.match(/MSIE (\d+\.\d+)/)[1]);
Sys.Browser.hasDebuggerStatement = true;
}
else if (navigator.userAgent.indexOf(’ Firefox/’) > -1) {
Sys.Browser.agent = Sys.Browser.Firefox;
Sys.Browser.version = parseFloat(navigator.userAgent.match(/ Firefox\/(\d+\.\d+)/)[1]);
Sys.Browser.name = ’Firefox’
Sys.Browser.hasDebuggerStatement = true;
}
else if (navigator.userAgent.indexOf(’ Safari/’) > -1) {
Sys.Browser.agent = Sys.Browser.Safari;
Sys.Browser.version = parseFloat(navigator.userAgent.match(/ Safari\/(\d+\.\d+)/)[1]);
Sys.Browser.name = ’Safari’
}
else if (navigator.userAgent.indexOf(’Opera/’) > -1) {
Sys.Browser.agent = Sys.Browser.Opera;
}
How to call the above browser detection code?
As shown in Listing 2, you can check the agent property of Sys.Browser object. The function IsIE() returns true if the browser is Internet Explorer, and false otherwise. This could be useful in a few cases, because in a few cases IE behaves differently from most other browsers.
Listing 2. Detects whether the browser is IE or not
// Returns true if the browser is Internet Explorer.
// Otherwise, returns false.
function IsIE()
{
if (Sys.Browser.agent == Sys.Browser.InternetExplorer)
return true;
else
return false;
}
The code in Listing 3 uses different piece of code for different browsers (basically IE and all others). Typically, you want to check for the features as opposed to checking for the browser. However, in some cases (bugs, strange or incompatible behaviors in the browsers, etc.) browser specific code becomes necessary.
Listing 3. Different code for different browsers
if (IsIE())
{
leftPos = event.screenX;
topPos = event.screenY;
}
else
{
leftPos = (window.screen.width - colWidth)/2;
topPos = (window.screen.height - colHeight)/2;
}
Related Articles
Incorporating ASP.NET AJAX into existing Custom Controls and JavaScript files
How does an MS AJAX extender control get initialized on the client side?
(Analysis of AutoCompleteExtender placement on the page at runtime)
The structure and usage of AutoCompleteExtender control
Incorporating ASP.NET AJAX into existing Custom Controls and JavaScript files
Browser Detection from the Client-Side in ASP.NET AJAX
