好程序员web前端培训分享如何用js检测浏览器类型

简介:

  这个需求在前端开发当中是很常见的,大家都知道我们写的js或css在浏览器中是有兼容问题的,当下虽然大家可能不用感受的IE6带来的痛苦(别问我为什么是痛苦),但是你负责的项目本身就是政府、医院之类的项目,这个时候还是得受兼容问题的困扰。
  解决方案一:老老实实的在写html、css和js的时候就考虑兼容的问题,边写边测试,完成后自然就是兼容的了。这就需要你下载各种浏览器,IE浏览器就用IETester测试(IETester是一个免费的Web浏览器调试工具 ),IETester的坑非常多,根本不准,真实IE6还是会出bug(哭),后面学乖了,安装虚拟机,虚拟机里面装XP,XP自带了IE6,做好还用真的浏览器测试一下。这种方法花费的精力蛮多的,你自己搜索一下IE6/7/8的css兼容问题就明白了,所以还是用方法二吧。
  解决方案二:直接检测浏览器类型和版本,给出提示信息,直接让用户不用IE打开就行,那就是让用户升级浏览器了,一劳永逸的方法。效果如下所示:
js_

具体的实现方法也比较简单,JavaScript 包含一个名为 Navigator 的对象 ,Navigator 包含了有关访问者浏览器的信息,包括浏览器类型、版本等等 。Navigator对象里面含有两个重要的属性,appName (保存浏览器类型 ),appVersion (保存有浏览器的版本信息 )。下面我们用代码来测试一下:

var browser = navigator.appName;//获取浏览器名字    var b_version = navigator.appVersion;//获取浏览器版本信息    var version = parseFloat(b_version);//提取浏览器版本号​
document.write("浏览器名称是: " + browser)//浏览器名称是: Netscape    document.write("<br />")
document.write("浏览器版本是: " + version)//浏览器版本是: 5</script>

上面例子中的 browser 变量存有浏览器的名称,比如,非IE显示"Netscape" 或者 IE显示"Microsoft Internet Explorer" ,所以只能判别是IE还是非IE,如果你是想让用户不用IE浏览器,这样也可以了。这里要注意一点,IE的版本号是有点问题的,IE4/5/6的版本号都是4.0,所以我们就可以做到:如果用户使用的是IE6或以下版本,请用户升级浏览器。

function detectBrowser() {
    var browser = navigator.appName//获取浏览器名字        var b_version = navigator.appVersion//获取浏览器版本信息        var version = parseFloat(b_version)//提取浏览器版本号​
    if ((browser == "Netscape" || browser == "Microsoft Internet Explorer")
        && (version >= 4)) {
        console.log('非IE浏览器,能访问页面');
    }
    else { alert("优秀的小伙伴都选择切换其他浏览器或升级IE浏览器了哦") }
}​
detectBrowser();//调用函数,判别浏览器,如果是IE低版本提示用户升级</script>

