DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 封裝好的js判斷操作系統與浏覽器代碼分享
封裝好的js判斷操作系統與浏覽器代碼分享
編輯:關於JavaScript     

摘要:
  對於前端開發我們最重要的工作就是兼容性,系統的兼容性,浏覽器的兼容性等等。今天分享一個我在項目中封裝的判斷操作系統與浏覽器的方法。

操作系統:

var os = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isIpad     : /ipad/.test(UserAgent),
    isIphone    : /iphone os/.test(UserAgent),
    isAndroid    : /android/.test(UserAgent),
    isWindowsCe   : /windows ce/.test(UserAgent),
    isWindowsMobile : /windows mobile/.test(UserAgent),
    isWin2K     : /windows nt 5.0/.test(UserAgent),
    isXP      : /windows nt 5.1/.test(UserAgent),
    isVista     : /windows nt 6.0/.test(UserAgent),
    isWin7     : /windows nt 6.1/.test(UserAgent),
    isWin8     : /windows nt 6.2/.test(UserAgent),
    isWin81     : /windows nt 6.3/.test(UserAgent)
  };
}());

如果要判斷系統是否是iPad,只需要判斷if(os.isIpad) {}.

浏覽器:
 

var bw = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isUc   : /ucweb/.test(UserAgent), // UC浏覽器
    isChrome : /chrome/.test(UserAgent.substr(-33,6)), // Chrome浏覽器
    isFirefox : /firefox/.test(UserAgent), // 火狐浏覽器
    isOpera  : /opera/.test(UserAgent), // Opera浏覽器
    isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire浏覽器
    is360   : /360se/.test(UserAgent), // 360浏覽器
    isBaidu  : /bidubrowser/.test(UserAgent), // 百度浏覽器
    isSougou : /metasr/.test(UserAgent), // 搜狗浏覽器
    isIE6   : /msie 6.0/.test(UserAgent), // IE6
    isIE7   : /msie 7.0/.test(UserAgent), // IE7
    isIE8   : /msie 8.0/.test(UserAgent), // IE8
    isIE9   : /msie 9.0/.test(UserAgent), // IE9
    isIE10  : /msie 10.0/.test(UserAgent), // IE10
    isIE11  : /msie 11.0/.test(UserAgent), // IE11
    isLB   : /lbbrowser/.test(UserAgent), // 獵豹浏覽器
     isWX   : /micromessenger/.test(UserAgent), // 微信內置浏覽器
    isQQ   : /qqbrowser/.test(UserAgent) // QQ浏覽器
  };
}());

]

小結:
  浏覽器都是本人親自測試的,可能會有問題的是chrome浏覽器,因為大部分浏覽器都是使用WebKit內核,所以我就把chrome的navigator截取出來區分。如果以後chrome的navigator的信息位置或者chrome之後的長度發生改變就容易出現問題,但目前來看是可以的。

現在因為手機UC浏覽器經常屏蔽百度的廣告,但對google廣告不屏蔽,我們可以加入判斷是否為UC浏覽器,不是就顯示百度廣告,是就顯示google的廣告

if(navigator.userAgent.indexOf('UCBrowser') > -1) {
alert("uc浏覽器");
}else{
//不是uc浏覽器執行的操作
}

其實具體的浏覽器的一些特殊的操作可以通過

JS獲取浏覽器信息
浏覽器代碼名稱:navigator.appCodeName
浏覽器名稱:navigator.appName
浏覽器版本號:navigator.appVersion
對Java的支持:navigator.javaEnabled()
MIME類型(數組):navigator.mimeTypes
系統平台:navigator.platform
插件(數組):navigator.plugins
用戶代理:navigator.userAgent

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved