JS magic Hall: accurately identifies the document mode of IE by feature sniffing

I. preface the tough front-end attacking lions are all suffering from browser compatibility, so you have to look around before completing each function, for fear that the browser does not support an API, for fear that the native API contains bugs, so determining the browser type and version number becomes a level that cannot be bypassed, and feature sniffing is another powerful tool after browser detection to deal with the above problems. Ii. What is feature sniffing? In the past, we used to distinguish the browser type and obtain the version number by matching and extracting the specific string values of navigator. userAgent or navigator. appName. However, as IE8 provides optional document compatibility mode settings and various shelling browsers, the navigator cannot be used. userAgent and navigator. the appName attribute value accurately determines the actual API features and document modes provided by the browser, So feature sniffing occurs. In fact, feature sniffing solves two problems: first, whether a feature is supported; second, what is the current document mode (note that it is the document mode, not the browser version number ). The famous var isLteIE8 =! + [1,]; it is the feature sniffing method used to determine whether the image is in IE5678 document mode. 3. Copy the code in IE's current document mode // determine whether it is IEvar isIE = navtigator. userAgent. toLocaleLowerCase (). indexOf ('msi ')! =-1; // determine whether it is IE5678var isLteIE8 = isIE &&! + [1,]; // prevents Invalid Version determination due to setting document mode in IE8 + document compatibility mode. var dm = document.doc umentMode, isIE5, isIE6, isIE7, isIE8, isIE9, isIE10, isIE11; if (dm) {isIE5 = dm = 5; isIE6 = dm = 6; isIE7 = dm = 7; isIE8 = dm = 8; isIE9 = dm = 9; isIE10 = dm = 10; isIE11 = dm = 11 ;} else {// determine whether it is IE5. The text mode of IE5 is quirks. isIE5 = (isLteIE8 & document. compatMode = 'backcomput'); // determines whether IE6 exists. IE7 starts to have the XMLHttpRequest object isI. E6 = isLteIE8 &&! IsIE5 &&! XMLHttpRequest; // The parameter named IE7 or ie8starts with document.doc umentMode attribute isIE7 = isLteIE8 &&! IsIE6 &&! Document.doc umentMode; // determine whether IE8 isIE8 = isLteIE8 & document.doc umentMode; // judge IE9. IE10 supports strict mode. In strict mode, this is undefined isIE9 =! IsLteIE8 & (function () {"use strict"; return !! This;} (); // judge IE10. IE11 begins to remove the attachEvent attribute isIE10 = isIE &&!! Document. attachEvent & (function () {"use strict"; return! This ;}(); // judge IE11 isIE11 = isIE &&! Document. attachEvent;} copy the code. Note: If you set the document mode to IE6 by specifying the document compatibility mode through IE8 +, var isIE6 = isLteIE8 &&! IsIE5 &&! XMLHttpRequest is incorrect because XMLHttpRequest exists at this time, because the document compatibility mode only simulates the old version of the browser as much as possible, not exactly the old version of the browser. You can directly use document.doc umentMode to determine the current document mode.