Use JS to detect the implementation of the browser code _ basic knowledge

Source: Internet
Author: User

In the writing Cross-browser JS program, the detection browser is a very important work. We occasionally write branch codes for different browsers.
The following is a:

Copy Code code as follows:

Add 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 type of detection browser is called the User-agent detection method. Is the oldest, it detects the exact model of the target browser, including the name and version of the browser. is actually a string, obtained with Navigator.useragen or navigator.appname. As follows:
Copy Code code 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 is called object/feature detection, which is a way to judge the capabilities of browsers, and is the current fashion. That is, to detect the existence of an object before it is used. This approach is used in the Addevent method mentioned above ... AddEventListener is the standard method of the DOM, while IE uses its own unique attachevent. Here are a few examples:

A,talbe.cells only Ie/opera support.

b,innertext/insertadjacenthtml except Firefox, Ie6/7/8/safari/chrome/opera all support.

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 interesting, for the moment called a browser flaw or bug way, that some of the performance is not the browser manufacturer deliberately implemented. As follows:

Copy Code code as follows:

var Isie =!+ "\v1";
var Isie =!-[1,];
var Isie = "\v" = = "V";
issafari=/a/.__proto__== '//';
isopera=!! Window.opera;

The most classic is!-[1,] the way to judge the current minimum code for IE, just 6 byte. It was discovered by a Russian. The length of the array [1,] is used. And young James Padolsey from England. Using IE condition annotation
Copy Code code 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
}());

is called the most creative ie judgment in history.

Note 1:isie = "\v" = "V" Way IE9 has fixed the bug, can't judge IE browser in this way (2010-6-29 with IE9 pre3 test)

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.