Two methods for determining browser versions during front-end development

There are many methods for determining the browser and version on the Internet. Here, the younger brother sums up one or two to save everyone's time.

1. jquery method:

Regular Expressions can be used to determine common browsers and their versions.
Copy codeThe Code is as follows:
<Span style = "font-size: 12px"> function allinfo (){

Var ua = navigator. userAgent;
Ua = ua. toLowerCase ();
Var match =/(webkit) [\/] ([\ w.] +)/. exec (ua) |
/(Opera )(? :. * Version )? [\/] ([\ W.] +)/. exec (ua) |
/(Msie) ([\ w.] +)/. exec (ua) |
! /Compatible/. test (ua) &/(mozilla )(? :.*? Rv :( [\ w.] + ))? /. Exec (ua) | [];

// If you need to obtain the browser version: match [2]

Switch (match [1]) {
Case "msie": // ie
If (parseInt (match [2]) === 6) {// ie6
Alert ("ie6 ");
Alert ("IE7.0 and earlier browsers are not supported currently. Please upgrade your browser version! ");
// Document. getElementById ("hid"). style. display = "none ";
// Document. getElementById ("show"). style. display = "block ";
// Document. getElementById ("nosee_ B"). style. display = "none ";
}
Else if (parseInt (match [2]) === 7) {// ie7
Alert ("ie7 ");
// Document. getElementById ("hid"). style. display = "none ";
// Document. getElementById ("show"). style. display = "block ";
}
Else if (parseInt (match [2]) === 8) {// ie8
Alert ("ie8 ");
}
Else if (parseInt (match [2]) === 9 ){
Alert ("ie9 ");
// Document. getElementById ("hid"). style. display = "none ";
}
Break;
Case "webkit": // safari or chrome
// Alert ("safari or chrome ");
// Document. getElementById ("middle"). style. display = "none ";
Break;
Case "opera": // opera
Alert ("opera ");
Break;
Case "mozilla": // Firefox
Alert ("Firefox ");
// Document. getElementById ("hid"). style. display = "none ";
Break;
Default:
Break;
}
} </Span>

"=" Is used here to learn the relationship between "=" and "= ".

= This is not much to say. In development, parameters are assigned.

= Equality, === identity.
=, When the value types on both sides are different, type conversion should be performed first and then comparison should be made.
===, No type conversion is required. The types may vary.

For Example:
If the two values are of different types, they may be equal. Perform type conversion and comparison based on the following rules:
A. If one is null and the other is undefined, [equal].
B. if one is a string and the other is a numerical value, convert the string to a numerical value before comparison.
C. If any value is true, convert it to 1 for comparison. If any value is false, convert it to 0 for comparison.
D. If one is an object and the other is a value or string, convert the object to a base type value before comparison. Converts an object to a base type and uses its toString or valueOf method. Js core built-in class, will try valueOf prior to toString; the exception is Date, Date uses toString conversion.

2. annotation method in HTML

(1) Comment Method in HTML
You can use the following code to check the current version of IE (Note: it is ineffective in non-ie browsers). This method is used in IE5 and later versions.
The HTML comment format is <! -- Comment content -->, IE extends HTML comments to support conditional expressions:
<! -- [If expression]> HTML <! [Endif] --> when expression is True, HTML content is displayed.
[If IE] determine whether IE
[If! IE] determine if it is not IE
[If lt IE 5.5] determines whether it is IE5.5 or earlier. (<)
[If lte IE 6] determining whether it is equal to IE6 or earlier (<=)
[If gt IE 5] determine whether IE5 or later is used (>)
[If gte IE 7] determine whether IE7 or later is used
[If! (IE 7)] determine if it is not IE7
[If (gt IE 5) & (lt IE 7)] judge whether it is greater than IE5 and less than IE7
[If (IE 6) | (IE 7)] determine whether IE6 or IE7 is used

Lte: Short for Less than or equal to, that is, Less than or equal. Lt: Short for Less than, that is, Less. Gte: Short for Greater than or equal to, that is, Greater than or equal. Gt: Short for Greater than, that is, Greater. ! : It means not equal to, which is the same as the non-equal identifier in javascript.
Example:
Copy codeThe Code is as follows:
<! -- [If IE]> <p> You are using Internet Explorer. </p> <! [Endif] -->
<! -- [If IE 7]> <p> Welcome to Internet Explorer 7! </P> <! [Endif] -->
<! -- [If! (IE 7)]> <p> You are not using version 7. </p> <! [Endif] -->
<! -- [If gte IE 7]> <p> You are using IE 7 or greater. </p> <! [Endif] -->
<! -- [If (IE 5)]> <p> You are using IE 5 (any version). </p> <! [Endif] -->
<! -- [If (gte IE 5.5) & (lt IE 7)]> <p> You are using IE 5.5 or IE 6. </p> <! [Endif] -->
<! -- [If lt Internet Explorer 5.5]> <p> Please upgrade your version of Internet Explorer. </p> <! [Endif] -->

(2) How to Apply condition comments

The browsers of different IE versions have different interpretations of the WEB standard pages we have created. Specifically, they have different interpretations of CSS. To be compatible with these, we can use conditional annotations for their respective definitions, to achieve compatibility.

For example: <! -- First use the css.css style sheet -->

<Link rel = "stylesheet" type = "text/css" href = "css.css"/> <! -- [If IE 7]>

<! -- If the iebrowser version is "7", use the ie7.css style sheet->

<Link rel = "stylesheet" type = "text/css" href = "ie7.css"/> <! [Endif] -->

<! -- [If lte IE 6]>

<! -- If the IE browser is smaller than or equal to 6, use the ie.css style sheet. -->

<Link rel = "stylesheet" type = "text/css" href = "ie.css"/> <! [Endif]-> This separates the implementation of CSS by IE7 and IE6 to achieve compatibility. At the same time, the first line of CSS is compatible with other non-ie browsers.

Note: The default CSS style should be located at the first line of the HTML document. All the content for condition annotation judgment must be located after the default style. For example, if the following code is executed in IE, it is displayed in red, but not in IE. If the condition annotation judgment is placed on the first line, it cannot be implemented. This example shows how to solve the compatibility problem between the web browser and the Internet Explorer. <Style type = "text/css"> body {background-color: #000 ;}</style> <! -- [If IE]>

<Style type = "text/css"> body {background-color: # F00 ;}</style> <! [Endif] -->

At the same time, someone will try to use <! -- [If! IE]> to define non-IE browser conditions, but note: Condition comments can only be executed in IE browser. This code is not executed in non-IE browser, but not in non-IE browser, it turns a blind eye to it as a comment.

Normally, it is the default style. If the IE browser needs special processing, it must be annotated with the conditions. HTML files, but not CSS files.

In DWcs4, you have installed these annotations: In "window --> code snippet --> comment. Other versions are not noticed.

Reference in this article: statements used to determine the browser version, used for browser compatibility, js to determine the browser type and version of the jsp page running