Front words

Although browser providers have invested a lot of effort in implementing public interfaces, the result is that each browser has its own strengths and weaknesses. So far, client detection is still a controversial topic in the field of Web development. When it comes to this topic, people always mention that browsers should support a set of the most commonly used public functions. But in reality, there are so many differences between browsers and so many quirks from different browsers.

There are many ways to detect Web clients, and each has its own advantages and disadvantages. But don't use client detection unless you have to. As long as more general methods can be found, more general methods should be preferred. The most commonly used and widely accepted form of client detection is capability detection (also known as feature detection). This article will introduce in detail the capability detection of client detection.

 

Definition

The goal of capability detection is not to identify a particular browser, but to identify the browser's ability. The basic modes of capability testing are as follows:

if(Object.propertyInQuestion){

    //Use Object.propertyInQuestion

}

[Notes]

When using capability testing, we should pay attention to not only detecting the existence of this feature. Take sort sorting as an example

function isSortable(object){
    return !!object.sort;
}

The above function determines whether the object supports sorting by detecting whether there is a sort() method for the object. But the problem is that any object that contains the sort attribute returns true as well.

var result = isSortable({sort:true});

Detecting whether an attribute exists does not determine whether the object supports sorting. Better yet, is sort a function?

function isSortable(object){
    return typeof object.sort == "function";
}   

The above typeof operator is used to determine that sort is indeed a function, so it can be called to sort data.

[BUG]

In IE, typeof xhr.open returns "unkown"

if(window.ActiveXObject){
    var xhr = new ActiveXObject("Microsoft.XMLHttp");
    alert(typeof xhr.open)    
}

To test whether a feature of any object exists in a browser environment, use the following function

function isHostMethod(object,property){
    var t = typeof object[property];
    return t == "function" || (!!(t == "object" && object[property])) || t== "unknown";
}   

Next, the ability detection for different browsers will be described separately.

 

Single version IE

If you want to identify a single version of IE browser through capability testing, document The documentMode attribute is undoubtedly very appropriate. This property is supported only by IE browser and represents the current document mode.

    //IE11 Back to 11. IE10 Back to 10. IE9 Back to 9. IE8 Back to 8. IE7 Back to 7. IE6 Return to 6
    console.log(document.documentMode);

    function isIE6(){
        return document.documentMode == 6;
    }

Similarly, low-level versions of IE, such as IE7-browser, can also be identified.

    function lteIE7(){
        return document.documentMode <= 7;
    }

 

IE7-

In addition to using the document.documentMode attribute, there are other methods

[1] IE7 - In browser, get Characteristic node All features, including built-in features, are obtained. The 0th feature node is onmsanimationiteration, and its specified attribute is false. IE8 + and other browsers can only get the set feature nodes, and the specified attribute is always true.

function lteIE7(){
    var div = document.createElement('div');
    var temp = div.attributes[0];
    return (Boolean(temp) && !temp.specified);
}

IE7-Browser does not support querySelector() And querySelectorAll()

function lteIE7(){
    var temp = typeof document.querySelector;
    if(temp == 'undefined'){
        return true;
    }
}

IE7-Browser does not support JSON object

function lteIE7(){
    try{
        JSON;
    }catch(error){
        return true;
    }    
}

 

IE8-

IE8-Browser does not support getComputedStyle() method This method is a set of attribute values that are actually used when displaying elements, represented by a CSSStyleDeclaration object

function lteIE8(){
    var temp = typeof window.getComputedStyle;
    if(temp == 'undefined'){
        return true;
    }
}

IE8-Browser does not support Document Type Node document.doctype

function lteIE8(){
    var temp = document.doctype;
    if(temp == null){
        return true;
    }
}

[3] The host object of IE8-is implemented by COM rather than javascript. Therefore, the document.createElement() function is a COM object, so typeof returns "Object"

function lteIE8(){
    var temp = typeof document.createElement
    if(temp == "object"){
        return true;
    }
}

 

IE9-

IE9-Browser does not support HTML5's new timer requestAnimationFrame

function lteIE9(){
    try{
        requestAnimationFrame;
    }catch(error){
        return true;
    }    
}

　　[2]async attribute HTML5 is a new attribute, IE9-browser does not support

function lteIE9(){
    var temp = document.createElement('script');
    if(!temp.async){
        return true;
    }
}

The window.matchMedia() method is used to check CSS mediaQuery statement IE9 - Browsers do not support

function lteIE9(){
    var temp = window.matchMedia;
    if(!temp){
        return true;
    }
}

 

IE10-

IE10-Browser does not support Custom attribute dataset

function lteIE10(){
    var temp = document.createElement('div').dataset;
    if(!temp){
        return true;
    }
}

IE10-Browser does not support navigator object The language attribute of ____________

function lteIE10(){
    var temp = navigator.language;
    if(!temp){
        return true;
    }
}

[3] IE10-Browser does not support product attributes of navigator objects

function lteIE10(){
    var temp = navigator.product;
    if(!temp){
        return true;
    }
}

 

chrome

Chrome browser has a proprietary chrome attribute under the window object and returns an object

function isChrome(){
    if(window.chrome){
        return true;
    }
}