In front-end development, you often need to determine the browser version to ensure compatibility with multiple browsers at the same time. Below are two good common methods: Comments in jquery and HTML, if you like it, you can refer to the following methods to search for browsers and versions on the Internet. Here, the younger brother sums up two methods to save your time.
1. jquery method:
Regular Expressions can be used to determine common browsers and their versions.
The Code is as follows:
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;
}
}
"=" 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 IE has made some extensions to HTML comments so that it can support conditional judgment expressions:
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:
The Code is as follows:
(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 -->
<! -- [If IE 7]>
<! [Endif] -->
<! [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.
