判断浏览器类型和版本的javascript代码实例

快乐打工仔 分类:实例代码

当前市场上的浏览器类型和类型可以说不计其数。

又由于各个类型或者版本对于同一个页面解析不同,所以有时候需要根据不同的浏览器类型和版本进行设置。

那么就首先要知道浏览器的版本和类型,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript">
var BrowserMatch = {
init: function () {
this.browser = this.getBrowser().browser || "An Unknown Browser";
this.version = this.getBrowser().version || "An Unknown Version";
this.OS = this.getOS() || "An Unknown OS";
},
getOS:function(){
if(navigator.platform.indexOf("Win")!= -1) return "Windows";
if(navigator.platform.indexOf("Mac")!= -1) return "Mac";
if(navigator.platform.indexOf("Linux")!= -1) return "Linux";
if(navigator.userAgent.indexOf("iPhone")!= -1) return "iPhone/iPod";
},
getBrowser:function () {
var rMsie = /(msie\s|trident\/7)([\w\.]+)/;
var rTrident = /(trident)\/([\w.]+)/;
var rFirefox = /(firefox)\/([\w.]+)/; 
var rOpera = /(opera).+version\/([\w.]+)/;
var rNewOpera = /(opr)\/(.+)/;
var rChrome = /(chrome)\/([\w.]+)/;
var rSafari = /version\/([\w.]+).*(safari)/;
var ua = navigator.userAgent.toLowerCase();
var matchBS,matchBS2;
matchBS = rMsie.exec(ua);
if (matchBS != null) {
matchBS2 = rTrident.exec(ua);
if (matchBS2 != null){
switch (matchBS2[2]){
case "4.0": return { browser : "IE", version : "8" };break;
case "5.0": return { browser : "IE", version : "9" };break;
case "6.0": return { browser : "IE", version : "10" };break;
case "7.0": return { browser : "IE", version : "11" };break;
default:return { browser : "IE", version : "Undefined" };
}
}else{
return {browser : "IE", version : matchBS[2] || "0" };
}
}
matchBS = rFirefox.exec(ua);  
if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {  
return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
}
matchBS = rOpera.exec(ua);         
if ((matchBS != null)&&(!(window.attachEvent))) {     
return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
}
matchBS = rChrome.exec(ua);  
if ((matchBS != null)&&(!!(window.chrome))&&(!(window.attachEvent))) {
matchBS2 = rNewOpera.exec(ua);       
if(matchBS2 == null){
return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
}else{
return { browser : "Opera", version : matchBS2[2] || "0" };
}  
}
matchBS = rSafari.exec(ua);          
if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {   
return { browser : matchBS[2] || "", version : matchBS[1] || "0" };
}           
}
};  
BrowserMatch.init();
window.onload = function () {
var odiv = document.getElementById("antzone");
BrowserMatch.init();
var str = "";
str = "浏览器名称:" + BrowserMatch.browser + "<br/>";
str = str + "浏览器版本:" + BrowserMatch.version + "<br/>";
str = str + "操作系统:" + BrowserMatch.OS;
odiv.innerHTML = str;
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

判断浏览器类型和版本的javascript代码实例,这样的场景在实际项目中还是用的比较多的,关于判断浏览器类型和版本的javascript代码实例就介绍到这了。

判断浏览器类型和版本的javascript代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容