Two methods of determining browser version during front-end development_javascript skills

There are many ways to find browsers and versions on the Internet. Here I will summarize them to save everyone’s time.

1.jquery method:

Common browsers and their versions can be determined through regular expressions.

Copy code 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 get the browser version number: match[2]

switch(match[1]){
case "msie": //ie
if (parseInt(match[2]) === 6){ //ie6
alert("ie6");
alert("Browsers IE7.0 and below are not currently supported, 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, and we understand its relationship with "==" and "="

=This is not To say more, during development, parameters are assigned values.

== equality, === identity.
==, when the value types on both sides are different, type conversion must be performed first and then compared.
===, no type conversion is performed, and different types must not be equal.

For Example:
If two value types are different, they may be equal. Perform type conversion and then compare according to the following rules:
a. If one is null and the other is undefined, then [equal].
b. If one is a string and the other is a numerical value, convert the string into a numerical value and then compare.
c. If any value is true, convert it to 1 and compare; if any value is false, convert it to 0 and compare.
d. If one is an object and the other is a numeric value or string, convert the object into a value of the basic type and then compare. The object is converted to the base type using its toString or valueOf method. JS core built-in classes will try valueOf before toString; the exception is Date, which uses toString conversion.

2. Comment method in HTML

(1) Comment method in HTML
You can use the following code to detect the version of the current IE browser (Note: The effect will not be visible in non-IE browsers), this method is used for IE5 and above.
The comment format of HTML is . IE has made some extensions to HTML comments so that it can support conditional expressions:
When expression is True, HTML content is displayed.
[if IE] Determines whether it is IE
[if !IE] Determines whether it is not IE
[if lt IE 5.5] Determines whether it is a version below IE5.5. (<)
[if lte IE 6] Determine whether it is equal to IE6 version or below (<=)
[if gt IE 5] Determine whether IE5 or above version (> )
[if gte IE 7] Determine whether it is IE7 version or above
[if !(IE 7)] Determine whether it is not IE7
[if (gt IE 5)&(lt IE 7)] Determine whether it is greater than IE5 and less than IE7
[if (IE 6)|(IE 7)] Determine whether it is IE6 or IE7

lte: It is the abbreviation of Less than or equal to, which means less than or equal to. lt: It is the abbreviation of Less than, which means less than. gte: It is the abbreviation of Greater than or equal to, which means greater than or equal to. gt: It is the abbreviation of Greater than, which means greater than. !: It means not equal, which is the same as the inequality judgment symbol in JavaScript
Example:

Copy code The code is as follows :

(2) How to apply conditional comments

Because various versions of IE browsers do not interpret the WEB standard pages we create The same, specifically the interpretation of CSS is different. In order to be compatible with these, we can use conditional comments to define them separately, and ultimately achieve the purpose of compatibility.

For example: < !–- By default, the css.css style sheet is called first–->

< !-–[if IE 7]>



< ![endif]–->





< ![endif]–> This distinguishes the execution of CSS by IE7 and IE6 downward browsers to achieve compatibility. At the same time, the default css.css in the first line is also compatible with other non-IE browsers.

Note: The default CSS style should be located on the first line of the HTML document, and all content for conditional comment judgment must be located after the default style. For example, the following code will be displayed in red when executed in IE browser, but will be displayed in black in non-IE browsers. If the conditional comment judgment is placed on the first line, it cannot be implemented. This example question is very useful in explaining how to solve the compatibility issues between IE browsers and non-IE browsers on web pages.