カプセル化された 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 のナビゲータをインターセプトしました。今後chromeのナビの情報位置やchrome以降の長さが変わると不具合が起きやすいかもしれませんが、今のところは大丈夫そうです。

モバイル UC ブラウザは、Baidu 広告をブロックすることがよくありますが、Google 広告はブロックしないため、UC ブラウザであるかどうかを判断するために追加できます。UC ブラウザではない場合は、Baidu 広告を表示します。 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