JavaScript 判斷國內(nèi)外瀏覽器類型和內(nèi)核(含360,QQ,搜狗等)

在開發(fā)時(shí)某些環(huán)境問題會(huì)給導(dǎo)致項(xiàng)目運(yùn)行異常，如不同瀏覽器的同款內(nèi)核下，有些程序的表現(xiàn)不盡相同，如360的加殼chrome內(nèi)核和谷歌瀏覽器的chrome內(nèi)核，但是在不能更換瀏覽器的情況下髓需，就盡量需要根據(jù)環(huán)境的類型做判斷來避免某些錯(cuò)誤，提升用戶體驗(yàn)房蝉。

關(guān)于判斷瀏覽器的內(nèi)核和類型僚匆，有許多資料可供查閱微渠。這里記錄一款一個(gè)比較好用的插件：browser.js

插件git地址:https://github.com/yunnysunny/browser.js

目前該插件還存在bug，對(duì)于360安全瀏覽器和極速瀏覽器還不能區(qū)分開咧擂，返回的結(jié)果都是一樣的逞盆。

該插件對(duì)于IE內(nèi)核的瀏覽器類型沒有進(jìn)行判斷。僅僅是針對(duì)chrome內(nèi)核的瀏覽器類型做處理松申。

下面是本人在源碼的基礎(chǔ)上增加的一個(gè)可支持IE內(nèi)核下瀏覽器類型的判斷云芦，其他判斷都沒改變。

代碼的返回JSON格式如下：

image

browser.js


