网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js判断浏览器类型版本及系统类型

关注我吧
 2013/11/26 16:13:21 阅读次数:2590

前几天做了一个反馈的效果。就是页面播放不了时通过用户去反馈,需要获取用户的显示器类型及系统环境。这样就可以在后台看到什么样的环境下看不了。当然网上找了很多,发现有一个方法特别好。
效果如下图:
js判断浏览器类型版本及系统类型

方法如下:

var BrowserDetect = {
	    init: function () {
		    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		    this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
		    this.OS = this.searchString(this.dataOS) || "an unknown OS";
	    },
	    searchString: function (data) {
		    for (var i=0;i<data.length;i++)	{
			    var dataString = data[i].string;
			    var dataProp = data[i].prop;
			    this.versionSearchString = data[i].versionSearch || data[i].identity;
			    if (dataString) {
				    if (dataString.indexOf(data[i].subString) != -1)
					    return data[i].identity;
			    }
			    else if (dataProp)
				    return data[i].identity;
		    }
	    },
	    searchVersion: function (dataString) {
		    var index = dataString.indexOf(this.versionSearchString);
		    if (index == -1) return;
		    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	    },
	    dataBrowser: [
		    {
			    string: navigator.userAgent,
			    subString: "Chrome",
			    identity: "Chrome"
		    },
		    { 	string: navigator.userAgent,
			    subString: "OmniWeb",
			    versionSearch: "OmniWeb/",
			    identity: "OmniWeb"
		    },
		    {
			    string: navigator.vendor,
			    subString: "Apple",
			    identity: "Safari",
			    versionSearch: "Version"
		    },
		    {
			    prop: window.opera,
			    identity: "Opera",
			    versionSearch: "Version"
		    },
		    {
			    string: navigator.vendor,
			    subString: "iCab",
			    identity: "iCab"
		    },
		    {
			    string: navigator.vendor,
			    subString: "KDE",
			    identity: "Konqueror"
		    },
		    {
			    string: navigator.userAgent,
			    subString: "Firefox",
			    identity: "Firefox"
		    },
		    {
			    string: navigator.vendor,
			    subString: "Camino",
			    identity: "Camino"
		    },
		    {		// for newer Netscapes (6+)
			    string: navigator.userAgent,
			    subString: "Netscape",
			    identity: "Netscape"
		    },
		    {
			    string: navigator.userAgent,
			    subString: "MSIE",
			    identity: "Explorer",
			    versionSearch: "MSIE"
		    },
		    {
			    string: navigator.userAgent,
			    subString: "Gecko",
			    identity: "Mozilla",
			    versionSearch: "rv"
		    },
		    { 		// for older Netscapes (4-)
			    string: navigator.userAgent,
			    subString: "Mozilla",
			    identity: "Netscape",
			    versionSearch: "Mozilla"
		    }
	    ],
	    dataOS : [
		    {
			    string: navigator.platform,
			    subString: "Win",
			    identity: "Windows"
		    },
		    {
			    string: navigator.platform,
			    subString: "Mac",
			    identity: "Mac"
		    },
		    {
			       string: navigator.userAgent,
			       subString: "iPhone",
			       identity: "iPhone/iPod"
	        },
		    {
			    string: navigator.platform,
			    subString: "Linux",
			    identity: "Linux"
		    }
	    ]

    };

调用方法如下:

BrowserDetect.init();//调用方法 BrowserDetect.browser:为浏览器类型,BrowserDetect.version:为版本,BrowserDetect.OS:为系统类型
alert("你的浏览器是:"+BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS)  //

完整的实例如下:

下面就写一个完整的实例让大家见识一下它的效果。

<!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">
<head><title>获取您当前使用的浏览器及版本及系统类型</title>
    <style type="text/css">
    div a{font-size:12px;color:#fff;display:block;background:#ff0000;}
    div a:hover{background:#990000}
    </style>
    <script>
    var BrowserDetect = {
	    init: function () {
		    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		    this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
		    this.OS = this.searchString(this.dataOS) || "an unknown OS";
	    },
	    searchString: function (data) {
		    for (var i=0;i<data.length;i++)	{
			    var dataString = data[i].string;
			    var dataProp = data[i].prop;
			    this.versionSearchString = data[i].versionSearch || data[i].identity;
			    if (dataString) {
				    if (dataString.indexOf(data[i].subString) != -1)
					    return data[i].identity;
			    }
			    else if (dataProp)
				    return data[i].identity;
		    }
	    },
	    searchVersion: function (dataString) {
		    var index = dataString.indexOf(this.versionSearchString);
		    if (index == -1) return;
		    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	    },
	    dataBrowser: [
		    {
			    string: navigator.userAgent,
			    subString: "Chrome",
			    identity: "Chrome"
		    },
		    { 	string: navigator.userAgent,
			    subString: "OmniWeb",
			    versionSearch: "OmniWeb/",
			    identity: "OmniWeb"
		    },
		    {
			    string: navigator.vendor,
			    subString: "Apple",
			    identity: "Safari",
			    versionSearch: "Version"
		    },
		    {
			    prop: window.opera,
			    identity: "Opera",
			    versionSearch: "Version"
		    },
		    {
			    string: navigator.vendor,
			    subString: "iCab",
			    identity: "iCab"
		    },
		    {
			    string: navigator.vendor,
			    subString: "KDE",
			    identity: "Konqueror"
		    },
		    {
			    string: navigator.userAgent,
			    subString: "Firefox",
			    identity: "Firefox"
		    },
		    {
			    string: navigator.vendor,
			    subString: "Camino",
			    identity: "Camino"
		    },
		    {		// for newer Netscapes (6+)
			    string: navigator.userAgent,
			    subString: "Netscape",
			    identity: "Netscape"
		    },
		    {
			    string: navigator.userAgent,
			    subString: "MSIE",
			    identity: "Explorer",
			    versionSearch: "MSIE"
		    },
		    {
			    string: navigator.userAgent,
			    subString: "Gecko",
			    identity: "Mozilla",
			    versionSearch: "rv"
		    },
		    { 		// for older Netscapes (4-)
			    string: navigator.userAgent,
			    subString: "Mozilla",
			    identity: "Netscape",
			    versionSearch: "Mozilla"
		    }
	    ],
	    dataOS : [
		    {
			    string: navigator.platform,
			    subString: "Win",
			    identity: "Windows"
		    },
		    {
			    string: navigator.platform,
			    subString: "Mac",
			    identity: "Mac"
		    },
		    {
			       string: navigator.userAgent,
			       subString: "iPhone",
			       identity: "iPhone/iPod"
	        },
		    {
			    string: navigator.platform,
			    subString: "Linux",
			    identity: "Linux"
		    }
	    ]

    };
    
    function warning(){
        BrowserDetect.init();//调用方法 BrowserDetect.browser:为浏览器类型,BrowserDetect.version:为版本,BrowserDetect.OS:为系统类型
        alert("您当前使用的浏览器及版本是:"+BrowserDetect.browser + "" + BrowserDetect.version + " 所用的系统是:" + BrowserDetect.OS);
     }
    </script>
</head>
<body>
    <div style="width:200px;height:30px;margin:100px auto;text-align:center;line-height:30px;">
    <a href="javascript:;" onclick="warning();" id="jubao">获取浏览器及版本及系统类型</a>
    </div>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