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

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

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页面的浏览器类型以及版本

(0)

相关推荐

  • 关注jquery技巧提高jquery技能(前端开发必学)

    一个简单技巧的集合,帮你提升 jQuery 技能. Matt Smith 发起的一个小项目,目前已有 14 个 小技巧.伯乐在线会持续跟进更新. 回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度 在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方

  • 前端开发必须知道的JS之原型和继承

    一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: 复制代码 代码如下: function F(){ alert(F.prototype instanceof Object) //true; } 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. 复制代码 代码如下: function A(x){ this.x

  • 前端开发必知的15个jQuery小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

  • WEB前端开发都应知道的jquery小技巧及jquery三个简写

    一个简单技巧的集合,帮你提升 jQuery 技能.目前小编给大家整理了14个jquery小技巧. 目录结构 1回到顶部按钮 2预加载图片 3检查图片是否加载完毕 4自动修复损坏的图片 5Hover 上的 Class 开关 6禁用 input 字段 7停止链接加载 8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义. 1.回到顶部按钮 通过使用 jQuery 中的 an

  • 前端开发必须知道的JS之闭包及应用

    在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教.一. 闭包的理论 首先必须了解以下几个概念: 执行环境 每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行环境中执行,如读写局部变量.函数参数.运行内部逻辑.创建执行环境的过程包含了创建函数的作用域,函数也是在

  • 手机/移动前端开发需要注意的20个要点

    1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-ap

  • 利用Angularjs和Bootstrap前端开发案例实战

    我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点:  1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用.  2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识.  3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller.  4.初步了解Angula

  • jquery图片延迟加载 前端开发技能必备系列

    目前,主要的购物网站都采用了这种加载方式.今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下. 先介绍一下图片延迟加载原理.我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活.不露面. 复制代码 代码如下: <img src="images/placeholder.png" lazy-src="images/real

  • jQuery前端开发35个小技巧

    废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu

  • 使用微信小程序开发前端【快速入门】

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

随机推荐