Using JavaScript to detect browser-related features

Browser

First, detect the name of the browser
Problem:
The standard support for JavaScript is different for different browsers, and sometimes you want the script to work well on different browsers, and then you need to detect the browser, determine its name, and write the appropriate script for the different browsers.
Solution:
Use the AppName property of the Navigator object.
For example, to detect whether the browser is IE, you can do this:
var Isie = (Navigator.appname = = "Microsoft Internet Explorer");
document.write ("is IE?" + Isie);
The AppName property value for the Firefox,navigator object is "Netscape"; the AppName property value of Opera9.02 is "Opera" (its earlier version may be different);

Second, the test browser version number:
Problem:
As the browser's version changes, the script features that the browser supports are changing, and sometimes you need to write scripts for different versions, so how do you get the version number of the browser?
Solution:
The full version number of the browser is obtained by parsing the UserAgent property of the Navigator object.
IE identifies itself as MSIE, followed by a space, version number, and semicolon. So we just take the part between the space and the semicolon. For example, the UserAgent property value of IE for Windows XP SP2 is "mozilla/4.0" (compatible; MSIE 6.0; Windows NT 5.1; SV1. NET CLR 1.1.4322;. NET CLR 2.0.50727) ", you can see its version is 6.0. You can use the following function to get the version number of IE browser:
function Getieversonnumber ()
{
var ua = navigator.useragent;
var msieoffset = Ua.indexof ("MSIE");
if (Msieoffset < 0)
{
return 0;
}
Return parsefloat (ua.substring (Msieoffset + 5, Ua.indexof (";", Msieoffset)));
}
Let's say we're going to write a script for IE5 and above, so we can write:
var isie5min = (Getieversonnumber () >= 5);
if (isie5min)
{
Perform statements for IE 5 or later
}
For browsers such as Firefox and opera, you can also use the Navigator.useragent property to get its version number, except that it is different in form from IE, such as Firefox:
mozilla/5.0 (Windows; U Windows NT 5.1; En-us; rv:1.8.0.7) gecko/20060909 firefox/1.5.0.7
opera:opera/9.02 (Windows NT 5.1; U According to these forms, we are not difficult to obtain their version number. However, the other versions of these browsers have not been tested, their specific values are not clear, if you want to use this method to detect, please verify yourself.

Here's a discussion of the script written above for IE5 and above browsers, use this notation to note: To use >= instead of = =, in general, we can assume that the browser is backward-compatible, so using = = obviously can not adapt to the new version; On the other hand, our assumptions above are just hypothetical, It is not guaranteed that if some of the browser's objects or properties are not backwards compatible, our code can cause problems, so it is recommended that you use less browser version comparisons and, more often, detect if the object or property you are using is supported.

III. Detecting the operating system type of the client
As you can see from the discussion above, the Navigator.useragent attribute usually contains basic information about the operating system, but unfortunately there is no uniform rule to obtain accurate operating system information based on useragent, because these values are related to the type of browser, The version of the browser and even the OEM version of the browser are related.
What we can usually do is to detect more general information, such as whether the operating system is Windows or Mac, rather than Windows 98 or Windows XP. The rule is that all versions of Windows will contain "Win", all versions of Macintosh contain "Mac", all Unix contains "X11", while Linux contains both "X11" and "Linux". Such as:
var Iswin = (navigator.userAgent.indexOf ("Win")!=-1);
var Ismac = (navigator.userAgent.indexOf ("Mac")!=-1);
var Isunix = (navigator.userAgent.indexOf ("X11")!=-1);
You typically use styles such as different fonts or locations for different operating systems.

Iv. Detecting browser support for specific objects
Problem:
If you need to write a script that works for multiple versions of a variety of browsers or browsers, check to see if the browser supports an object. Of course, this kind of detection is mainly for those potential incompatible objects of the statement.
Solution:
Early browsers have a very different support for IMG elements, so to manipulate the IMG element in a script, you need to detect if the browser supports it. At this time we do not need to all possible browser one by one detection, just in the necessary place in the following way to detect:
function rollover (imgname, IMGSRC)
{
If the images object is supported
if (document.images)
{
Statements Go
}
}
This approach can take effect based on the fact that if the Document.images object does not exist, then the if value evaluates to False.

Using this method makes it easy to detect objects, but we need to be aware of how best to handle browsers that do not support the object. Look at the following code:
function Getimgareas ()
{
var result = 0;
for (var i = 0; i < document.images.length; i++)
{
result = = (Document.images[i].width * document.images[i].height);
}
return result;
}

function Reportimagearea ()
{
Document.form1.imgData.value = Getimgareas ();
}
There is no use for object-supported detection. If the browser supports Document.images, the two functions are working properly, otherwise an exception is thrown. The following are the improved scripts:
function Getimgareas ()
{
var result;
Detect if the browser supports objects
if (document.images)
{
result = 0;
for (var i = 0; i < document.images.length; i++)
{
result = = (Document.images[i].width * document.images[i].height);
}
}
The return value is a number or null
return result;
}
function Reportimagearea ()
{
You can now determine the return value
var Imgarea = Getimgareas ();
var output;
if (Imgarea = null)
{
For browsers that do not support images objects, also give the appropriate information
Output = "Unknown";
} else {
output = Imgarea;
}
Document.reportForm.imgData.value = output;
}
In this way, whether or not the browser supports the object, it can give the user more reasonable information, and will not jump out of the unexpected error message.

V. Detecting browser support for specific properties and methods
Problem:
Detects whether an object contains a specific property or method.
Solution:
In most cases, you can use code similar to the following to determine:
if (objecttest && objectpropertytest)
{
OK to work with property
}
Detects whether an object exists, and then detects whether the object's properties exist. If the object does not exist, the method is valid, and if the property exists but its value is null, 0, the result of the FALSE,IF statement evaluation will also be false! So this method is not safe, the best way is this:
if (objectreference && typeof (Objectreference.propertyname)!= "undefined")
{
OK to work with property
}
A similar approach can be used for detection of methods:
function MyFunction ()
{
if (document.getElementById)
{
Here you can use the getElementById method
}
}