Use JavaScript to detect browser-related features _ Javascript tutorial

Javascript: use JavaScript to detect browser-related features. Javascript tutorial  

I. Check the browser name
Problem:
Different browsers have different standard support for javascript. Sometimes you want the script to run well on different browsers. In this case, you need to check the browser and determine its name, write scripts for different browsers.
Solution:
Use the appName attribute of the navigator object.
For example, to check whether the browser is IE, you can do this:
Var isIE = (navigator. appName = "Microsoft Internet Explorer ");
Document. write ("is IE? "+ IsIE );
For Firefox, the value of the appName attribute of the navigator object is "Netscape"; the value of the appName attribute of Opera9.02 is "Opera" (earlier versions may be different );

Ii. Check the version number of the browser:
Problem:
As the browser version changes, the script features supported by the browser are also changing. Sometimes you need to write the corresponding scripts for different versions. How can you get the browser version number?
Solution:
Parse the userAgent attribute of the navigator object to obtain the complete version number of the browser.
IE identifies itself as MSIE, followed by a space, version number, and semicolon. Therefore, we only need to take the part between a space and a semicolon. For example, the userAgent attribute value of IE in 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 that its version is 6.0. You can use the following function to obtain the version number of IE:
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 )));
}
Suppose we want to write a script for IE5 or later, we can write it like this:
Var isIE5Min = (getIEVersonNumber ()> = 5 );
If (isIE5Min)
{
// Perform statements for IE 5 or later
}
For FireFox, Opera, and other browsers, you can also use the navigator. userAgent attribute to obtain the version number, except that the format is different from that of 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; en. However, other versions of these browsers have not been tested and their specific values are unclear. If you want to use this method for detection, verify it by yourself.

The above section describes the scripts written by IE 5 and later browsers. Note that you must use >=instead of ==. generally, we can assume that the browser is backward compatible, so using = is obviously not suitable for the new version. On the other hand, the above assumption is only assumptions, and it cannot be ensured that this is the case, if some objects or attributes of the browser are not backward compatible, our code may also cause problems. Therefore, we recommend that you use less browser version comparisons. In more cases, check whether the object or attribute to be used is supported.

3. Check the operating system type of the Client
According to the above discussion, we can see that navigator. the userAgent attribute usually contains basic information about the operating system, but unfortunately, there is no unified rule to obtain accurate information about the operating system based on the userAgent, these values are related to the browser type, browser version, and even the OEM version of the browser.
What we can do is to check 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 Windows versions contain "Win", all Macintosh versions contain "Mac", and all Unix versions contain "X11 ", linux also contains "X11" and "Linux ". For example:
Var isWin = (navigator. userAgent. indexOf ("Win ")! =-1 );
Var isMac = (navigator. userAgent. indexOf ("Mac ")! =-1 );
Var isUnix = (navigator. userAgent. indexOf ("X11 ")! =-1 );
It is usually used to set different fonts or positions for different operating systems.

4. Check the browser's support for specific objects
Problem:
If you need to write scripts that can be applied to multiple browsers or multiple versions of a browser, check whether the browser supports an object. Of course, this kind of check mainly targets the statements of potential incompatible objects.
Solution:
Early browsers have very different support for img elements. Therefore, to operate img elements in scripts, you need to check whether the browser supports img elements. In this case, we do not need to detect all possible browsers one by one. We only need to detect them in the following way where necessary:
Function rolover (imgName, imgSrc)
{
// If images objects are supported
If (document. images)
{
// Statements go here
}
}
This method takes effect based on the fact that if the document. images object does not exist, the if result is false.

This method makes object detection easy and easy, but we should note how to handle browsers that do not support this object better. See 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 ();
}
The detection supported by objects is not used here. If the browser supports document. images, the two functions run normally; otherwise, an exception is thrown. The following is an improved script:
Function getImgAreas ()
{
Var result;
// Check whether 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 ()
{
// Now you can determine the return value
Var imgArea = getImgAreas ();
Var output;
If (imgArea = null)
{
// Provide relevant information for browsers that do not support images objects
Output = "Unknown ";
} Else {
Output = imgArea;
}
Document. reportForm. imgData. value = output;
}
In this way, no matter whether the browser supports this object or not, users can be given reasonable information without jumping out of abrupt error messages.

5. Check the browser's support for specific attributes and Methods
Problem:
Checks whether an object contains a specific attribute or method.
Solution:
In most cases, you can use code similar to the following:
If (objectTest & objectPropertyTest)
{
// OK to work with property
}
First, check whether the object exists, and then check whether the object's attributes exist. This method is valid if the object does not exist. if the attribute exists, its value is null, 0, false, and the if statement evaluates the value! Therefore, this method is not safe. The best method is as follows:
If (objectReference & typeof (objectReference. propertyName )! = "Undefined ")
{
// OK to work with property
}
A similar method can be used for method detection:
Function myFunction ()
{
If (document. getElementById)
{
// The getElementById method can be used here
}
}