[jQuery]判斷瀏覽器類型和版本

[jQuery]判斷瀏覽器類型和版本

這與《【HTML】根據不同的瀏覽器類型寫不同的HTML代碼》（點擊開啟連結）一文是姊妹篇，IE注釋能夠幫你在網頁的HTML根據不同的版本，渲染不同的代碼。

此文是在指令碼部分利用jQuery判斷瀏覽器類型和版本而執行不同的Javascript指令碼。

由於直接利用Javascript實現判斷瀏覽器的版本的代碼比較複雜，Javascript沒有封裝介面，Jquery有封裝介面，不用寫這麼多代碼，所以直接用Jquery來實現。

不過值得注意的是，jQuery從1.9版開始，移除了$.browser和$.browser.version， 取而代之的是$.support。在更新的 2.0 版本中，將不再支援IE 6/7/8。 以後，如果使用者需要支援IE 6/7/8，只能使用 jQuery 1.9。 也就是說，以下的判斷僅適用於jQuery 1.9的版本，連jQuery 1.10都不行，親測。

具體代碼如下：

 

<script type=text/javascript>if($.browser.msie){ alert(IE瀏覽器); if($.browser.version<8){alert(IE7及其以下);}else{alert(IE8及其以上);}}else if($.browser.webkit){alert(蘋果的Safari、Google的Chrome瀏覽器); }else if($.browser.mozilla){alert(野狐禪FireFox瀏覽器); }else if($.browser .opera){ alert(Opera瀏覽器); }</script>

由於就幾個彈框就不展示了。

 

這裡就是利用到$.browser.version。也是主要判斷IE7與非IE7足矣，因為部分代碼在IE7以上與以下的實現實在是不同……

對於jQuery 1.9以上的版本，由於移除了$.browser，一般自己利用Regex定義$.browser.version幾個來判斷：

 

$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());

然後利用IE6沒有的的屬性來判斷IE6：

 

 

('undefined' == typeof(document.body.style.maxHeight)) {}

如果判斷IE8則利用leadingWhitespace。leadingWhitespace：如果在使用innerHTML的時候瀏覽器會保持前置空白字元，則返回true，目前在IE 6-8中返回false。

 

 

if (!$.support.leadingWhitespace) {}

不使用Jquery直接利用Javascript則更為複雜，主要是對navigator.appName，navigator.appVersion兩個瀏覽器標示屬性進行字串方法切割，再來判斷。這裡就不貼代碼了。有興趣看看不同的瀏覽器，alert(navigator.appName+，+navigator.appVersion);是什麼鬼。比如IE8就是：

 

之後你就對這些字串慢慢用字串方法切割。