javascript 学习笔记(六)浏览器类型及版本信息检测代码_基础知识

下面的checkBrowser()函数主要检测了三种浏览器(IE, firefox, chrome),其它的浏览器的检测有兴趣的朋友可以自行添加检测代码!
HTML部分代码: (页面加载时执行检测函数)

复制代码 代码如下:

<body onload="checkBrowser()">
<p id="userAgent"></p>
<p id="browser"></p>
</body>

javascript部分代码:
检测的原理主要根据 浏览器的用户代理报头nanigator.userAgent中提取到浏览器和类型及版本信息,利用正则表达式可以很容易的满足我们的需求,如对正则表达式不熟悉,可参照此文(正则表达式)

复制代码 代码如下:

function check(reg) {
var ug = navigator.userAgent.toLowerCase();
return reg.test(ug);
}
function checkBrowser() {
var ug = navigator.userAgent.toLowerCase();
var userAgent = document.getElementById("userAgent");
userAgent.innerHTML = "浏览器的用户代理报头:" + ug;
var browserType = "";
var ver = "";
//检测IE及版本
var IE = ug.match(/msie\s*\d\.\d/); //提取浏览器类型及版本信息,注match()方法返回的是数组而不是字符串
var isIE = check(/msie/);
if(isIE) {
browserType = "Internet Explorer";
ver = IE.join(" ").match(/[0-9]/g).join("."); //先用join()方法转化为字符串,然后用match()方法匹配到版本信息,再用join()方法转化为字符串
}
//检测chrome及版本
var chrome = ug.match(/chrome\/\d\.\d/gi);
var isChrome = check(/chrome/);
if(isChrome) {
browserType = "Chrome";
ver = chrome.join(" ").match(/[0-9]/g).join(".");
}
//检测firefox及版本
var firefox = ug.match(/firefox\/\d\.\d/gi);
var isFirefox = check(/firefox/);
if(isFirefox) {
browserType = "Firefox";
ver = firefox.join(" ").match(/[0-9]/g).join(".");
}
var browser = document.getElementById("browser");
browser.innerHTML = "您正在使用的浏览器为:" + browserType + "<span style='padding-left:15px;'>版本为:</span>" + ver;
}

PS:各浏览器的用户代理信息如下:

 

IE:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; BOIE9;ZHCN);
firefox:Mozilla/5.0 (Windows NT 6.1; rv:2.0) Gecko/20100101 Firefox/4.0;
chrome:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13
时间: 2024-12-29 21:26:35

javascript 学习笔记(六)浏览器类型及版本信息检测代码_基础知识的相关文章

javascript学习笔记(三)显示当时时间的代码_基础知识

html代码如下: 复制代码 代码如下: <div id="showTime"></div> javascript 代码如下:时间显示格式为:2011-04-04 星期二 12:09:34 复制代码 代码如下: function startTime() { try{ var today = new Date(); var year = today.getFullYear(); var month = checkNum(today.getMonth()+1); v

javascript学习笔记(十八) 获得页面中的元素代码_基础知识

1.获取元素 getElementById()方法,通过元素的id获取元素,接受一个参数即要获取元素的id,如果不存在这个id返回 null 注意不要让表单元素的name和别的元素的id相同,IE8以下的IE浏览器用这个方法通过元素的name属性可以获得该元素 以下面元素为例 <div id ="myDiv">这里是id为"myDiv"的div内容</div>var document.getElementById("myDiv&qu

javascript学习笔记(三)BOM和DOM详解_基础知识

js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM

javascript学习笔记(七)Ajax和Http状态码_基础知识

Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡. AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com':或者使用服务器代理,代理XMLHttpRequest文件 AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML (作为转换数据

Javascript 学习笔记之 对象篇(二) : 原型对象_基础知识

Javascript 是唯一一个被广泛运用的原型式继承的语言,所以理解两种继承方式的差异是需要时间的. 第一个主要差异就是 Javascript 使用原型链来继承: function Foo() { this.value = 42; } Foo.prototype = { method: function() {} }; function Bar() {} 设置 Bar 的 prototype 为 Foo 的对象实例: Bar.prototype = new Foo(); Bar.prototy

Javascript学习笔记之函数篇(四):arguments 对象_基础知识

每一个 Javascript 函数都能在自己作用域内访问一个特殊的变量 - arguments.这个变量含有一个传递给函数的所有参数的列表. arguments 对象不是一个数组.尽管在语法上它跟数组有相同的地方,例如它拥有 length 属性.但它并不是从 Array.prototype 继承而来,实际上,它就是一个对象. 因此,我们不能直接对 arguments 使用一些数组的方法,例如 push, pop 或 slice 等. 所以为了使用这些方法,我们就需要将其转换为一个真正的数组. 转

Javascript学习笔记之函数篇(五) : &amp;#65279;构造函数_基础知识

Javascript 中的构造函数与其他语言相比也是不同的.任何通过关键字 new 调用的函数都可以当做构造函数. 在构造函数体内,this 指向新创建的对象.如果构造函数体内没有显示的 return 表达式,那么我们就默认返回 this,也就是新建的对象. 复制代码 代码如下: function Foo() {     this.bla = 1; } Foo.prototype.test = function() {     console.log(this.bla); }; var test

javascript学习笔记(十五) js间歇调用和超时调用_基础知识

1.超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID 复制代码 代码如下: setTimeout( function () { alert("你好!"); },1000); 调用前取消clearTimeout(),接受一个参数超时调用ID 复制代码 代码如下: var timeOutId = setTimeout( function () { alert("你好!"); },1

JavaScript中的跨浏览器事件操作的基本方法整理_基础知识

绑定事件 EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } /