JavaScript学习记录-浏览器检测

最新推荐文章于 2024-07-09 17:27:46 发布

wendZzz

最新推荐文章于 2024-07-09 17:27:46 发布

阅读量436

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/bertZuo/article/details/82113766

版权

JavaScript 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

每个浏览器都有自己独特的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤。浏览器之间的差异，以及不同浏览器的“怪癖”非常多，因此客户端检测除了是一种补救措施，更是一种行之有效的开发策略。

一、navigator对象

navigator对象是window对象下的，它是识别客户端浏览器的事实标准，并有许多的属性。

1、浏览器及版本号

不同的浏览器支持的功能、属性和方法各有不同。

alert(window.navigator);    //输出结果[object Navigator]
alert(navigator.appName);    //浏览器的名称，该属性无法精确的取到浏览器的名字
alert(navigator.userAgent);    //用户代理字符串，表示浏览器信息的内容
alert(navigator.platform);    //表示所处在的操作系统平台

2.浏览器嗅探器

浏览器嗅探器是一段程序，有了它，浏览器检测就变得简单了。所看视频的老师提供了一个browserdetect.js文件，用于判断浏览器的名称、版本号及操作系统。

//browserdetect.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: "Internet 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();

将该外部的JS文件导入HTML中即可很简单的检测浏览器了，

<script type="text/javascript" src="browserdetect.js"></script>

如此，就可以直接调用封装好的方法来检测浏览器的各种信息，

alert(BrowserDetect.browser);   //浏览器的名称
alert(BrowserDetect.version);   //浏览器的版本
alert(BrowserDetect.OS);    //浏览器所在的系统

3、检测插件

插件是一类特殊的程序。他可以扩展浏览器的功能，通过下载安装完成。navigator对象的plugins属性，这个一个数组。存储在浏览器已安装插件的完整列表。

属性	含义
name	插件名
filename	插件的磁盘文件名
length	plugins数组的元素个数
description	插件的描述信息

for(var i=0;i<navigator.plugins.length;i++){
    document.write("插件名:"+navigator.plugins[i].name+"<br/>");
    document.write("文件名:"+navigator.plugins[i].filename+"<br/>");
    document.write("描  述:"+navigator.plugins[i].description+"<br/>");
    document.write("<br/>");
}

譬如，检测浏览器是否存在Flash插件，然而IE浏览器又是很特殊的存在，需要和其他浏览器区别对待，

（1）检测非IE浏览器插件是否存在

function hasPlugin(name){
    var name=name.toLowerCase();
    for(var i=0;i<navigator.plugins.length;i++){
        if(navigator.plugins[i].name.indexOf(name)>-1){
            return true;
        }
    }
    return false;
}
alert(hasPlugin("Flash"));

（2）检测IE浏览器的控件。

在IE中称之控件，因为IE浏览器没有插件，而提供了ActiveX控件。ActiveX控件是一种在Web页面中嵌入对象或组件的方法，

function hasIEPlugin(name){
    try{                        //此处尝试执行一段代码，如果有误则执行catch
        new ActiveXObject(name) //这里的name必须是控件的唯一标识符ID
        return true;            //new成功了没有产生错误就不执行catch
    }catch(e){
        return false;           //new失败了执行catch里语句
    }
}
alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));

其中，ShockwaveFlash.ShockwaveFlash是IE中代表FLASH的标识符，你需要检查哪种控件，必须先获取它的标识符。

（3）跨浏览器检测

function hasPlugin(name){
    var name=name.toLowerCase();
    for(var i=0;i<navigator.plugins.length;i++){
        if(navigator.plugins[i].name.indexOf(name)>-1){
            return true;
        }
    }
    return false;
}
function hasIEPlugin(name){
    try{                       
        new ActiveXObject(name) 
        return true;            
    }catch(e){
        return false;           
    }
}
function hasFlash(){
    //首先检测非IE浏览器
    var result=hasPlugin("Flash");    //如果返回true说明检测到了，并不是IE浏览器  
    if(!result){                    //如果没有检测到说明这个浏览器没有flash插件或可能是IE浏览器
        result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash")；
    }
    return result;
}
alert(hasFlash());

二、客户端检测

客户端检测一共分为三种：能力检测、怪癖检测和用户代理检测。通过这三种检测方案，可了解当前浏览器所处系统、支持的语法、具有的特殊性能。

1、能力检测（特性检测）

能力检测不必估计特定的浏览器，只需要确定当前的浏览器是否支持特定的能力，就可以给出可行的解决方案。譬如，求不同浏览器的宽度，IE浏览器和其它浏览器不一样，可做兼容处理（也就是判断一下），

var width=window.innerWidth;
if(typeof width != "number"){
    width=document.documentElement.clientWidth;
}
alert(width);

2、怪癖检测（bug检测）

怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷(bug)。

3、用户代理检测

通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过JavaScript的navigator.userAgent属性访问，由此获取当前浏览器的版本号、浏览器名称、系统名称。

譬如，检测我当前学习的测验的浏览器，

document.write(navigator.userAgent);	

// Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

每个主流浏览器有它自己的内核（引擎），所谓呈现引擎，就是用来排版网页和解释浏览器的引擎。

主流浏览器	内核
IE	Trident（IE8体现出来了，之前的未体现）
Firefox	Gecko
Chrome	WebKit / blink
Safari	WebKit
Opera	Presto（旧版本根本无法体现呈现引擎）

var client=function(){
    
//引擎（内核）
    var engine={
        ie:false,
        gecko:false,
        webkit:false,
        khtml:false,
        opera:false,

        //内核的版本version
        ver:0
    };

//浏览器
    var browser={
        ie:false,
        firefox:false,
        chrome:false,
        safari:false,
        opera:false,

        //浏览器的版本
        ver:0,
        
        //浏览器通用名称
        name:""
    }


//核心检测程序区
    var ua=navigator.userAgent;

//Opera内核浏览器的检测
    //因为只有Opera浏览器支持window.opera对象，其它浏览器无法识别。通过这个对象，可以很容易获取到Opera的信息
    if(window.opera){
        engine.opera=true;      //表示确定了为Opera内核
        engine.ver=window.opera.version();
        
        browser.opera=true;     //确定了为Opera浏览器
        browser.ver=window.opera.version();
        browser.name="Opera";
    }


//webkit内核的浏览器检测
    else if(/AppleWebKit\/(\S+)/.test(ua)){ //上例代码可知版本号为AppleWebKit/537.36，根据这个写出正则表达式进行判断
        engine.webkit=true;     //表示确定了为webkit内核
        engine.ver=RegExp['$1'];

        if(/Chrome\/(\S+)/.test(ua)){
            browser.chrome=true;        //确定了谷歌浏览器
            browser.ver=RegExp['$1'];
            browser.name="Chrome";
        }else{
            browser.safari=true;    //确定了苹果浏览器
            if(/Version\/(S+)/.test(ua)){
                browser.ver=RegExp['$1'];
            }
            browser.name="Chrome";
        }
    }


//Gecko内核的浏览器检测
    else if(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){
        engine.gecko=true;      //表示确定了为gecko内核
        engine.ver=RegExp['$1'];

        if(/Firefox\/(\S+)/.test(ua)){
            browser.firefox=true;       //确定了火狐浏览器
            browser.ver=RegExp['$1'];
            browser.name="Firefox";
        }
    }


//IE浏览器内核检测
    else if(/MSIE([^;]+)/.test(ua)){
        engine=true;            //表示确定了为IE内核
        engine.ver=RegExp['$1'];

        browser.ie=true;        //确定了为IE浏览器
        browser.ver=RegExp['$1'];
        browser.name="Internet Explorer";
    }


    return{             //返回一个对象，这样可同时返回引擎、浏览器
        engine:engine,   //返回引擎，前一个engine为属性，后一个engine是对象值

        browser:browser
    }
}();        //自我执行并赋值



if(client.engine.opera){
    alert("当前使用的为Opera浏览器，版本为："+client.engine.ver);
}

if(client.engine.webkit){
    alert("WebKit引擎的版本为："+client.engine.ver);
}

if(client.engine.gecko){
    alert("Gecko引擎的版本为："+client.engine.ver);
}

alert(client.browser.name+client.browser.ver);