資訊專欄INFORMATION COLUMN
摘要：博文模塊增強(qiáng)模式進(jìn)行客戶端檢測(cè)標(biāo)簽博文常用的檢測(cè)方式為能力檢測(cè)用戶代理檢測(cè)這里有用戶代理檢測(cè)檢測(cè)插件非瀏覽器是一個(gè)包含瀏覽器插件的數(shù)組這個(gè)數(shù)組的每一項(xiàng)都包含插件的名字插件的描述插件的文件名插件所處理的類型數(shù)量檢測(cè)插件在中無(wú)效方法用于把字符串
[博文]模塊增強(qiáng)模式進(jìn)行客戶端檢測(cè)
標(biāo)簽： 博文
常用的檢測(cè)方式為:
[ ] 1 . 能力檢測(cè)
[ ] 2 . 用戶代理檢測(cè)
這里有 2 用戶代理檢測(cè)
檢測(cè)插件 P211
非IE瀏覽器:
navigator.plugins是一個(gè)包含瀏覽器插件的數(shù)組, 這個(gè)數(shù)組的每一項(xiàng)都包含:
name : 插件的名字.
description: 插件的描述
filename: 插件的文件名
length: 插件所處理的MIME類型數(shù)量
// 檢測(cè)插件(在IE中無(wú)效):
function hasPlugin(name){
name = name.toLowerCase(); //toLowerCase() 方法用于把字符串轉(zhuǎn)換為小寫(xiě)
for(var i=0;i-1){ // >-1表示找到
return true
}
}
return false;
};
// 檢測(cè)Flash
alert(hasPlugin("Flash"));
// 檢測(cè)QuickTime
alert(hasPlugin("QuickTime"));
IE瀏覽器
// 檢測(cè)IE的插件
// ==========
// = IE以COM對(duì)象的方式實(shí)現(xiàn)插件,而COM對(duì)象使用唯一標(biāo)示符來(lái)標(biāo)識(shí),因此要檢測(cè)插件必須知道其 =
// = COM標(biāo)識(shí)符,例如,Flash的標(biāo)識(shí)符是ShockwaveFlash.ShockwaveFlash =
// ==========
function hasIEPlugin(name){
try{
new ActiveXOBject(name);
return true;
}catch(e){
return false;
//TODO handle the exception
}
};
// IE中檢測(cè)Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
在所有瀏覽器中檢測(cè)
// 結(jié)合之前的2個(gè)檢測(cè)函數(shù),檢測(cè)所有的瀏覽器中的FLash
function hasFLash(){
var result = hasPlugin("Flash");
if(!result){
result.hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result; // true or false
};
function hasQuickTime(){
var result = hasPlugin("QuickTime");
if (!result) {
result = hasIEPlugin("QuickTime.Quicktime");
}
return result;
};
檢測(cè)瀏覽器引擎 :
var client = function (){
var engine = {
// 呈現(xiàn)引擎
ie:0, // IE瀏覽器內(nèi)核
gecko:0, // Firefox瀏覽器內(nèi)核
webkit:0, // google->chrome和apple->safari內(nèi)核
khtml:0, // Konqueror(linux平臺(tái)中的一個(gè)瀏覽器)的內(nèi)核->KHTML
opera:0, // Opera
// 具體的版本號(hào)
ver : null
};
// 檢測(cè)呈現(xiàn)引擎, 平臺(tái), 設(shè)備
return {
engine : engine
};
}();
// ======================
// = 檢測(cè)客戶端=>識(shí)別呈現(xiàn)引擎 =
// ======================
var ua = navigator.userAgent;
console.log(ua);
// = 第一步先檢測(cè)Opera =
if(window.opera){ // 如果是Opera瀏覽器, 則獲得瀏覽器版本
client.ver = window.opera.version(); // window.opera在Opera 5.0及更高版本中存在,在Opera 7.6及更高版本中,調(diào)用version()方法可以放回一個(gè)表示瀏覽器版本的字符串
client.opera = parseFloat(client.ver);
}else if(/AppleWebKit/(S+)/.test(ua)){
// = 第二步檢測(cè)Webkit =
// webkit的用戶代理字符串中的"AppleWebkit"是獨(dú)一無(wú)二的, 所以檢測(cè)這個(gè)字符串
// S : 表示非空格的特殊字符
client.ver = RegExp["$1"];
client.webkit = parseFloat(client.ver);
}else if(/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
// = 第三步檢測(cè)KHTML =
// 在Konqueror 3.1及更早版本中不包括KHTML的版本, 故而使用Konqueror的版本來(lái)代替
client.ver = RegExp["$1"];
client.khtml = parseFloat(client.ver)
}else if(/rv:([^)]+)) Gecko/d{8}/.test(ua)){
// = 第四步檢測(cè)Gecko =
// "Gecko" 會(huì)出現(xiàn)在字符串"rv:"之后 ;字符串"rv:"在前面;
client.ver = RegExp["$1"];
client.khtml = parseFloat(client.ver)
}else if(/MSIE ([^;]+)/.test(ua)){
// = 第五步檢測(cè)IE =
client.ver = RegExp["$1"];
client.ie = parseFloat(client.ver)
}
// 執(zhí)行代碼
if(client.ie){ // 如果是IE呈現(xiàn)引擎, client.ie應(yīng)該大于0
// 針對(duì)IE的代碼
alert("我是IE ie引擎");
}else if (client.gecko > 1.5){ // 如果是gecko呈現(xiàn)引擎(firefox)
if(client.ver == "1.8.1"){
// 針對(duì)這版本進(jìn)行操作
}
alert("我是firefox gecko引擎");
}else if(client.webkit){
alert("我是chrome webkie引擎");
}else if(client.khtml){
alert("我是KHTML 引擎");
}else if(client.opera){
alert("我是opera引擎");
}
檢測(cè)瀏覽器品牌 :
var client = function (){
var engine = {
// 呈現(xiàn)引擎
ie:0, // IE瀏覽器內(nèi)核
gecko:0, // Firefox瀏覽器內(nèi)核
webkit:0, // google->chrome和apple->safari內(nèi)核
khtml:0, // Konqueror(linux平臺(tái)中的一個(gè)瀏覽器)的內(nèi)核->KHTML
opera:0, // Opera
// 具體的版本號(hào)
ver : null
};
var browser = {
//瀏覽器
ie : 0,
firefox:0,
safari:0,
honq:0,
opera:0,
chrome:0,
// 具體的版本號(hào)
ver : null
};
// 檢測(cè)呈現(xiàn)引擎, 平臺(tái), 設(shè)備
return {
engine : engine,
browser : browser
};
}();
// ======================
// = 檢測(cè)客戶端=>識(shí)別呈現(xiàn)引擎 =
// = 檢測(cè)客戶端=>識(shí)別瀏覽器 =
// ======================
var ua = navigator.userAgent;
// = 第一步先檢測(cè)Opera =
var o = window.opera || window.opr
console.log(ua);
if(o){ // 如果是Opera瀏覽器, 則獲得瀏覽器版本
client.engine.ver = client.browser.ver = (/OPR/(.*)/.exec(ua))[1]; // window.opera在Opera 5.0及更高版本中存在,在Opera 7.6及更高版本中,調(diào)用version()方法可以放回一個(gè)表示瀏覽器版本的字符串
client.engine.opera = client.browser.opera = parseFloat(client.engine.ver);
}else if(/AppleWebKit/(S+)/.test(ua)){
// = 第二步檢測(cè)Webkit =
// webkit的用戶代理字符串中的"AppleWebkit"是獨(dú)一無(wú)二的, 所以檢測(cè)這個(gè)字符串
// S : 表示非空格的字符
client.engine.ver = RegExp["$1"];
client.engine.webkit = parseFloat(client.engine.ver);
//確定是Chrome 還是 Safari
if(/Chrome/(S+)/.test(ua)){
client.browser.ver = RegExp["$1"];
client.browser.chrome = parseFloat(client.browser.ver);
}else if(/Version/(S+)/.test(ua)){
client.browser.ver = RegExp["$1"];
client.browser.safari = parseFloat(client.browser.ver);
}else{
//近似的確定版本號(hào)
var safariVersion = 1;
if(client.webkit < 100){
safariVersion = 1;
}else if(client.webkit < 312){
safariVersion = 1.2;
}else if(client.webkit < 412){
safariVersion = 1.3;
}else{
safariVersion = 2;
}
client.browser.safari = client.browser.ver = safariVersion;
}
}else if(/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
// = 第三步檢測(cè)KHTML =
// 在Konqueror 3.1及更早版本中不包括KHTML的版本, 故而使用Konqueror的版本來(lái)代替
client.engine.ver = client.browser.ver = RegExp["$1"];
client.engine.khtml = client.browser.konq = parseFloat(client.engine.ver)
}else if(/rv:([^)]+)) Gecko/d{8}/.test(ua)){
// = 第四步檢測(cè)Gecko =
// "Gecko" 會(huì)出現(xiàn)在字符串"rv:"之后 ;字符串"rv:"在前面;
client.engine.ver = RegExp["$1"];
client.engine.gecko = parseFloat(client.engine.ver);
//確定是不是firefox
if(/Firefox/(S+)/.test(ua)){
client.browser.ver = RegExp["$1"];
client.browser.firefox = parseFloat(client.browser.ver);
}
}else if(/MSIE ([^;]+)/.test(ua)){
// = 第五步檢測(cè)IE =
client.engine.ver = client.browser.ver = RegExp["$1"];
client.engine.ie = client.browser.ie = parseFloat(client.engine.ver)
}
// 檢測(cè)引擎邏輯代碼
if(client.engine.ie){ // 如果是IE呈現(xiàn)引擎, client.engine.ie應(yīng)該大于0
// 針對(duì)IE的代碼
alert("我是IE ie引擎");
}else if (client.engine.gecko > 1.5){ // 如果是gecko呈現(xiàn)引擎(firefox)
if(client.engine.ver == "1.8.1"){
// 針對(duì)這版本進(jìn)行操作
}
alert("我是firefox gecko引擎");
}else if(client.engine.webkit){
alert("我是webkie引擎");
}else if(client.engine.khtml){
alert("我是KHTML 引擎");
}else if(client.engine.opera){
alert("我是opera引擎");
}
// 檢測(cè)瀏覽器邏輯代碼
if(client.engine.webkit){ // 如果為webkit引擎
if(client.browser.chrome){
alert("我是google chrome")
}else if(client.browser.safari){
alert("我是Safari")
}
}else if(client.engine.gecko){
if(client.browser.firefox){
alert("我是火狐")
}else{
alert("gecko.....")
}
}else if(client.browser.ie){
alert("我是IE")
}else if(client.browser.opera){
alert("我是Opera")
}
用戶代理檢測(cè) 總結(jié)(上面的代碼并入)
這種方法對(duì)用戶代理字符串有很大的依賴性, 不推薦
// 模塊增強(qiáng)模式進(jìn)行客戶端檢測(cè)
var client = function() {
var engine = {
// 呈現(xiàn)引擎
ie: 0, // IE瀏覽器內(nèi)核
gecko: 0, // Firefox瀏覽器內(nèi)核
webkit: 0, // google->chrome和apple->safari內(nèi)核
khtml: 0, // Konqueror(linux平臺(tái)中的一個(gè)瀏覽器)的內(nèi)核->KHTML
opera: 0, // Opera
// 具體的版本號(hào)
ver: null
};
var browser = {
// 瀏覽器
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,
// 具體的版本號(hào)
ver: null
};
var system = {
// 平臺(tái), 設(shè)備和操作系統(tǒng)
win: false,
mac: false,
x11: false, // 數(shù)字1
// 移動(dòng)設(shè)備
iphone: false,
ipod: false,
ipad: false,
ios: false,
android: false,
nokiaN: false, // 諾基亞N系列
winMobile: false, // window phone系列
// 游戲系統(tǒng)
wii: false, // 任天堂
ps: false
}
// 檢測(cè)呈現(xiàn)引擎和瀏覽器
var ua = navigator.userAgent;
// = 第一步先檢測(cè)Opera =
var o = window.opera || window.opr;
if(o) { // 如果是Opera瀏覽器, 則獲得瀏覽器版本
engine.ver = browser.ver = (/OPR/(.*)/.exec(ua))[1]; // window.opera在Opera 5.0及更高版本中存在,在Opera 7.6及更高版本中,調(diào)用version()方法可以放回一個(gè)表示瀏覽器版本的字符串
engine.opera = browser.opera = parseFloat(engine.ver);
} else if(/AppleWebKit/(S+)/.test(ua)) {
// = 第二步檢測(cè)Webkit =
// webkit的用戶代理字符串中的"AppleWebkit"是獨(dú)一無(wú)二的, 所以檢測(cè)這個(gè)字符串
// S : 表示非空格的字符
engine.ver = RegExp["$1"];
engine.webkit = parseFloat(engine.ver);
//確定是Chrome 還是 Safari
if(/Chrome/(S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.chrome = parseFloat(browser.ver);
} else if(/Version/(S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.safari = parseFloat(browser.ver);
} else {
//近似的確定版本號(hào)
var safariVersion = 1;
if(engine.webkit < 100) {
safariVersion = 1;
} else if(engine.webkit < 312) {
safariVersion = 1.2;
} else if(engine.webkit < 412) {
safariVersion = 1.3;
} else {
safariVersion = 2;
}
browser.safari = browser.ver = safariVersion;
}
} else if(/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)) {
// = 第三步檢測(cè)KHTML =
// 在Konqueror 3.1及更早版本中不包括KHTML的版本, 故而使用Konqueror的版本來(lái)代替
engine.ver = browser.ver = RegExp["$1"];
engine.khtml = browser.konq = parseFloat(engine.ver)
} else if(/rv:([^)]+)) Gecko/d{8}/.test(ua)) {
// = 第四步檢測(cè)Gecko =
// "Gecko" 會(huì)出現(xiàn)在字符串"rv:"之后 ;字符串"rv:"在前面;
engine.ver = RegExp["$1"];
engine.gecko = parseFloat(engine.ver);
//確定是不是firefox
if(/Firefox/(S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.firefox = parseFloat(browser.ver);
}
} else if(/MSIE ([^;]+)/.test(ua)) {
// = 第五步檢測(cè)IE =
engine.ver = browser.ver = RegExp["$1"];
engine.ie = browser.ie = parseFloat(engine.ver)
}
// 檢測(cè)平臺(tái)
var p = navigator.platform; // 可能出現(xiàn)的值:Win32, Win64, MacPPC, MacIntel, X11, Linux i686;
// 檢測(cè)前綴, 向前兼容
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p.indexOf("X11") == 0) || (p.indexOf("Linux") == 0);
// 檢測(cè)Windows 操作系統(tǒng)
if(system.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;
default:
system.win = "NT";
break;
}
} else if(RegExp["$1"] == "9x") {
system.win = "ME";
} else {
system.win = RegExp["$1"];
}
}
}
// 檢測(cè)移動(dòng)設(shè)備
system.iphone = ua.indexOf("iPone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;
// windows mobile設(shè)備, 又稱windows CE
if(system.win == "CE"){ // 老版本的windows Mobile
system.winMobile = system.win;
}else if(system.win == "Ph"){
if(/Window Phone OS (d+.d+)/.test(ua)){ // windows phone7或更新
system.win = "Phone";
system.winMobile = parseFloat(RegExp["$1"]);
}
}
// 檢測(cè)IOS版本
if(system.mac && ua.indexOf("Mobile") > -1){
if(/CPU (?:iPhone )?OS (d+_d+)/.test(ua)){
system.ios = parseFloat(RegExp.$1.replace("_", "."));
}else{
system.ios = 2; // 無(wú)法檢測(cè), 推測(cè)為低版本
}
}
// 檢測(cè)Android 版本
if(/Android (d+.d+)/.test(ua)){
system.android = parseFloat(RegExp.$1);
}
// 檢測(cè)游戲系統(tǒng)
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);
// 返回呈現(xiàn)引擎, 平臺(tái), 設(shè)備
return {
engine: engine,
browser: browser,
system: system
};
}();
[ ] 接上步操作 ↑ 檢測(cè):
// 檢測(cè)引擎邏輯代碼
if(client.engine.ie) { // 如果是IE呈現(xiàn)引擎, engine.ie應(yīng)該大于0
// 針對(duì)IE的代碼
alert("我是IE ie引擎");
} else if(client.engine.gecko > 1.5) { // 如果是gecko呈現(xiàn)引擎(firefox)
if(client.engine.ver == "1.8.1") {
// 針對(duì)這版本進(jìn)行操作
}
alert("我是firefox gecko引擎");
} else if(client.engine.webkit) {
alert("我是webkie引擎");
} else if(client.engine.khtml) {
alert("我是KHTML 引擎");
} else if(client.engine.opera) {
alert("我是opera引擎");
}
// 檢測(cè)瀏覽器品牌邏輯代碼
if(client.engine.webkit) { // 如果為webkit引擎
if(client.browser.chrome) {
alert("我是google chrome")
} else if(client.browser.safari) {
alert("我是Safari")
}
} else if(client.engine.gecko) {
if(client.browser.firefox) {
alert("我是火狐")
} else {
alert("gecko.....")
}
} else if(client.browser.ie) {
alert("我是IE")
} else if(client.browser.opera) {
alert("我是Opera")
}
// 檢測(cè)平臺(tái)邏輯代碼
if(client.system.win) {
alert("window 平臺(tái)")
} else if(client.system.mac) {
alert("Mac 平臺(tái)")
} else if(client.system.x11) {
alert("Unix(Linux) 平臺(tái)")
}
網(wǎng)上檢測(cè)方法:
var browser = {
v: (function() {
var u = navigator.userAgent,
app = navigator.appVersion,
p = navigator.platform;
return {
trident: u.indexOf("Trident") > -1, //IE內(nèi)核
presto: u.indexOf("Presto") > -1, //opera內(nèi)核
webKit: u.indexOf("AppleWebKit") > -1, //蘋(píng)果、谷歌內(nèi)核
gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐內(nèi)核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端
ios: !!u.match(/i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android終端或uc瀏覽器
iPhone: u.indexOf("iPhone") > -1, //是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf("iPad") > -1, //是否iPad
weixin: u.indexOf("MicroMessenger") > -1, //是否微信
webApp: u.indexOf("Safari") == -1, //是否web應(yīng)該程序，沒(méi)有頭部與底部
UCB: u.match(/UCBrowser/i) == "UCBrowser",
QQB: u.match(/MQQBrowser/i) == "MQQBrowser",
win: p.indexOf("Win") > -1, //判斷是否是WIN操作系統(tǒng)
mac: p.indexOf("Mac") > -1 //判斷是否是Mac操作系統(tǒng)
};
})()
}
if("v"=="v"){//true為IE瀏覽器，感興趣的同學(xué)可以去搜下，據(jù)說(shuō)是現(xiàn)有最流行的判斷瀏覽器的方法
// ...
}
原文地址: https://segmentfault.com/a/11...
如果喜歡， 應(yīng)該: 點(diǎn)贊 $underline{或者}$ ...
如果有 新的想法 可以直接在下方評(píng)論或者 聯(lián)系我 。
作者 [@Qing]
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83828.html
摘要：函數(shù)類型檢測(cè)是的子類型，其屬性為參數(shù)個(gè)數(shù)，但是判斷結(jié)果有內(nèi)建函數(shù)原生函數(shù)常見(jiàn)的有，可能被當(dāng)作構(gòu)造函數(shù)來(lái)使用，創(chuàng)建出來(lái)的是封裝了的基本類型值。構(gòu)造函數(shù)可以不帶關(guān)鍵字。建議使用和來(lái)進(jìn)行顯示強(qiáng)制轉(zhuǎn)換。 前言 此篇小結(jié)來(lái)源與《你不知道的JavaScript》和《JavaScript高級(jí)程序設(shè)計(jì)》的結(jié)合？？或許是的，龜速總結(jié)中... 七種內(nèi)置類型 null undefined boolean ...
摘要：為什么會(huì)產(chǎn)生閉包究其根本，是因?yàn)榇淼暮瘮?shù)包含的作用域。而在作用域鏈中，外部函數(shù)的活動(dòng)對(duì)象始終處于第二位，外部函數(shù)的外部函數(shù)的活動(dòng)對(duì)象處于第三位直到作為作用域鏈終點(diǎn)的全局執(zhí)行環(huán)境。 前言 此文的內(nèi)容主要是來(lái)自看書(shū)的總結(jié)+小小的實(shí)踐哦~會(huì)不斷更新總結(jié)。 什么是閉包 書(shū)上是這樣定義閉包的： 有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)。 舉一個(gè)例子： function test(){ va...
摘要：官方默認(rèn)項(xiàng)目是存放了一個(gè)為的打開(kāi)文件夾有一個(gè)，還有一個(gè)名為組件的文件夾，里面放了一個(gè)文件。部分我們會(huì)發(fā)現(xiàn)這幾排字就是顯示在頁(yè)面的幾排文字部分這其中的這個(gè)文件引入了，還有上述的。結(jié)合查詢其他說(shuō)法，就是說(shuō)它會(huì)把是的元素以形式替換。 前言 我很早就想來(lái)學(xué)習(xí)學(xué)習(xí)vue.js啦，終于有了那么一些空閑的時(shí)間可以拿來(lái)學(xué)習(xí)，于是從前天開(kāi)始我就每天抽一個(gè)多小時(shí)來(lái)體驗(yàn)vue.js。當(dāng)然啦，因?yàn)槭切“兹腴T(mén)，...
摘要：之銀彈技法下文這些淫巧在之前自認(rèn)為是居家必備，裝逼撩妹的必備之物，博主一直敝帚自珍，不愿拿出來(lái)分享，現(xiàn)如今，極盡能事，我知道再不拿出來(lái)就在沒(méi)有價(jià)值了來(lái)由博主入行前端寫(xiě)時(shí)候，因?yàn)樾枰嫒莸桶姹荆瑫r(shí)常需要在繁雜冗長(zhǎng)的操作夾雜的代碼中，盡可能巧妙 JavaScript 之銀彈の技法 下文這些淫巧在之前自認(rèn)為是居家必備，裝逼撩妹的必備之物，博主一直敝帚自珍，不愿拿出來(lái)分享，現(xiàn)如今，ES6+極盡...
閱讀 2248·2021-11-24 11:15
閱讀 3099·2021-11-24 10:46
閱讀 1400·2021-11-24 09:39
閱讀 3933·2021-08-18 10:21
閱讀 1488·2019-08-30 15:53
閱讀 1402·2019-08-30 11:19
閱讀 3335·2019-08-29 18:42
閱讀 2333·2019-08-29 16:58
