web開發之瀏覽器（二）----JQuery或JS判斷瀏覽器內核版本號以及是否支持W3C盒子模型

時間 2019-11-06

標籤 web 開發瀏覽器 jquery 判斷內核本號以及是否支持 w3c 盒子模型欄目 HTML 简体版

原文原文鏈接

效果：http://oospace.sinaapp.com/3.phpphp

1，JQuery或JS判斷瀏覽器內核版本號以及是否支持W3C盒子模型html

jQuery 從 1.9 版開始，移除了 $.browser 和 $.browser.version ，取而代之的是 $.support 。在更新的 2.0 版本中，將再也不支持 IE 6/7/8。之後，若是用戶須要支持 IE 6/7/8，只能使用 jQuery 1.9。之後，若是用戶須要支持 IE 6/7/8，只能使用 jQuery 1.9及如下的版本。若是要全面支持 IE，並混合使用 jQuery 1.9及如下和 2.0及以上版本，官方的解決方案是使用只有IE識別的條件表達式：jquery

<!--[if lt IE 9]>
<script src='jquery-1.9.0.js'</script>
<![endif]-->
<!--[if gte IE 9]>
<script src='jquery-2.0.0.js'</script>
<![endif]-->

Jquery版本1.4.2判斷瀏覽器類型及版本和是否支持盒子模型的方法（其實主要是IE，其它瀏覽器問題比較少）web

$(function() {
            var strTmp = "您的瀏覽器名稱是：";
            if ($.browser.msie) { //IE瀏覽器
                strTmp += "IE";
            }
            else  if($.browser.mozilla) { //火狐相關瀏覽器
                strTmp += "Mozilla FireFox";
            }
			else  if($.browser.chrome) { //谷歌相關瀏覽器（本人測試未識別）
                strTmp += "chrome";
            }
			else if($.browser.safari) //chrome，opera,360都被判斷爲這個了，
			{ 
				strTmp +="safari"; 
			} 
			else if($.browser.opera) { 
				strTmp +="opera"; 
			} 
			else { 
				strTmp+="未知"; 
			}
            strTmp += " 版本號是：" //獲取版本號
                   + $.browser.version;
				  
			strTmp += " 盒子模型是："
			if ($.support.boxModel) { //是W3C盒子模型
                strTmp += "W3C盒子模型";
            }
            else { //是IE盒子模型
                strTmp += "IE盒子模型";
            }
            $("#divTip").html(strTmp);
        })

以上判斷是否支持W3C盒子模型時本人測試全是IE盒子模型，聽說加上下面的代碼會變爲W3C模型，
chrome

個人本地測試結果沒有任何改變，服務器測試結果發生改變瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Jquery1.9版本以上判斷是不是IE6-8服務器

if (!$.support.leadingWhitespace) {}

JS判斷瀏覽器類型app

function getOs() 
{ 
    var OsObject = ""; 
   if(navigator.userAgent.indexOf("MSIE")>0) { 
        return "MSIE"; 
   } 
   else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
        return "Firefox"; 
   } 
   else if(isMozilla=navigator.userAgent.indexOf("Opera")>0){ //這個也被判斷爲chrome
        return "Opera"; 
   } 
   else if(isFirefox=navigator.userAgent.indexOf("Chrome")>0){ 
        return "Chrome"; 
   } 
   else if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
        return "Safari"; 
   }  
   else if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
        return "Camino"; 
   } 
   else if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
        return "Gecko"; 
   }
   
} 
 alert("您的瀏覽器類型爲:"+getOs());

上面這個比Jquery的稍微好點，至少能識別chrome了，下面這個和上面的差很少，也是比較經常使用的測試

$.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());
var str="";
str+="firefox    "+$.browser.mozilla+" <br/>";
str+="webkit   "+$.browser.webkit+" <br/>";
str+="opera    "+$.browser.opera+" <br/>";
str+="msie      "+$.browser.msie+" <br/>";
$("#divTip").html(str);