javascript几种辨别浏览器的方式

<script language=javascript>
<!--
if (document.all){
document.write("你的浏览器是IE");
} else {
if (document.layers){
document.write("你的浏览器是Netscape");
} else {
document.write("你的浏览器是Firefox"); //此处并不确定
}
}
-->
</script>

判断浏览器的代码:

<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];

//以下进行测试
if(Sys.ie) document.write(‘IE: ‘+Sys.ie);
if(Sys.firefox) document.write(‘Firefox: ‘+Sys.firefox);
if(Sys.chrome) document.write(‘Chrome: ‘+Sys.chrome);
if(Sys.opera) document.write(‘Opera: ‘+Sys.opera);
if(Sys.safari) document.write(‘Safari: ‘+Sys.safari);
</script>

我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。按使用者多少的顺序来判断浏览器类型,可以提高判断效率,少做无用功。之所以将Chrome放在第三判断,是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中,在分析浏览器版本时,用到了正则表达式来析取其中的版本信息。

如果你的JavaScript玩得很高,你还可以将前面的判断代码写成这样:

<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;

//以下进行测试
if(Sys.ie) document.write(‘IE: ‘+Sys.ie);
if(Sys.firefox) document.write(‘Firefox: ‘+Sys.firefox);
if(Sys.chrome) document.write(‘Chrome: ‘+Sys.chrome);
if(Sys.opera) document.write(‘Opera: ‘+Sys.opera);
if(Sys.safari) document.write(‘Safari: ‘+Sys.safari);
</script>

这样可以使JavaScript代码更精简些。当然,可读性稍差一些,就看你是重视效率还是重视可维护性了。

使用不同特征来判断浏览器的方法,虽然在速度上比用正则表达式分析userAgent要来的快,不过这些特征可能会随浏览器版本而变化。比如,一种浏览器本来独有的特性取得了市场上的成功,其他浏览器也就可能跟着加入该特性,从而使该浏览器的独有特征消失,导致我们的判断失败。因此,相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况,反正判断版本信息也需要解析浏览器的userAgent的。

通过分析各类浏览器的userAgent信息,不难得出分辨各类浏览器及其版本的正则表达式。而且,对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是,我们可以写出下面的代码:

<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下进行测试
if (Sys.ie) document.write(‘IE: ‘ + Sys.ie);
if (Sys.firefox) document.write(‘Firefox: ‘ + Sys.firefox);
if (Sys.chrome) document.write(‘Chrome: ‘ + Sys.chrome);
if (Sys.opera) document.write(‘Opera: ‘ + Sys.opera);
if (Sys.safari) document.write(‘Safari: ‘ + Sys.safari);
</script>

其中,采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句,既完成正则表达式的匹配及结果复制,又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可,这是非常高效的代码。

以上的代码都是为了打造前端框架所做的预研,并在五大浏览器上测试通过。今后,判断某种浏览器只需用if(Sys.ie)或if(Sys.firefox)等形式,而判断浏览器版本只需用if(Sys.ie == ‘8.0‘)或if(Sys.firefox == ‘3.0‘)等形式,表达起来还是非常优雅的。

时间: 2024-08-07 12:21:42

javascript几种辨别浏览器的方式的相关文章

转:Selenium2.0介绍——WebDriver两种驱动浏览器的方式

如果之前熟悉Selenium RC,理解了Selenium RC是如何工作的,那么,当第一次接触Selenium WebDriver的时候,看到WebDriver居然可以不需要指定远端服务器的IP地址和端口号的,一定会惊讶的. 事实上,WebDriver有两种方式“驱动”浏览器的方式.1. Selenium Server:和Selenium RC一样的,通过指定远端服务器IP地址和端口号,由这个远端服务器来驱动浏览器.2. 直接调用:无须指定任何服务器IP地址和端口号.直接使用本地的浏览器(只要

javascript两种声明函数的方式的一次深入解析

声明函数的方式 javascript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码: /*方式一*/ var FUNCTION_NAME = function() { /* FUNCTION_BODY */}; /*方式二*/ function FUNCTION_NAME () { /* FUNCTION_BODY */}; 区别一 方式一的声明方式是先声明后使用 方式二的声明方式可以先调用,后声明 /*方式一: *先声明后使用 *

JavaScript两种数据类型的存储方式

JavaScript中数据类型的存储 区别: 两种类型的区别是:存储位置不同 基本数据类型 原始数据类型是直接存储在栈(stack)中的简单数据段.因为占据空间小.大小固定,属于被频繁使用数据,所以放入栈中存储. 引用数据类型 引用数据类型存储在堆(heap)中的对象,占据空间大.大小不固定.如果存储在栈中,将会影响程序运行的性能. JavaScript中的引用数据类型有: Array Object 引用数据类型是保存在堆内存中的,然后再栈内存中保存一个对堆内存中实际对象的引用(栈内存中保存了一

javascript 中九种创建对象的方式

javascript 中对象的简介: ECMA-262 把对象的定义为:"无序属性的集合,其属性可以包含基本值,对象或者函数."严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正是因为这样,我们可以把 javascript 中的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数. javascript 中九种创建对象的方式: 1.原生 Object 构造函数 2.对象字面量表示法 3.工厂模式 4.构造函数模式 5

Javascript学习笔记:3种定义函数的方式

①使用函数声明语法定义函数 1 function sum(num1,num2){ 2 return num1+num2; 3 } ②使用函数表达式定义函数 1 var sum=function(num1,num2){ 2 return num1+num2; 3 } ③使用Function构造函数定义函数 1 var sum=new Function('num1','num2','return num1+num2'); 三种定义函数的方式,其中第二和第三种从技术角度讲都属于函数表达式的方式,但是不

TypeScript和JavaScript哪种语言更先进

TypeScript和JavaScript哪种语言更先进 近两年来最火爆的技术栈毫无争议的是JavaScript,随着ES6的普及,不管是从前端的浏览器来看,还是后端的NodeJS场景,JavaScript技术栈不断的向世界证明自己的价值.JavaScript代码越写越大,众所周知,JavaScript是一门动态语言,缺少静态类型检查,这样就很难在编译阶段排除更多的问题,当然,这就是动态语言的魅力所在,运行时动态处理类型,在我们写代码的时候就可以很更灵活.为了给JavaScript增加类型检查以

felayman---nodejs的几种模块加载方式

nodejs的几种模块加载方式 一.直接在exports对象中添加方法 1.首先创建一个模块(module.js)module.js exports.One = function(){ console.log('first module'); }; 2.load.js var module =require('./module'); module.One(); 这样我们就可以在引入了该模块后,返回一个exports对象,这里是指module对象,其实都只是两个引用或者句柄,只是都指向了同一个资源

mui几种页面跳转方式对比

[几种打开页面的方式] 1.初始化时创建子页面 2.直接打开新页面 3.预加载页面 [示例] 1.初始化时创建子页面 mui.init({       subpages: [{           url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址           id: your - subpage - id, //子页面标志           styles: {               top: subpage - top - po

http 3种web会话管理方式

http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端.所以对我们的应用而言,它是需要有状态管理的,以便服务端能够准确的知道http请求是哪个用户发起的,从而判断他是否有权限继续这个请求.这个过程就是常说的会话管理.它也可以简单理解为一个用户从登录到退出应用的一段期间.本文总结了3种常见的实现web应用会话管理的方式: 1)基于server端sessio