Use js to detect the implementation code of the browser

Source: Internet
Author: User

Detecting a browser is an important task in writing cross-browser js programs. From time to time, we need to write branch code for different browsers.
The following is an example:

Copy codeThe Code is as follows: // Add an event tool function
Function addEvent (el, type, handle ){
If (el. addEventListener) {// for standard browses
El. addEventListener (type, handle, false );
} Else if (el. attachEvent) {// for IE
El. attachEvent ("on" + event, handle );
} Else {// other
El ["on" + type] = handle;
}

}

1,The first browser detection method is called the user-agent detection method. Is the oldest, which detects the exact model of the target browser, including the browser name and version. It is actually a string that can be obtained using navigator. userAgen or navigator. appName. As follows:Copy codeThe Code is as follows: function isIE (){
Return navigator. appName. indexOf ("Microsoft Internet Explorer ")! =-1 & document. all;
}
Function isIE6 (){
Return navigator. userAgent. split (";") [1]. toLowerCase (). indexOf ("msie 6.0") = "-1 "? False: true;
}
Function isIE7 (){
Return navigator. userAgent. split (";") [1]. toLowerCase (). indexOf ("msie 7.0") = "-1 "? False: true;
}
Function isIE8 (){
Return navigator. userAgent. split (";") [1]. toLowerCase (). indexOf ("msie 8.0") = "-1 "? False: true;
}
Function isNN (){
Return navigator. userAgent. indexOf ("Netscape ")! =-1;
}
Function isOpera (){
Return navigator. appName. indexOf ("Opera ")! =-1;
}
Function isFF (){
Return navigator. userAgent. indexOf ("Firefox ")! =-1;
}
Function isChrome (){
Return navigator. userAgent. indexOf ("Chrome")>-1;
}

2,The second method is the object/feature detection method, which is a method to judge the browser capability and is also a popular method. Check whether an object exists before it is used. This method is used in the addEvent method mentioned above .. AddEventListener is the w3c dom standard, while IE uses its own attachEvent. The following are some examples:

A, talbe. cells is only supported by IE/Opera.

B. innerText/insertAdjacentHTML supports IE6/7/8/Safari/Chrome/Opera except Firefox.

C, window. external. AddFavorite is used to add to favorites under IE.

D, window. sidebar. addPanel is used to add to favorites under FF.

3,The third is very interesting. It is also known as browser defects or bugs, that is, some of the performance is not implemented by browser vendors. As follows:

Copy codeThe Code is as follows: var isIE =! + "\ V1 ";
Var isIE =! -[1,];
Var isIE = "\ v" = "v ";
IsSafari =/a/. _ proto __= = '//';
IsOpera = !! Window. opera;

The most classic is! -[1,] method of judging. Currently, the minimum code is used to determine the IE Method. Only 6 bytes are required. This was discovered by a Russian. The length of array [1,] is used. James Padolsey, a young man from the UK, used the IE condition annotation.Copy codeThe Code is as follows: var ie = (function (){
Var undef,
V = 3,
Div = document. createElement ('div '),
All = div. getElementsByTagName ('I ');

While (
Div. innerHTML = '<! -- [If gt IE '+ (++ v) +']> <I> </I> <! [Endif] --> ',
All [0]
);
Return v> 4? V: undef
}());

It is called the most creative IE judgment in history.

Note 1: IE9 has fixed this bug in the isIE = "\ v" = "v" mode. You cannot use this method to determine the IE browser (IE9 pre3 was used for testing in)

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.