Two methods of judging the browser version in the front-end development process _javascript skills

Source: Internet
Author: User
Tags numeric numeric value first row

On the Internet to find a browser and version of the method there are many, the younger brother summed up one or two to save everyone time.

method of 1.jquery:

Regular expressions are used to determine common browsers and their versions.

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

Switch (match[1]) {
Case "MSIE"://ie
if (parseint (match[2]) = = 6) {//ie6
Alert ("IE6");
Alert ("Temporarily does not support IE7.0 and the following version of browsers, 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 understand its relationship with "= =" and "=".

= This is not much to say, development is to assign values to the parameters.

= = Equality equivalent, = = identity identity.
= =, when both sides of the value types are different, you have to do type conversion, and then compare.
= = =, do not do type conversion, different types must vary.

For Example:
If two value types are different, they may be equal. Type conversions and comparisons are made according to the following rules:
A, if one is null, one is undefined, then [equals].
B, if one is a string, and one is a numeric value, the string is converted to a numeric value and then compared.
C, if either value is true, convert it to 1 and compare it to 0 if any value is false.
D, if one is an object, and the other is a numeric value or a string, the object is converted to the underlying type for a comparison. object to the underlying type, using its ToString or ValueOf method. JS core built-in class, will try to valueof before ToString, the exception is date,date use of ToString conversion.

the annotation method in 2.HTML

(1) Annotation methods in HTML
You can use the following code to detect the current IE browser version (note: In non-IE browser is not see the effect), this method for IE5 and above version.
The annotation format for HTML is <!--Comment content-->, IE extends HTML annotations so that they can support conditional judgment expressions:
<!--[if expression]> HTML <! [endif]--> Displays HTML content when the expression expression is true.
[If IE] to determine whether IE
[If! IE] to determine if it is not ie
[If Lt IE 5.5] Determines whether the following version is IE5.5. (<)
[If LTE IE 6] is judged to be equal to IE6 version or below (<=)
[If GT IE 5] To determine whether IE5 above version (>)
[If GTE IE 7] determine if IE7 version or above
[If! (IE 7)] Judge whether it is not IE7
[If (GT IE 5) & (LT IE 7)] is judged to be greater than IE5, less than IE7
[If (IE 6) | (IE 7)] Judge whether IE6 or IE7

LTE: Is the shorthand for less than or equal to, meaning less than or equal to. LT: It is the shorthand for less than, which means less than. GTE: is the shorthand for greater than or equal to, which is greater than or equal to the meaning. GT: is the abbreviation of greater than, which means greater than. : Is not equal to the meaning, and JavaScript is not equal to the same judge character
Example:
Copy Code code 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 IE 5.5]><p>please upgrade your version of Internet explorer.</p><! [endif]-->

(2) How the conditional annotation should be applied

Because IE each version of the browser to our web Standard page interpretation is not the same, specifically the interpretation of the CSS is different, we in order to compatible with these, we can use conditional annotation to define their own, and ultimately achieve compatibility purposes.

For example: <!–-call CSS.CSS style sheet by default –->

<link rel= "stylesheet" type= "Text/css" href= "Css.css"/><!-–[if IE 7]>

<!–-if the IE browser version is 7, call IE7.CSS style sheet-–>

<link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/><! [endif]–->

<!–-[if LTE IE 6]>

<!–-if the IE browser version is less than or equal to 6, call IE.CSS style sheet-–>

<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/><! [endif]–> this distinguishes the IE7 and IE6 down browsers from the implementation of CSS, to achieve compatibility. At the same time, the default css.css of the first line can also be compatible with other non IE browsers.

Note: The default CSS style should be in the first row of the HTML document, and all content judged by the conditional annotation must be in the default style. For example, the following code, in IE browser execution is displayed in red, and in non-IE browser display as black. If you put a conditional comment on the first line, you cannot implement it. This example can explain the Web page to the Internet Explorer and non-IE browser compatibility problem resolution. <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 the situation in non-ie browsers, but note that conditional annotations can only be performed under IE, which is not a single definition of the condition under IE, but a blind eye to annotations.

Normal is the default style, for IE browser needs special treatment, only to make conditional comments. In an HTML file, but not in a CSS file.

The DWCS4 is now equipped with these notes: In the window--> code fragment--> comment. The other versions didn't notice much.

This article refers to: Judge the browser version of the statement for browser compatibility, JS Judge run JSP page browser type and version

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.