如果你从事前台开发，那么肯定不能少的就是要熟悉各浏览器的内核，那么我们如何知道各浏览器的内核呢？那就得从window.navigator.userAgent入手了。
首先我们写一个自己的Browser对象。
(function(win){ var // Useragent RegExp rwebkit = /(webkit)[ \/]([\w.]+)/, ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/, rmsie = /(msie) ([\w.]+)/, rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/, browserMatch, Browser = {}, userAgent = win.navigator.userAgent; function uaMatch(ua){ ua = ua.toLowerCase(); var match = rwebkit.exec( ua ) || ropera.exec( ua ) || rmsie.exec( ua ) || ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) || []; return { browser: match[1] || "", version: match[2] || "0" }; } function init() {
browserMatch = uaMatch( userAgent ); if ( browserMatch.browser ) { Browser.userAgent = userAgent; Browser.type = browserMatch.browser; Browser[ browserMatch.browser ] = true; Browser.version = browserMatch.version; } } init(); Browser.isChromeOrSafari = function(){ if(Browser.webkit){ return true; } return false; }; Browser.isFirefox = function(){ if(Browser.mozilla){ return true; } return false; }; Browser.isOpera = function(){ if(Browser.opera){ return true; } return false; }; Browser.isMSIE = function(){ if(Browser.msie){ return true; } return false; }; win.Browser = Browser; })(window);
下面我们写个页面测试一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="BrowserType.js"></script> <script type="text/javascript"> window.print = function(value) { document.write(value); }; window.println = function(value) { print(value); document.write("<br/>"); }; window.onload = function() { println(Browser.userAgent); println(Browser.type + " : " + Browser.version); println("IE : " + Browser.isMSIE()); println("Chrome or Safari : " + Browser.isChromeOrSafari()); println("Firefox : " + Browser.isFirefox()); println("Opera : " + Browser.isOpera()); } </script> </head> <body> </body> </html>
在IE下输出如下：
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E)
msie : 9.0
IE : true
Chrome or Safari : false
Firefox : false
Opera : false
在firefox下输出如下：
Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0
mozilla : 12.0
IE : false
Chrome or Safari : false
Firefox : true
Opera : false
在Opera下输出如下：
Opera/9.80 (Windows NT 6.1; U; Edition IBIS; zh-cn) Presto/2.10.289 Version/12.00
opera : 12.00
IE : false
Chrome or Safari : false
Firefox : false
Opera : true
在Chrome下输出如下：
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.162 Safari/535.19
webkit : 535.19
IE : false
Chrome or Safari : true
Firefox : false
Opera : false
在Safari下输出如下：
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
webkit : 534.57.2
IE : false
Chrome or Safari : true
Firefox : false
Opera : false
在世界之窗极速版下，输出如下：
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11 QIHU THEWORLD
webkit : 535.11
IE : false
Chrome or Safari : true
Firefox : false
Opera : false
在360极速浏览器输出如下：
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5 QIHU 360EE
webkit : 536.5
IE : false
Chrome or Safari : true
Firefox : false
Opera : false
从以上输出结果，可以看出来，webkit有走红的现象，毕竟速度快才是硬道理啊！