当然,如果你想判别具体是哪种浏览器,那还得利用Navigator 的对象的userAgent属性,比如:
var userAgent = navigator.userAgent;console.log(userAgent);
这里打印的是:Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0 ,
用火狐测试;只要我们判断这段字符串里面包含Firefox就可以判断当下我们就是用火狐浏览器了,同样的方法我们可以用来检测各个浏览器:
function getBrowserType(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var browser='unknown';
if (userAgent.indexOf("IE")!=-1) {//字符串含有IE字段,表明是IE浏览器 browser="IE";
}else if(userAgent.indexOf('Firefox')!=-1){//字符串含有Firefox字段,表明是火狐浏览器 browser="Firefox";
}else if(userAgent.indexOf('OPR')!=-1){//Opera browser="Opera";
}else if(userAgent.indexOf('Chrome')!=-1){//Chrome browser="Chrome";
}else if(userAgent.indexOf('Safari')!=-1){//Safari browser="Safari";
}else if(userAgent.indexOf('Trident')!=-1){//IE内核 browser='IE 11';
}
return browser;}
如果你还想进一步判断IE浏览器的版本 ,比如:edge,ie11,10,9,8,7,6,5,4 ,代码如下:
// 获取IE版本function IEVersion() {
// 取得浏览器的userAgent字符串 var userAgent = navigator.userAgent;
// 判断是否为小于IE11的浏览器 var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
// 判断是否为IE的Edge浏览器 var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
// 判断是否为IE11浏览器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
if (isLessIE11) {

var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
// 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分,,这一步不可省略!!!    IEReg.test(userAgent);
// 取正则表达式中第一个小括号里匹配到的值    var IEVersionNum = parseFloat(RegExp['$1']);
if (IEVersionNum === 7) {
  // IE7      return 7
} else if (IEVersionNum === 8) {
  // IE8      return 8
} else if (IEVersionNum === 9) {
  // IE9      return 9
} else if (IEVersionNum === 10) {
  // IE10      return 10
} else {
  // IE版本<7      return 6
}

} else if (isEdge) {

// edge    return 'edge'

} else if (isIE11) {

// IE11    return 11

} else {

// 不是ie浏览器    return -1

}}
综合上面的方法,我们就可以回到今天的主题啦,我们的需求是:如果用户使用的是IE5/6/7/8,提示用户升级或切换其他浏览器:
第一步:声明一个函数(可以判断各个浏览器和版本)
function getBroswerAndVersion(){//该函数可以判断各种浏览器和版本,最厉害的版本 var os = navigator.platform;
var userAgent = navigator.userAgent;
var info = "";
var tempArray = "";
//判断浏览器版本 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; //判断是否IE的Edge浏览器 var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);

if (/[Ff]irefox(/d+.d+)/.test(userAgent)) {

tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent); 
info += tempArray[1] + tempArray[2]; 

} else if (isIE) {

var version = ""; 
var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); 
reIE.test(userAgent); 
var fIEVersion = parseFloat(RegExp["$1"]); 
if (fIEVersion == 7) 
{ version = "IE7"; } 
else if (fIEVersion == 8) 
{ version = "IE8"; } 
else if (fIEVersion == 9) 
{ version = "IE9"; } 
else if (fIEVersion == 10) 
{ version = "IE10"; } 
else
{ version = "0" } 

info += version; 

} else if (isEdge) {

info += "Edge"; 

} else if (isIE11) {

info += "IE11"; 

} else if (/[Cc]hrome/d+/.test(userAgent)) {

tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent); 
info += tempArray[1] + tempArray[2]; 

} else if (/[Vv]ersion/d+.d+.d+(.d) [Ss]afari/.test(userAgent)) {

tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent); 
info += tempArray[3] + tempArray[1]; 

} else if (/[Oo]pera.+[Vv]ersion/d+.d+/.test(userAgent)) {

tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent); 
info += tempArray[1] + tempArray[2]; 

} else {

info += "unknown"; 

}
return info;}
第二步:调用函数,得到的结果再判断给用户提示即可
var bro = getBroswerAndVersion();//上面第一步封装的函数,调用会得到一个返回值if(bro=="IE5" || bro=="IE6" || bro=="IE7" || bro=="IE8" ){
alert("浏览器版本过低!请升级至IE9以上");//此处应该显示一个漂亮的图片,让用户觉得再不升级就是out了}

相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
170 2
|
2月前
|
SQL 安全 PHP
PHP 自发布以来一直在 Web 开发领域占据重要地位,PHP 8 更是带来了属性、刚性类型等新特性。
【10月更文挑战第1天】PHP 自问世以来,凭借其易用性和灵活性,在 Web 开发领域迅速崛起。从简单的网页脚本语言逐步演进为支持面向对象编程的现代语言,尤其自 PHP 5.3 引入命名空间后,代码组织和维护变得更加高效。PHP 7 的性能优化和 PHP 8 的新特性(如属性和刚性类型)进一步巩固了其地位。框架如 Laravel、Symfony、Yii2 和 CodeIgniter 等简化了开发流程,提高了效率和安全性。
52 2
|
23天前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
22天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
26天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
33 4
|
1月前
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
31 3
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
216 9
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
2月前
|
Web App开发 开发者