利用JavaScript判斷瀏覽器類型及版本
本文將介紹如何使用Javascript來檢測瀏覽器的類型以及版本號,包括獵豹瀏覽器、搜狗瀏覽器、傲游瀏覽器、360極速瀏覽器、360安全瀏覽器、QQ瀏覽器、百度瀏覽器、IE,Firefox,Chrome,safari,Opera等。
效果圖
實例代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JavaScript判斷瀏覽器類型及版本</title> <script type= "text/javascript" > /** * 獲取瀏覽器類型以及版本號 * 支持國產(chǎn)瀏覽器:獵豹瀏覽器、搜狗瀏覽器、傲游瀏覽器、360極速瀏覽器、360安全瀏覽器、 * QQ瀏覽器、百度瀏覽器等. * 支持國外瀏覽器:IE,Firefox,Chrome,safari,Opera等. * 使用方法: * 獲取瀏覽器版本:Browser.client.version * 獲取瀏覽器名稱(外殼):Browser.client.name * @author:xuzengqiang * @since :2015-1-27 10:26:11 **/ var Browser=Browser || (function(window){ var document = window.document, navigator = window.navigator, agent = navigator.userAgent.toLowerCase(), //IE8+支持.返回瀏覽器渲染當(dāng)前文檔所用的模式 //IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8) //IE10:10(兼容模式7||8||9) IEMode = document.documentMode, //chorme chrome = window.chrome || false , System = { //user-agent agent : agent, //是否為IE isIE : /msie/.test(agent), //Gecko內(nèi)核 isGecko: agent.indexOf( "gecko" )> 0 && agent.indexOf( "like gecko" )< 0 , //webkit內(nèi)核 isWebkit: agent.indexOf( "webkit" )> 0 , //是否為標(biāo)準(zhǔn)模式 isStrict: document.compatMode === "CSS1Compat" , //是否支持subtitle supportSubTitle:function(){ return "track" in document.createElement( "track" ); }, //是否支持scoped supportScope:function(){ return "scoped" in document.createElement( "style" ); }, //獲取IE的版本號 ieVersion:function(){ try { return agent.match(/msie ([\d.]+)/)[ 1 ] || 0 ; } catch (e) { console.log( "error" ); return IEMode; } }, //Opera版本號 operaVersion:function(){ try { if (window.opera) { return agent.match(/opera.([\d.]+)/)[ 1 ]; } else if (agent.indexOf( "opr" ) > 0 ) { return agent.match(/opr\/([\d.]+)/)[ 1 ]; } } catch (e) { console.log( "error" ); return 0 ; } }, //描述:version過濾.如31.0.252.152 只保留31.0 versionFilter:function(){ if (arguments.length === 1 && typeof arguments[ 0 ] === "string" ) { var version = arguments[ 0 ]; start = version.indexOf( "." ); if (start> 0 ){ end = version.indexOf( "." ,start+ 1 ); if (end !== - 1 ) { return version.substr( 0 ,end); } } return version; } else if (arguments.length === 1 ) { return arguments[ 0 ]; } return 0 ; } }; try { //瀏覽器類型(IE、Opera、Chrome、Safari、Firefox) System.type = System.isIE? "IE" : window.opera || (agent.indexOf( "opr" ) > 0 )? "Opera" : (agent.indexOf( "chrome" )> 0 )? "Chrome" : //safari也提供了專門的判定方式 window.openDatabase? "Safari" : (agent.indexOf( "firefox" )> 0 )? "Firefox" : 'unknow' ; //版本號 System.version = (System.type === "IE" )?System.ieVersion(): (System.type === "Firefox" )?agent.match(/firefox\/([\d.]+)/)[ 1 ]: (System.type === "Chrome" )?agent.match(/chrome\/([\d.]+)/)[ 1 ]: (System.type === "Opera" )?System.operaVersion(): (System.type === "Safari" )?agent.match(/version\/([\d.]+)/)[ 1 ]: "0" ; //瀏覽器外殼 System.shell=function(){ //遨游瀏覽器 if (agent.indexOf( "maxthon" ) > 0 ) { System.version = agent.match(/maxthon\/([\d.]+)/)[ 1 ] || System.version ; return "傲游瀏覽器" ; } //QQ瀏覽器 if (agent.indexOf( "qqbrowser" ) > 0 ) { System.version = agent.match(/qqbrowser\/([\d.]+)/)[ 1 ] || System.version ; return "QQ瀏覽器" ; } //搜狗瀏覽器 if ( agent.indexOf( "se 2.x" )> 0 ) { return '搜狗瀏覽器' ; } //Chrome:也可以使用window.chrome && window.chrome.webstore判斷 if (chrome && System.type !== "Opera" ) { var external = window.external, clientInfo = window.clientInformation, //客戶端語言:zh-cn,zh.360下面會返回undefined clientLanguage = clientInfo.languages; //獵豹瀏覽器:或者agent.indexOf("lbbrowser")>0 if ( external && 'LiebaoGetVersion' in external) { return '獵豹瀏覽器' ; } //百度瀏覽器 if (agent.indexOf( "bidubrowser" )> 0 ) { System.version = agent.match(/bidubrowser\/([\d.]+)/)[ 1 ] || agent.match(/chrome\/([\d.]+)/)[ 1 ]; return "百度瀏覽器" ; } //360極速瀏覽器和360安全瀏覽器 if ( System.supportSubTitle() && typeof clientLanguage === "undefined" ) { //object.key()返回一個數(shù)組.包含可枚舉屬性和方法名稱 var storeKeyLen = Object.keys(chrome.webstore).length, v8Locale = "v8Locale" in window; return storeKeyLen > 1 ? '360極速瀏覽器' : '360安全瀏覽器' ; } return "Chrome" ; } return System.type; }; //瀏覽器名稱(如果是殼瀏覽器,則返回殼名稱) System.name = System.shell(); //對版本號進(jìn)行過濾過處理 System.version = System.versionFilter(System.version); } catch (e) { console.log( "error" ); } return { client:System }; })(window); alert(Browser.client.name+ " " +Browser.client.version); </script> </head> <body> </body> </html>
總結(jié)
以上就是本文的全部內(nèi)容,希望對大家的開發(fā)能有所幫助。如果有疑問可以留言討論。
- JS如何判斷瀏覽器類型和詳細(xì)區(qū)分IE各版本瀏覽器
- js根據(jù)手機(jī)客戶端瀏覽器類型,判斷跳轉(zhuǎn)官網(wǎng)/手機(jī)網(wǎng)站多個實例代碼
- js/jquery判斷瀏覽器類型的方法小結(jié)
- js判斷當(dāng)前瀏覽器類型,判斷IE瀏覽器方法
- 利用js判斷瀏覽器類型(是否為IE,Firefox,Opera瀏覽器)
- js如何判斷不同系統(tǒng)的瀏覽器類型
- js判斷手機(jī)瀏覽器操作系統(tǒng)和微信瀏覽器的方法
- 封裝好的js判斷操作系統(tǒng)與瀏覽器代碼分享
- 利用Javascript判斷操作系統(tǒng)的類型實現(xiàn)不同操作系統(tǒng)下的兼容性
- JS判斷瀏覽器類型與操作系統(tǒng)的方法分析
相關(guān)文章
利用Javascript判斷操作系統(tǒng)的類型實現(xiàn)不同操作系統(tǒng)下的兼容性
在通過Javascript實現(xiàn)客戶端和服務(wù)端的交互時,有時候需要對操作系統(tǒng)進(jìn)行判斷,以便實現(xiàn)不同操作系統(tǒng)下的兼容性;從而實現(xiàn)網(wǎng)站在跨平臺瀏覽時候保持良好的用戶體驗,感興趣的朋友可以了解下啊,或許對你有所幫助2013-01-01js為鼠標(biāo)添加右擊事件防止默認(rèn)的右擊菜單彈出
本文為大家介紹下如何為使用js為鼠標(biāo)添加右擊事件防止默認(rèn)的右擊菜單彈出,感興趣的朋友可以參考下,希望對大家有所幫助2013-07-07詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)
這篇文章主要介紹了詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03javascript中typeof操作符和constucor屬性檢測
這篇文章主要介紹了javascript中typeof操作符和constucor屬性檢測的相關(guān)資料,需要的朋友可以參考下2015-02-02JavaScript數(shù)組常用的增刪改查與其他屬性詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組常用的增刪改查與其他屬性的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10正則表達(dá)式判斷是否存在中文和全角字符和判斷包含中文字符串長度
對于一些更安全的容錯嚴(yán)重,需要用到2008-09-09bootstrapValidator表單驗證插件學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了表單驗證插件bootstrapValidator的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript 預(yù)解析的4種實現(xiàn)方法解析
這篇文章主要介紹了JavaScript 預(yù)解析的4種實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09