热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

javascript检测浏览器类型和版本的代码

如果对javascript了解不是特别深入的话,很容易就会写出不兼容的代码(就像我),这时候就得判断浏览器了。比如事件侦听、一些鼠标和键盘事件、Range等,一些都会不一样.下面列出几种常用的检测浏览器方法,以飨观众!
检测浏览器及其版本的代码
代码如下:

getBrowser : function(){
var browser = {
msie: false, firefox: false, opera: false, safari: false,
chrome: false, netscape: false, appname: 'unknown', version: 0
},
userAgent = window.navigator.userAgent.toLowerCase();
if ( /(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) ){
browser[RegExp.$1] = true;
browser.appname = RegExp.$1;
browser.version = RegExp.$2;
} else if ( /version\D+(\d[\d.]*).*safari/.test( userAgent ) ){ // safari
browser.safari = true;
browser.appname = 'safari';
browser.version = RegExp.$2;
}
return browser.appname + browser.version;
}

对象/特征检测法

该方法是一种判断浏览器能力(而非浏览器的确切型号)的通用方法。大部分JS专家认为这个方法最合适,因为他们认为按照该方法所编写的脚本是经得起未来考验的。

//获取IE浏览器的版本号
//返回数值,显示IE的主版本号
function getIEVer() {
 var ua = navigator.userAgent; //获取用户端信息
 var b = ua.indexOf("MSIE "); //检测特殊字符串"MSIE "的位置
 if (b <0) {
  return 0;
 }
 return parseFloat(ua.substring(b + 5, ua.indexOf(";", b))); //截取版本号字符串,并转换为数值
}
alert(getIEVer()); //返回数值8(我的IE8)

如果更关注浏览器的能力而不在乎它实际的身份,就可以使用这种方法。

user-agent字符串检测法

user-agent字符串提供了关于Web浏览器的大量信息,包括浏览器的名称和版本。

var ua = navigator.userAgent.toLowerCase(); //获取用户端信息
var info = {
 ie: /msie/.test(ua) && !/opera/.test(ua),  //匹配IE浏览器
 op: /opera/.test(ua),  //匹配Opera浏览器
 sa: /version.*safari/.test(ua),  //匹配Safari浏览器
 ch: /chrome/.test(ua),  //匹配Chrome浏览器
 ff: /gecko/.test(ua) && !/webkit/.test(ua)  //匹配Firefox浏览器
};
(info.ie) && alert("IE浏览器");
(info.op) && alert("Opera浏览器");
(info.sa) && alert("Safari浏览器");
(info.ff) && alert("Firefox浏览器");
(info.ch) && alert("Chrome浏览器");

通常我们做得最多的,就是判断是否是IE了,其它几种浏览器一般都会符合标准.有些客户只需要符合IE和FF就已经满足了.那么我们可以这样做:

var isIE = (navigator.appName == "Microsoft Internet Explorer");

判断IE远远不止上面一种方法,可以使用IE更多特有的东西,如:window.ActiveXObject,document.all等,这些都属于对象/特征检测法了!通常要在不同的浏览器上写不同的样式(因为IE样式解析也各有不同),那就得判断版本了.可以这样做

//获取IE浏览器的版本号
//返回数值,显示IE的主版本号
function getIEVer() {
 var ua = navigator.userAgent; //获取用户端信息
 var b = ua.indexOf("MSIE "); //检测特殊字符串"MSIE "的位置
 if (b <0) {
  return 0;
 }
 return parseFloat(ua.substring(b + 5, ua.indexOf(";", b))); //截取版本号字符串,并转换为数值
}
alert(getIEVer()); //返回数值7

检测操作系统:

var isWin = (navigator.userAgent.indexOf("Win") != -1); //如果是Windows系统,则返回true
var isMac = (navigator.userAgent.indexOf("Mac") != -1);  //如果是Macintosh系统,则返回true
var isUnix = (navigator.userAgent.indexOf("X11") != -1);  //如果是Unix系统,则返回true
var isLinux = (navigator.userAgent.indexOf("Linux") != -1);  //如果是Linux系统,则返回true

文章大部分内容来自于《Javascript征途》


推荐阅读
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 在跨浏览器开发中,一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理,并提供了最佳实践建议。 ... [详细]
  • 本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作,并介绍了获取本地文件路径的方法。HTML5提供了一系列API,使得这些操作变得更加简便和安全。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文详细探讨了JavaScript中四种获取CSS样式的不同方法:style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题,并提供了解决方案。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • 本文基于作者使用Flask框架处理后端逻辑和原生JavaScript及jQuery进行前端开发的经验,详细介绍了如何在前后端之间高效地传输JSON数据。文章不仅涵盖了技术实现细节,还提供了实用的代码示例。 ... [详细]
  • 本文详细介绍了如何在Apache Shiro框架中实现对并发登录人数的限制,包括配置和自定义过滤器的具体步骤。 ... [详细]
  • 探索PWA H5 Web App优化之路(Service Worker与Lighthouse的应用)
    本文探讨了如何通过Service Worker和Lighthouse工具来优化PWA H5 Web App,旨在提升用户体验,包括提高加载速度、增强离线访问能力等方面。 ... [详细]
  • SonarQube配置与使用指南
    本文档详细介绍了SonarQube的配置方法及使用流程,包括环境准备、样本分析、数据库配置、项目属性文件解析以及插件安装等内容,适用于具有Linux基础操作能力的用户。 ... [详细]
  • 随着各大机构逐步统一浏览器标准,不同浏览器间的转换需求日益突出。本文探讨了一种通过自定义浏览器协议,在现有系统中实现从一个浏览器无缝跳转至另一浏览器的方法。 ... [详细]
  • 本文介绍如何使用Python编写一个简单的爬虫程序,从知乎问题页面抓取美腿图片。环境配置包括Windows 10操作系统,Python语言及其相关库。 ... [详细]
  • CSS3 鼠标样式详解:cursor: not-allowed 禁止手势
    本文详细介绍了 CSS3 中的 `cursor: not-allowed` 属性,该属性用于在用户无法执行特定操作时显示一个禁止手势。此外,还探讨了如何通过结合 `pointer-events: auto!important;` 来增强用户体验。 ... [详细]
  • 精选10款jQuery内联编辑插件
    本文精选了10款优秀的jQuery内联编辑插件,旨在帮助开发者实现页面内容的动态管理和即时编辑,提升用户体验。 ... [详细]
author-avatar
梦魇心芽_932
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有