(function() {

var packageName = 'brw';

if(!window[packageName]) {

window[packageName] = {};

window[packageName]["browserInfo"] = {};

}

var MAX_360_CHROME_VERSION = 69; //以360極速瀏覽器的最大內(nèi)核版本為準(zhǔn)

function getIOSVersion(ua) {

if(/cpu (?:iphone )?os (\d+_\d+)/.test(ua)) {

return parseFloat(RegExp.$1.replace("_", "."));

} else {

return 2;

}

}

function _mime(where, value, name, nameReg) {

var mimeTypes = window.navigator.mimeTypes,

i;

for(i in mimeTypes) {

if(mimeTypes[i][where] == value) {

if(name !== undefined && nameReg.test(mimeTypes[i][name])) return !0;

else if(name === undefined) return !0;

}

}

return !1;

}

var browser360 = {

result: "Chrome",

details: {

Chrome: 5,

Chromium: 0,

_360SE: 0,

_360EE: 0

},

sorted: ["Chrome", "360SE", "360EE", "Chromium"],

check: function() {

var init = {

Chrome: 5,

Chromium: 0,

_360SE: 0,

_360EE: 0

};

var plugins = window.navigator.plugins;

var webstore = window.chrome.webstore;

var webstoreLen = Object.keys(webstore).length;

var pluginsLen = plugins.length;

if(window.clientInformation.languages ||

(init._360SE += 8), /zh/i.test(navigator.language) &&

(init._360SE += 3, init._360EE += 3), window.clientInformation.languages) {

var lanLen = window.clientInformation.languages.length;

if(lanLen >= 3) {

(init.Chrome += 10, init.Chromium += 6);

} else if(2 == lanLen) {

init.Chrome += 3, init.Chromium += 6, init._360EE += 6;

} else if(1 == lanLen) {

init.Chrome += 4, init.Chromium += 4;

}

}

var pluginFrom,

maybe360 = 0;

for(var r in plugins) {

if(pluginFrom = /^(.+) PDF Viewer$/.exec(plugins[r].name)) {

if("Chrome" == pluginFrom[1]) {

init.Chrome += 6,

init._360SE += 6,

maybe360 = 1;

} else if("Chromium" == pluginFrom[1]) {

init.Chromium += 10,

init._360EE += 6,

maybe360 = 1;

}

} else if("np-mswmp.dll" == plugins[r].filename) {

init._360SE += 20, init._360EE += 20;

}

}

maybe360 || (init.Chromium += 9);

if(webstoreLen <= 1) {

init._360SE += 7;

} else {

init._360SE += 4;

init.Chromium += 3;

if(pluginsLen >= 30) {

init._360EE += 7, init._360SE += 7, init.Chrome += 7;

} else if(pluginsLen < 30 && pluginsLen > 10) {

init._360EE += 3, init._360SE += 3, init.Chrome += 3;

} else {

init.Chromium += 6;

}

}

var m = new Object();

m.Chrome = init.Chrome,

m.Chromium = init.Chromium,

m["360SE"] = init._360SE,

m["360EE"] = init._360EE;

var s = [];

for(var u in m) {

s.push([u, m[u]]);

}

s.sort(function(e, i) {

return i[1] - e[1]

});

this.sorted = s;

this.details = init;

this.result = s[0][0] || '';

return this.result.toLowerCase();

}

};

/**

* 獲取國內(nèi)加殼瀏覽器類型

*/

function _getShellerType() {

var brwType = "",

appVersion = window.navigator.appVersion,

external = window.external;

if(external && 'SEVersion' in external) { // 搜狗瀏覽器

brwType = 'sougou';

} else if(external && 'LiebaoGetVersion' in external) { // 獵豹瀏覽器

brwType = 'liebao';

} else if(/QQBrowser/.test(appVersion)) { //qq瀏覽器

brwType = 'qq';

} else if(/Maxthon/.test(appVersion)) { //遨游瀏覽器

brwType = 'maxthon';

} else if(/TaoBrowser/.test(appVersion)) { //淘寶瀏覽器

brwType = 'taobao';

} else if(/BIDUBrowser/.test(appVersion)) { //百度瀏覽器

brwType = 'baidu';

} else if(/UBrowser/.test(appVersion)) { //UC瀏覽器

brwType = 'uc';

}

return brwType;

}

/**

* 獲取 Chromium 內(nèi)核瀏覽器類型

* @link http://www.adtchrome.com/js/help.js

* @link https://ext.chrome.#/webstore

* @link https://ext.se.#

* @return {String}

*        360ee 360極速瀏覽器

*        360se 360安全瀏覽器

*        sougou 搜狗瀏覽器

*        liebao 獵豹瀏覽器

*        chrome 谷歌瀏覽器

*        ''    無法判斷

*/

function _getChromiumType(version) {

if(window.scrollMaxX !== undefined) return '';

var doc = document;

var _track = 'track' in doc.createElement('track');

var chromeBrowserType = _getShellerType();

if(chromeBrowserType != "") {

return chromeBrowserType;

}

if(window.navigator.vendor && window.navigator.vendor.indexOf('Opera') == 0) { //opera

return 'opera';

}

var p = navigator.platform.toLowerCase();

if(p.indexOf('mac') == 0 || p.indexOf('linux') == 0) {

return 'chrome';

}

if(parseInt(version) > MAX_360_CHROME_VERSION) {

return 'chrome';

}

return browser360.check();

}

var client = function() {

var browser = {};

var ua = navigator.userAgent.toLowerCase();

console.log(ua)

var s;

if(s = ua.match(/rv:([\d.]+)/)) {

browser.name = 'ie';

browser['ie'] = s[1];

if(ua.indexOf("wow") > -1) {

browser['type'] = _getShellerType() ? _getShellerType() : "360";

} else {

browser['type'] = "IE";

}

} else if(s = ua.match(/msie ([\d.]+)/)) {

browser.name = 'ie';

browser['ie'] = s[1];

if(ua.indexOf("wow") > -1) {

browser['type'] = _getShellerType() ? _getShellerType() : "360";

} else {

browser['type'] = "IE";

}

} else if(s = ua.match(/edge\/([\d.]+)/)) {

browser.name = 'edge';

browser['edge'] = s[1];

browser['type'] = "edge";

} else if(s = ua.match(/firefox\/([\d.]+)/)) {

browser.name = 'firefox';

browser['firefox'] = s[1];

browser['type'] = "firefox";

} else if(s = ua.match(/chrome\/([\d.]+)/)) {

browser.name = 'chrome';

browser['chrome'] = s[1];

var type = _getChromiumType(browser['chrome']);

if(type) {

browser['chrome'] += '(' + type + ')';

browser['type'] = type;

}

} else if(s = ua.match(/opera.([\d.]+)/)) {

browser.name = 'opera';

browser['opera'] = s[1];

browser['type'] = "opera";

} else if(s = ua.match(/version\/([\d.]+).*safari/)) {

browser.name = 'safari';

browser['safari'] = s[1];

browser['type'] = "safari";

} else {

browser.name = 'unknown';

browser['unknow'] = 0;

}

var system = {};

//detect platform

//        var p = navigator.platform.toLowerCase();

if(ua.indexOf('iphone') > -1) {

system.name = 'iphone';

system.iphone = getIOSVersion(ua);

} else if(ua.indexOf('ipod') > -1) {

system.name = 'ipod';

system.ipod = getIOSVersion(ua);

} else if(ua.indexOf('ipad') > -1) {

system.name = 'ipad';

system.ipad = getIOSVersion(ua);

} else if(ua.indexOf('nokia') > -1) {

system.name = 'nokia';

system.nokia = true;

} else if(/android (\d+\.\d+)/.test(ua)) {

system.name = 'android';

system.android = parseFloat(RegExp.$1);

} else if(ua.indexOf("win") > -1) {

system.name = 'win';

if(/win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {

if(RegExp["$1"] == "nt") {

switch(RegExp["$2"]) {

case "5.0":

system.win = "2000";

break;

case "5.1":

system.win = "XP";

break;

case "6.0":

system.win = "Vista";

break;

case "6.1":

system.win = "7";

break;

case "6.2":

system.win = "8";

break;

case "6.3":

system.win = "8.1";

break;

case '10.0':

system.win = '10';

break;

default:

system.win = "NT";

break;

}

} else if(RegExp["$1"] == "9x") {

system.win = "ME";

} else {

system.win = RegExp["$1"];

}

}

} else if(ua.indexOf("mac") > -1) {

system.name = 'mac';

} else if(ua.indexOf('linux') > -1) {

system.name = 'linux';

}

var str = system.name + (system[system.name] || '') + '|' + browser.name + browser[browser.name];

var isMobile = system.android || system.iphone || system.ios || system.ipad || system.ipod || system.nokia;

return {

browser: browser,

system: system,

isMobile: isMobile,

string: str

};

}();

window[packageName]['browserInfo'] = client;

})();

如何調(diào)用贸桶。


var browser = brw.browserInfo || {};

document.getElementById('info').innerHTML = '瀏覽器：'+ JSON.stringify( browser.browser) + ',操作系統(tǒng)：'+ JSON.stringify( browser.system)+'<br/>'+browser.string;

效果圖

image

希望可以對(duì)于有需要的兄弟有所幫助舅逸。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市皇筛，隨后出現(xiàn)的幾起案子琉历，更是在濱河造成了極大的恐慌，老刑警劉巖水醋，帶你破解...
沈念sama閱讀 222,729評(píng)論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件旗笔，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡拄踪，警方通過查閱死者的電腦和手機(jī)换团，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,226評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來宫蛆，“玉大人间景，你說我怎么就攤上這事肘迎。” “怎么了房匆？”我有些...
開封第一講書人閱讀 169,461評(píng)論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵卦尊，是天一觀的道長叛拷。經(jīng)常有香客問我，道長岂却，這世上最難降的妖魔是什么忿薇？我笑而不...
開封第一講書人閱讀 60,135評(píng)論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮躏哩，結(jié)果婚禮上署浩，老公的妹妹穿的比我還像新娘。我一直安慰自己扫尺，他們只是感情好筋栋，可當(dāng)我...
茶點(diǎn)故事閱讀 69,130評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著正驻，像睡著了一般弊攘。火紅的嫁衣襯著肌膚如雪抢腐。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,736評(píng)論 1贊 312
城市分裂傳說
那天襟交，我揣著相機(jī)與錄音迈倍，去河邊找鬼。笑死捣域，一個(gè)胖子當(dāng)著我的面吹牛啼染，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播竟宋，決...
沈念sama閱讀 41,179評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼提完，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了丘侠？” 一聲冷哼從身側(cè)響起徒欣，我...
開封第一講書人閱讀 40,124評(píng)論 0贊 277
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蜗字，沒想到半個(gè)月后打肝，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,657評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡挪捕，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,723評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年粗梭，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片级零。...
茶點(diǎn)故事閱讀 40,872評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡断医，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出奏纪，到底是詐尸還是另有隱情鉴嗤，我是刑警寧澤，帶...
沈念sama閱讀 36,533評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布序调，位于F島的核電站醉锅，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏发绢。R本人自食惡果不足惜硬耍，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,213評(píng)論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望边酒。院中可真熱鬧经柴，春花似錦、人聲如沸墩朦。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,700評(píng)論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至鹃操，卻和暖如春韭寸，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背荆隘。一陣腳步聲響...
開封第一講書人閱讀 33,819評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工恩伺，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人椰拒。一個(gè)月前我還...
沈念sama閱讀 49,304評(píng)論 3贊 379
代替公主和親
正文我出身青樓晶渠，卻偏偏與公主長得像，于是被迫代替她去往敵國和親燃观。傳聞我的和親對(duì)象是個(gè)殘疾皇子褒脯，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,876評(píng)論 2贊 361

JavaScript 判斷國內(nèi)外瀏覽器類型和內(nèi)核(含360,QQ,搜狗等)

推薦閱讀更多精彩內(nèi)容