JavaScript-如何用 JavaScript 探测当前浏览器是否为 WebKit 内核?

JavaScript-如何用 JavaScript 探测当前浏览器是否为 WebKit 内核?

甜柠檬 发布于 2017-06-20 字数 147 浏览 1359 回复 6

User Agent String 不是很靠谱,所以最好是特性探测。另外一个需要注意的就是时效问题,最好可以保证这个探测方法在未来一段时间内都可以可靠地运作。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

清晨说ぺ晚安 2017-11-06 6 楼

jquery的插件扩展

jQuery.myPlugin = {
//获得浏览器的内核与外壳的类型和版本
Client: function (){
//浏览器内核类型(只有五种)
var engine = { ie:0, webkit:0, gecko:0, opera:0, khtml:0 };
//浏览器外壳类型(国内常见的浏览器有:360浏览器、傲游、腾讯QQTT浏览器、世界之窗、彗星浏览器、绿色浏览器、传统IE、谷歌Chrome、网景netscape、火狐、Opera、苹果Safari等等)
var shell = { se360:0, se:0, maxthon:0, qq:0, tt:0, theworld:0, cometbrowser:0, greenbrowser:0, ie:0, chrome:0, netscape:0, firefox:0, opera:0, safari:0, konq:0 };
//获得客户端浏览器的信息
var ua = navigator.userAgent.toLowerCase();
for (var type in engine) {
if (typeof type === 'string') {
var regexp = 'gecko' === type ? /rv:([w.]+)/ : RegExp(type + '[ \/]([\w.]+)');
if (regexp.test(ua)){
engine.version = window.opera ? window.opera.version() : RegExp.$1;//浏览器内核版本
engine[type] = parseFloat(engine.version);
engine.type = type;//浏览器内核类型
break;
}
}
}
for (var type in shell) {
if (typeof type === 'string') {
var regexp = null;
switch(type) {
case "se360": regexp = /360se(?:[ /]([w.]+))?/; break;
case "se": regexp = /se ([w.]+)/; break;
case "qq": regexp = /qqbrowser/([w.]+)/; break;
case "tt": regexp = /tencenttraveler ([w.]+)/; break;
case "safari": regexp = /version/([w.]+)/; break;
case "konq": regexp = /konqueror/([w.]+)/; break;
case "netscape": regexp = /navigator/([w.]+)/; break;
default: regexp = RegExp(type + '(?:[ \/]([\w.]+))?');
}
if (regexp.test(ua)) {
shell.version = window.opera ? window.opera.version() : RegExp.$1 ? RegExp.$1 : 'unknown';//浏览器外壳版本
shell[type] = parseFloat(shell.version);
shell.type = type;//浏览器外壳类型
break;
}
}
}
//返回浏览器内核与外壳的类型和版本:engine为内核,shell为外壳
return { engine: engine, shell: shell };
}
};

//使用
内核类型:jQuery.myBrowser.engine.type
内核版本:jQuery.myBrowser.engine.version
外壳类型:"+jQuery.myBrowser.shell.type
外壳版本:"+jQuery.myBrowser.shell.version

浮生未歇 2017-10-27 5 楼

如果用户的 UA 声明了自己是 Webkit,就应该按 Webkit 进行处理。

如果非要用特性检测,很简单地搞一下的话这样应该可以(当然很老的 Webkit 版本没有):

 var isWebkit = function() {
return document.body.style.WebkitBoxShadow !== undefined;
};

但我觉得探测是否 Webkit 内核没有多大意义,因为随着版本更新变化,你要使用的 feature 也可能不是所有 Webkit 内核浏览器都支持的,还是得为每个具体的 feature 来做检测。

浮生未歇 2017-10-17 4 楼

navigator.userAgent,判断这个即可。当然,这个不一定可靠,现在很多浏览器会伪装,自定义UA

灵芸 2017-10-16 3 楼

 var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]

};
BrowserDetect.init();

想挽留 2017-10-08 2 楼

这里有详细提供检测浏览器内核和版本的完整JavaScript
http://parazzi.me/2010/12/using-javascript-to-determine-the-browser-and-the-kernel.html

晚风撩人 2017-07-03 1 楼

对于JavaScript来说,只能通过User Agent String来获得,没有其它更好的办法。这里我写了一个通过正则去判断浏览器内核的方法,可以用,目前基本上所有对浏览器判断都是这样的。

<script type="text/javascript">
var UA = navigator.userAgent.toLowerCase();
var browerKernel = {
isTrident : function(){
if(/trident/i.test(UA)) return true;
else return false;
},
isWebkit : function(){
if(/webkit/i.test(UA)) return true;
else return false;
},
isGecko : function(){
if(/gecko/i.test(UA)) return true;
else return false;
},
isPresto : function(){
if(/presto/i.test(UA)) return true;
else return false;
},
isWebCore : function(){
if(/webcore/i.test(UA)) return true;
else return false;
}
}

//测试
if(browerKernel.isWebkit()){
alert("YES");
}
</script>