前端开发过程中浏览器版本的两种判定方法


Posted in Javascript onOctober 30, 2013

在网上查找浏览器及版本判定方法有好多,此处小弟总结一二,以节省大家时间。

1.jquery的方法:

通过正则表达式可判定常用浏览器及其版本。

<span style="font-size:12px">function allinfo(){ var ua = navigator.userAgent; 
ua = ua.toLowerCase(); 
var match = /(webkit)[ \/]([\w.]+)/.exec(ua) || 
/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) || 
/(msie) ([\w.]+)/.exec(ua) || 
!/compatible/.test(ua) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) || []; 
//如果需要获取浏览器版本号:match[2] 
switch(match[1]){ 
case "msie": //ie 
if (parseInt(match[2]) === 6){ //ie6 
alert("ie6"); 
alert("暂时不支持IE7.0及以下版本浏览器,请升级您的浏览器版本!"); 
//document.getElementById("hid").style.display = "none"; 
// document.getElementById("show").style.display = "block"; 
//document.getElementById("nosee_b").style.display = "none"; 
} 
else if (parseInt(match[2]) === 7) { //ie7 
alert("ie7"); 
//document.getElementById("hid").style.display = "none"; 
// document.getElementById("show").style.display = "block"; 
} 
else if (parseInt(match[2]) === 8){ //ie8 
alert("ie8"); 
} 
else if(parseInt(match[2]) === 9){ 
alert("ie9"); 
//document.getElementById("hid").style.display = "none"; 
} 
break; 
case "webkit": //safari or chrome 
//alert("safari or chrome"); 
// document.getElementById("middle").style.display = "none"; 
break; 
case "opera": //opera 
alert("opera"); 
break; 
case "mozilla": //Firefox 
alert("Firefox"); 
//document.getElementById("hid").style.display = "none"; 
break; 
default: 
break; 
} 
} </span>

此处用到“===”,了解到其与“==”和“=”的关系

=这个就不多说了,开发中是给参数赋值。

== equality 等同,=== identity 恒等。
==, 两边值类型不同的时候,要先进行类型转换,再比较。
===,不做类型转换,类型不同的一定不等。

For Example:
如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
a、如果一个是null、一个是undefined,那么[相等]。
b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。

2.HTML中的注释方法

(1)HTML中的注释方法
可使用如下代码检测当前IE浏览器的版本(注意:在非IE浏览器中是看不到效果的),此方法用于IE5及以上版本。
HTML 的注释格式是 <!-- Comment content --> , IE 对HTML注释做了一些扩展,使之可以支持条件判断表达式:
<!--[if expression]> HTML <![endif]--> 当表达式expression 为True 的时候,显示 HTML 内容。
[if IE] 判断是否IE
[if !IE] 判断是否不是IE
[if lt IE 5.5] 判断是否是IE5.5 以下版本。 (<)
[if lte IE 6] 判断是否等于IE6 版本或者以下 (<=)
[if gt IE 5] 判断是否IE5以上版本 (> )
[if gte IE 7] 判断是否 IE7 版本或者以上
[if !(IE 7)] 判断是否不是IE7
[if (gt IE 5)&(lt IE 7)] 判断是否大于IE5, 小于IE7
[if (IE 6)|(IE 7)] 判断是否IE6 或者 IE7

lte:就是Less than or equal to的简写,也就是小于或等于的意思。 lt :就是Less than的简写,也就是小于的意思。 gte:就是Greater than or equal to的简写,也就是大于或等于的意思。 gt :就是Greater than的简写,也就是大于的意思。 ! : 就是不等于的意思,跟javascript里的不等于判断符相同
例子:

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]--> 
<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]--> 
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]--> 
<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]--> 
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]--> 
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]--> 
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

(2)应该如何应用条件注释

因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样,具体就是对CSS的解释不同,我们为了兼容这些,可运用条件注释来各自定义,最终达到兼容的目的。

比如: < !?- 默认先调用css.css样式表 ?->

<link rel="stylesheet" type="text/css" href="css.css" />< !-?[if IE 7]>

<!?- 如果IE浏览器版是7,调用ie7.css样式表- ?>

<link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]?->

<!?-[if lte IE 6]>

<!?- 如果IE浏览器版本小于等于6,调用ie.css样式表 -?>

<link rel="stylesheet" type="text/css" href="ie.css" />< ![endif]?> 这其中就区分了IE7和IE6向下的浏览器对CSS的执行,达到兼容的目的。同时,首行默认的css.css还能与其他非IE浏览器实现兼容。

注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。 比如如下代码,在IE浏览器下执行显示为红色,而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行,则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。 <style type="text/css"> body{ background-color: #000; } < /style> < !-?[if IE]>

<style type="text/css">body{background-color: #F00;}< /style>< ![endif]?->

同时,有人会试图使用<!?-[if !IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。

正常就是默认的样式,对IE浏览器需要特殊处理的,才进行条件注释。在HTML文件里,而不能在CSS文件中使用。

现在的DWcs4里面,已经装备了这些注释:在“窗口-->代码片段-->注释”里。其他的版本没太注意到。

此文参考:判断浏览器版本的语句,用于个浏览器兼容,js判断运行jsp页面的浏览器类型以及版本

Javascript 相关文章推荐
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 #Javascript
JS复制到剪贴板示例代码
Oct 30 #Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 #Javascript
js同比例缩放图片的小例子
Oct 30 #Javascript
javascript实现颜色渐变的方法
Oct 30 #Javascript
window.onload和$(function(){})的区别介绍
Oct 30 #Javascript
js history对象简单实现返回和前进
Oct 30 #Javascript
You might like
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
非常不错的MySQL优化的8条经验
2008/03/24 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python操作Excel之xlsx文件
2017/03/24 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
建筑投标担保书
2014/05/20 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
Windows7下FTP搭建图文教程
2022/08/05 Servers