zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript之检测篇:浏览器能力/设备类型/API

JavaScript设备浏览器API 类型 检测 能力
2023-09-27 14:24:42 时间

#1 检查浏览器种类及其版本号

//检查浏览器种类及其版本号
function checkBrowserVersion(){
	            var Sys = {};
                var ua = navigator.userAgent.toLowerCase();
                var s;
                (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
                (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
                (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
                (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
                (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
                //以下进行测试
                if (Sys.ie)      return {"browser":"IE","version":Sys.ie};
                if (Sys.firefox) return {"browser":"Firefox","version":Sys.firefox};
                if (Sys.chrome)  return {"browser":"Chrome","version":Sys.chrome};
                if (Sys.opera)   return {"browser":"Opera","version":Sys.opera};
                if (Sys.safari)  return {"browser":"Safari","version":Sys.safari};
}

// test
checkBrowserVersion();
// {browser: "Chrome", version: "61.0.3163.100"}   

 

#2 判断当前浏览器所在设备是否为PC电脑?

function isPC() {  
   var userAgentInfo = navigator.userAgent;  
   var Agents = ['Android', 'iPhone',  
	   'SymbianOS', 'Windows Phone',  
	   'iPad', 'iPod'  
   ];
   var flag = true;  
   for (var i = 0; i < Agents.length; i++) {  
	   if (userAgentInfo.indexOf(Agents[i]) != -1) {  
		   flag = false;  
		   break;  
	   }  
   }
   return flag;  
}

 

#3 判断是否支持标签的某属性

var isSupportProperty_required_of_InputElement = 'required' in document.createElement('input'); 

 

#4 判断是否支持JS的API(函数/对象/字符串/数值/...)

/**
    isSupportedJSAPI({api:"document", isStringOfFirstArg:true}); // object
    isSupportedJSAPI({api:"document", isStringOfFirstArg:false}); // string [不推荐]
    isSupportedJSAPI({api: document, isStringOfFirstArg:true}); // object [不推荐]
    isSupportedJSAPI({api: document, isStringOfFirstArg:false}); // object

    isSupportedJSAPI({api:"document.selection", isStringOfFirstArg:true}); //document.selection 's type is  undefined / false
    isSupportedJSAPI({api:"document.getSelection", isStringOfFirstArg:true});//document.getSelection 's type is  function / true

    isSupportedJSAPI({api:"myFunc", isStringOfFirstArg:true});// function
    isSupportedJSAPI({api:"myFunc", isStringOfFirstArg:false}); // string [不推荐]
    isSupportedJSAPI({api: myFunc, isStringOfFirstArg:true}); // function [不推荐]
    isSupportedJSAPI({api: myFunc, isStringOfFirstArg:false}); // function
    */
function isSupportedJSAPI({api, isStringOfFirstArg}){//是否是被支持的JSAPI
    var typeResult = null;
    try {
        if(isStringOfFirstArg == true){
            typeResult = typeof eval(api); // typeof eval("document") === "object" 与 typeof eval(document) === "object" 等效
        } else {
            typeResult = typeof api;
        }
        console.log(api, '\'s type is ', typeResult);
        if(typeResult === 'undefined'){//未初始化的变量 也是 undefined
            return {type: typeResult, suported: false };
        } else { // function / object / string / boolean / number 【注】 null 系 object 类型
            return {type: typeResult, suported: true };
        }
    } catch(error) {
        console.log("throw a exception!");
        console.log(error.message);
    }
}

 

#X 参考文献

    JS 获得浏览器类型和版本