JavaScript編寫檢測用戶所使用的瀏覽器的代碼示例
能力檢測
在編寫代碼之前先檢測特定瀏覽器的能力。例如,腳本在調(diào)用某個(gè)函數(shù)之前,可能要先檢測該函數(shù)首付存在。這種檢測方法將開發(fā)人員從考慮具體的瀏覽器類型和版本中解放出來,讓他們把注意力集中到相應(yīng)的能力是否存在上。能力檢測無法精確地檢測特定的瀏覽器和版本。
怪癖檢測
怪癖實(shí)際上是瀏覽器實(shí)現(xiàn)中存在的bug,例如早期的webkit中就存在一個(gè)怪癖,即它會(huì)再for-in循環(huán)中返回被隱藏的屬性。怪癖檢測通常涉及到運(yùn)行一段代碼,然后確定瀏覽器是否存在某個(gè)怪癖。由于怪癖檢測無法精確地檢測特定的瀏覽器和版本。
用戶代理檢測
通過檢測用戶代理字符串來識(shí)別瀏覽器。用戶代理字符串中包含大量與瀏覽器有關(guān)的信息,包括瀏覽器、平臺(tái)、操作系統(tǒng)及瀏覽器版本。用戶代理字符串有過一段相當(dāng)長的發(fā)展歷史,在此期間,瀏覽器提供商視圖通過在用戶代理字符串總添加一些欺騙性信息,欺騙網(wǎng)站詳細(xì)自己的瀏覽器是另外一種瀏覽器。用戶代理檢測需要特殊的技巧,特別是要注意Opera會(huì)隱瞞其用戶代理字符串的情況。即便如此,通過用戶代理字符串仍然能夠檢測出瀏覽器所用的呈現(xiàn)引擎以及所在的平臺(tái),包括移動(dòng)設(shè)備和游戲系統(tǒng)。
在每一次HTTP請(qǐng)求過程中,用戶代理字符串是作為響應(yīng)首部發(fā)送的,而且該字符串可以通過Javascript的navigator.userAgent屬性訪問。在服務(wù)器端,通過檢測用戶代理字符串來確定用戶使用的瀏覽器是一種常用而且廣為接受的做法。而在客戶端,用戶代理檢測一般被當(dāng)作一種萬不得已的做法,其優(yōu)先級(jí)排在能力檢測和怪癖檢測之后。
var client = function(){ // 呈現(xiàn)引擎 var engine = { ie:0, gecko:0, webkit:0, khtml:0, opera:0, // 完整的版本號(hào) ver:null }; // 瀏覽器 var browser = { // 主要瀏覽器 ie:0, firefox:0, safari:0, konq:0, opera:0, chrome:0, // 具體的版本號(hào) ver:null }; // 檢測呈現(xiàn)引擎和瀏覽器 var ua = navigator.userAgent; if (window.opera) { engine.ver = browser.ver = window.opera.version(); engine.opera = browser.opera = parseFloat(engine.ver); } else if (/AppleWebKit\/(\S+)/.test(ua)) { engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); // 確定是Chrome還是Safari if (/Chrome\/(\S+)/.test(ua)) { browser.ver = RegExp["$1"]; browser.chrome = parseFloat(engine.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)) { engine.ver = browser.ver = RegExp["$1"]; engine.khtml = browser.kong = parseFloat(engine.ver); } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ 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)) { engine.ver = browser.ver = RegExp["$1"]; engine.ie = browser.ie = parseFloat(engine.ver); } // 檢測瀏覽器 browser.ie = engine.ie; browser.opera = engine.opera; // 返回這些對(duì)象 return { engine:engine, browser: browser } }(); console.log(client.engine); console.log(client.browser);
Tangram 檢測瀏覽器源碼
/** * 聲明baidu包 */ var baidu = baidu || {version: "1-3-2"}; // meizz 20100513 將 guid 升級(jí)成 \x06 baidu.guid = "$BAIDU$";//提出guid,防止修改window[undefined] 20100504 berg /** * meizz 2010/02/04 * 頂級(jí)域名 baidu 有可能被閉包劫持,而需要頁面級(jí)唯一信息時(shí)需要用到下面這個(gè)對(duì)象 */ window[baidu.guid] = window[baidu.guid] || {}; /** * 聲明baidu.browser包 */ baidu.browser = baidu.browser || {}; /** * 判斷是否為isGecko */ baidu.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent); /** * 判斷是否為isWebkit */ baidu.browser.isWebkit = /webkit/i.test(navigator.userAgent); /** * 判斷是否為標(biāo)準(zhǔn)模式 */ baidu.browser.isStrict = document.compatMode == "CSS1Compat"; /** * 判斷是否為safari瀏覽器 */ if ((/(\d+\.\d)(\.\d)?\s+safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent))) { baidu.browser.safari = parseFloat(RegExp['\x241']); } /** * 判斷是否為opera瀏覽器 */ if (/opera\/(\d+\.\d)/i.test(navigator.userAgent)) { baidu.browser.opera = parseFloat(RegExp['\x241']); } /** * 判斷是否為chrome瀏覽器 */ if (/chrome\/(\d+\.\d)/i.test(navigator.userAgent)) { baidu.browser.chrome = parseFloat(RegExp['\x241']); } /** * 判斷是否為ie瀏覽器 */ if (/msie (\d+\.\d)/i.test(navigator.userAgent)) { baidu.ie = baidu.browser.ie = document.documentMode || parseFloat(RegExp['\x241']); } /** * 判斷是否為firefox瀏覽器 */ if (/firefox\/(\d+\.\d)/i.test(navigator.userAgent)) { baidu.browser.firefox = parseFloat(RegExp['\x241']); // '\x241' 是八進(jìn)制表示法 '\x24' 對(duì)應(yīng)字符 '$' ,所以 '\x241' 等同于 '$1' }
- js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)
- js阻止瀏覽器默認(rèn)行為的簡單實(shí)例
- 基于JS判斷iframe是否加載成功的方法(多種瀏覽器)
- js根據(jù)手機(jī)客戶端瀏覽器類型,判斷跳轉(zhuǎn)官網(wǎng)/手機(jī)網(wǎng)站多個(gè)實(shí)例代碼
- js判斷手機(jī)瀏覽器操作系統(tǒng)和微信瀏覽器的方法
- 瀏覽器兼容的JS寫法總結(jié)
- 淺析JavaScript中瀏覽器的兼容問題
- JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉
- JS動(dòng)態(tài)改變?yōu)g覽器標(biāo)題的方法
- JavaScript 瀏覽器兼容性總結(jié)及常用瀏覽器兼容性分析
- 詳解javascript跨瀏覽器事件處理程序
- js事件處理程序跨瀏覽器解決方案
- js阻止默認(rèn)瀏覽器行為與冒泡行為的實(shí)現(xiàn)代碼
相關(guān)文章
基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07用循環(huán)或if語句從json中取數(shù)據(jù)示例
倘若想將id和pid數(shù)據(jù)依次取出,就只能用循環(huán),若想有選擇性的輸出時(shí),需要添加if條件2014-08-08uniapp開發(fā)H5使用formData上傳文件解決方案
我們很多時(shí)候上傳文件就是使用FormData,然而uniapp默認(rèn)不支持FormData類型數(shù)據(jù)的上傳,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)H5使用formData上傳文件的相關(guān)資料,需要的朋友可以參考下2023-12-12js實(shí)現(xiàn)控制文件拖拽并獲取拖拽內(nèi)容功能
本片文章主要給大家分享了用JS寫出控制文件拖拽并獲取拖拽內(nèi)容功能實(shí)現(xiàn)過程,以及代碼分享,有興趣的一起學(xué)習(xí)下。2018-02-02SOSO地圖API使用(一)在地圖上畫圓實(shí)現(xiàn)思路與代碼
最近在做SOSO地圖相關(guān)開發(fā),遇到相關(guān)畫圓知識(shí),特此簡單記錄下來,接下來講解如何在在地圖上畫圓,感興趣的朋友可以了解下2013-01-01Promise.race和Promise.any使用示例詳解
這篇文章主要為大家介紹了如何使用Promise.race() 和 Promise.any() 示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11獲取css樣式表內(nèi)樣式的js函數(shù)currentStyle(IE),defaultView(FF)
JS從樣式表取值的函數(shù),IE中以currentStyle,firefox中defaultView來獲取,需要的朋友可以參考下。2011-02-02js實(shí)現(xiàn)倒計(jì)時(shí)(距離結(jié)束還有)示例代碼
本文與大家分享個(gè)js實(shí)現(xiàn)倒計(jì)時(shí)的代碼,主要實(shí)現(xiàn)功能距離結(jié)束還有多少時(shí)間,感興趣的朋友可以參考下,希望對(duì)大家學(xué)習(xí)js有所幫助2013-07-07