摘要:能力檢測無法精確地檢測特定的瀏覽器和版本。用戶代理檢測通過檢測用戶代理字符串來識別瀏覽器。用戶代理檢測需要特殊的技巧,特別是要注意會隱瞞其用戶代理字符串的情況。
客戶端檢測 能力檢測
能力檢測的目的不是識別特定的瀏覽器,而是識別瀏覽器的能力,采用這種方式不必顧忌特定的瀏覽器,只要確定瀏覽器支持的特定的能力,就能給出解決方案,檢測基本模式
if(object.propertyInQuestion){ //使用object.propertyInQuestion }
比如,IE5之前的版本不支持document.getElementById()這個方法
function getElement(id){ if(document.getElementById){ return document.getElementById(id); }else if(document.all){ return document.all(id); }else { throw new Error("No way to retrieve element!") } }
檢測某個屬性是否存在,并不能確定是否支持這個函數,更好的方式是檢測這個函數是不是一個函數
function isSortable(object){ return typeof object.sort=="funciton"; }
在IE中,檢測document.createElement()是否存在會返回false,可以使用isHostMethod方法
function isHostMethod(object,property){ var t=typeof object(property); return t=="function"||(!!(t=="object"&&object[property]))||t=="unknow" } //使用 result=isHostMethod(xhr,"open");//true result=isHostMethod(xhr,"foo");//false怪癖檢測
怪癖檢測是想要知道瀏覽器存在什么缺陷,也就是bug
var hasDontEnumQuick=function(){ var o={toString:function(){}}; for(var prop in o){ if(prop=="toString"){ return false; } } return true; }();用戶代理檢測
電子欺騙:瀏覽器通過在自己的用戶代理字符串加入一些錯誤或誤導性信息,來達到欺騙服務器的目的。
用戶代理字符串發展歷史
產品標識符常用于通信應用程序標識自身,由軟件名和版本組成,使用產品標識符的大多數領域也允許列出作為應用程序主要部分的子產品,由空格分隔。按照慣例,產品要按照相應的重要程度依次列出,以便標識應用程序。
早期瀏覽器
Mozilla/版本號 [語言] (平臺;加密類型)=>Mozilla/2.20 [fr] (WinNT;I)
Netscape navigator 3和Internet Explorer 3
Mozilla/版本號 (平臺; 加密類型 [; 操作系統或 CPU 說明])=>Mozilla/3.0 (Win95; U)
Mozilla/2.0 (compatible; MSIE 版本號; 操作系統)=>Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
Netscape Communicator 4和IE4~IE8
Mozilla/版本號 (平臺; 加密類型 [; 操作系統或 CPU 說明])=>Mozilla/4.0 (Win98; I)
Mozilla/4.0 (compatible; MSIE 版本號; 操作系統)=>Mozilla/4.0 (compatible; MSIE 4.0; Windows 98)
Mozilla/4.0 (compatible; MSIE 版本號; 操作系統; Trident/Trident 版本號)=>Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Gecko
Mozilla/Mozilla 版本號 (平臺; 加密類型; 操作系統或 CPU; 語言; 預先發行版本)Gecko/Gecko 版本號 應用程序或產品/應用程序或產品版本號
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2) Gecko/20060823 SeaMonkey/1.1a
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en; rv:1.8.1.6) Gecko/20070809 Camino/1.5.1
WebKit
Mozilla/5.0 (平臺; 加密類型; 操作系統或 CPU; 語言) AppleWebKit/AppleWebKit 版本號(KHTML, like Gecko) Safari/Safari 版本號=>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko)Safari/125.1
Konqueror
Mozilla/5.0 (compatible; Konqueror/ 版本號; 操作系統或 CPU) KHTML/ KHTML 版本號 (like Gecko)=>Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)
Chrome
Mozilla/5.0 ( 平臺; 加密類型; 操作系統或 CPU; 語言) AppleWebKit/AppleWebKit 版本號 (KHTML,like Gecko) Chrome/ Chrome 版本號 Safari/ Safari 版本=>Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.7 (KHTML,
like Gecko) Chrome/7.0.517.44 Safari/534.7
Opera
Opera/ 版本號 (操作系統或 CPU; 加密類型) [語言]=>Opera/7.54 (Windows NT 5.1; U) [en]
Opera/ 版本號 (操作系統或 CPU; 加密類型; 語言)=>Opera/8.0 (Windows NT 5.1; U; en)
Opera/9.80 (操作系統或 CPU; 加密類型; 語言) Presto/Presto 版本號 Version/版本號=>Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63
IOS和Android
Mozilla/5.0 (平臺; 加密類型; 操作系統或 CPU like Mac OS X; 語言)AppleWebKit/AppleWebKit 版本號 (KHTML, like Gecko) Version/瀏覽器版本號 Mobile/移動版本號 Safari/Safari 版本號=>Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us)AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
完整代碼var client = function(){ //呈現引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, //完整的版本號 ver: null }; //瀏覽器 var browser = { //主要瀏覽器 ie: 0, firefox: 0, safari: 0, konq: 0, opera: 0 chrome: 0, //具體的版本號 ver: null }; //平臺、設備和操作系統 var system = { win: false, mac: false, x11: false, //移動設備 iphone: false, ipod: false, ipad: false, ios: false, android: false, nokiaN: false, winMobile: false, //游戲系統 wii: false, ps: false }; //檢測呈現引擎和瀏覽器 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(browser.ver); } else if (/Version/(S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.safari = parseFloat(browser.ver); } else { //近似地確定版本號 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.konq = 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; //檢測平臺 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); //檢測 Windows 操作系統 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"]; } } } //移動設備 system.iphone = ua.indexOf("iPhone") > -1; system.ipod = ua.indexOf("iPod") > -1; system.ipad = ua.indexOf("iPad") > -1; system.nokiaN = ua.indexOf("NokiaN") > -1; //windows mobile if (system.win == "CE"){ system.winMobile = system.win; } else if (system.win == "Ph"){ if(/Windows Phone OS (d+.d+)/.test(ua)){; system.win = "Phone"; system.winMobile = parseFloat(RegExp["$1"]); } } //檢測 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; //不能真正檢測出來,所以只能猜測 } } //檢測 Android 版本 if (/Android (d+.d+)/.test(ua)){ system.android = parseFloat(RegExp.$1); } //游戲系統 system.wii = ua.indexOf("Wii") > -1; system.ps = /playstation/i.test(ua); //返回這些對象 return { engine: engine, browser: browser, system: system }; }()總結
能力檢測
在編寫代碼之前先檢測特定瀏覽器的能力。例如,腳本在調用某個函數之前,可能要先檢測該函數是否存在。這種檢測方法將開發人員從考慮具體的瀏覽器類型和版本中解放出來,讓他們把注意力集中到相應的能力是否存在上。能力檢測無法精確地檢測特定的瀏覽器和版本。
怪癖檢測
怪癖實際上是瀏覽器實現中存在的 bug,例如早期的 WebKit 中就存在一個怪癖,即它會在 for-in 循環中返回被隱藏的屬性。怪癖檢測通常涉及到運行一小段代碼,然后確定瀏覽器是否存在某個怪癖。由于怪癖檢測與能力檢測相比效率更低,因此應該只在某個怪癖會干擾腳本運行的情況下使用。怪癖檢測無法精確地檢測特定的瀏覽器和版本。
用戶代理檢測
通過檢測用戶代理字符串來識別瀏覽器。用戶代理字符串中包含大量與瀏覽器有關的信息,包括瀏覽器、平臺、操作系統及瀏覽器版本。用戶代理字符串有過一段相當長的發展歷史,在此期間,瀏覽器提供商試圖通過在用戶代理字符串中添加一些欺騙性信息,欺騙網站相信自己的瀏覽器是另外一種瀏覽器。用戶代理檢測需要特殊的技巧,特別是要注意 Opera會隱瞞其用戶代理字符串的情況。即便如此,通過用戶代理字符串仍然能夠檢測出瀏覽器所用的呈現引擎以及所在的平臺,包括移動設備和游戲系統。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97754.html
摘要:對象的核心對象是,它表示瀏覽器的一個實例。而和則表示該容器中頁面視圖區的大小。在中,與返回相同的值,即視口大小而非瀏覽器窗口大小。第三個參數是一個逗號分隔的設置字符串,表示在新窗口中都顯示哪些特性。這應該是用戶打開窗口后的第一個頁面 BOM window對象 BOM的核心對象是window,它表示瀏覽器的一個實例。在瀏覽器中,window對象有雙重角色,它既是通過JavaScript訪...
摘要:操作類名時可以通過屬性添加刪除和替換類名。如果將可選的參數設置為,則表示盡量將元素顯示在視口中部垂直方向。將元素的內容滾動指定的頁面高度,具體高度由元素的高度決定。 DOM擴展 選擇符API querySelector()方法 querySelector()方法接收一個CSS選擇符,返回與該模式匹配的第一個元素,如果沒有找到匹配的元素,返回null //取得body元素 var b...
摘要:腳本編程跨文檔消息傳遞跨文檔消息傳送,簡稱為,指的是來自不同域的頁面間傳遞消息的核心是方法,在規范中,除了部分之外的其他部分也會提到這個方法名,但都是為了同一個目的,向另一個地方傳遞參數。第一個頁面加載時為空 HTML5腳本編程 跨文檔消息傳遞 跨文檔消息傳送,簡稱為XMD,指的是來自不同域的頁面間傳遞消息 XMD的核心是postMessage()方法,在HTML5規范中,除了XDM...
摘要:類型對象是的一個實例,表示整個頁面,而且,對象是對象的一個屬性,因此可以將其作為全局對象來訪問。刪除指定位置的行。創建創建創建第一行創建第二行將表格添加到文檔主體中 DOM 節點層次 Node類型 DOM1級定義了一個Node接口,該接口將由DOM中的所有節點類型實現 節點類型由在Node類型中定義的12個數值常量來表示,任何節點類型必居其一 Node.ELEMENT_NODE(...
摘要:使用繪圖基本用法要使用元素,必須先設置其和屬性,指定可以繪圖的區域大小。,將繪圖游標移動到,不畫線。,表示文本對齊方式。執行這個變換之后,坐標會變成之前由表示的點。,后繪制的圖形完全替代與之重疊的先繪制圖形。也實現了,但默認是禁用的。 使用Canvas繪圖 基本用法 要使用元素,必須先設置其width和height屬性,指定可以繪圖的區域大小。出現在開始和結束標簽中的內容是后備信息...
閱讀 929·2021-11-23 09:51
閱讀 993·2021-11-18 10:02
閱讀 1908·2021-09-10 11:27
閱讀 3139·2021-09-10 10:51
閱讀 779·2019-08-29 15:13
閱讀 2064·2019-08-29 11:32
閱讀 2502·2019-08-29 11:25
閱讀 3045·2019-08-26 11:46