使用JS判断所用浏览器的类型

2024-08-25 17:38

本文主要是介绍使用JS判断所用浏览器的类型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    在网页前端开发中,不仅仅是页面的一些设计理念我们要注意,浏览器的兼容性问题也让我们手忙脚乱。各种浏览器五花八门。浏览器兼容是前端开发要解决的第一个问题,我们的系统要上线,就要去解决!而不是一味的回避“我们测试用的浏览器是火狐”!

    JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种方法:一种是通过分析浏览器的userAgent属性判断的一种是根据各种浏览器独有的属性来分辨。很多情况下,浏览器不同版本之间也存在兼容问题,而判断浏览器的版本一般只能通过userAgent才能知道。

    我们先来分析一下各种浏览器的特性及其userAgent。

1.IE

 (1)首先看一下IE浏览器的各个版本的userAgent格式:

        Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
        Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
        Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
        Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

注:MSIE后面的是版本号。

我们可以在JS中这样判断使用的是不是IE浏览器:

   if(navigator.userAgent.indexOf("MSIE")>0) {  return "IE";  }

(2)只有IE支持ActiveX控件,因此只有它有ActiveXObject函数。只要判断window对象是否存在ActiveXObject函数就可以判断是不是IE浏览器。

function isIE() { if (!!window.ActiveXObject || "ActiveXObject" in window)return true;elsereturn false;}

2.Firefox火狐

(1)Firefox几个版本的userAgent如下:

        Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
        Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
        Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12

注:版本号是Firefox之后的数字。

同理,我们可以这样判断是不是使用的Firefox:

 if(navigator.userAgent.indexOf("Firefox")>0){  return "Firefox";  }  
(2) Firefox中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小(IE对应的中是 getBoundingClientRect函数)。这是Firefox独有的,判断它即可知道是当前浏览器是Firefox。


3.Chrome

(1)目前,Chrome的userAgent:(查到的就这个了,欢迎大家补充)

 Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.48 Safari/525.19

Chrome后面的数字为版本号。

if(navigator.userAgent.indexOf("chrome") > 0)
{
return “Chrome” ;
}


(2) Chrome有一个MessageEvent函数,但Firefox也有。不过,好在Chrome并没有Firefox的getBoxObjectFor 函数,根据这个条件还是可以准确判断出Chrome浏览器的。

4.Safari

(1)Safari的userAgent如下;'

  Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
   Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Version后面的为版本号。

(2) Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志。

//获取IE的版本号
var regStr_ie = /msie [\d.]+;/gi ;
//获取火狐的版本号
var regStr_ff = /firefox\/[\d.]+/gi
//获取谷歌的版本号
var regStr_chrome = /chrome\/[\d.]+/gi ;
//获取Safari的版本号
var regStr_saf = /safari\/[\d.]+/gi ;

我只是总结了几种常用浏览器的类型和版本,欢迎大家补充!

在网上看到了一个判断浏览器类型及版本的例子,感觉很全面。分享给大家。

<script type="text/javascript">var Sys = {};var ua = navigator.userAgent.toLowerCase();
<span style="white-space:pre">	</span>//判断是不是IEif (window.ActiveXObject)Sys.ie = ua.match(/msie ([\d.]+)/)[1]
<span style="white-space:pre">	</span>//判断是不是火狐else if (document.getBoxObjectFor)Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
<span style="white-space:pre">	</span>//判断是不是谷歌else if (window.MessageEvent && !document.getBoxObjectFor)Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
<span style="white-space:pre">	</span>//判断是不是Safarielse 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>


其实,说起浏览器兼容问题也没有我们想的那么头疼,大家还是要多多严格自己的代码规范,即使是一个小小的Trim也不要忽视,这样,我们的代码才能经得起浏览器的考验!

这篇关于使用JS判断所用浏览器的类型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1106220

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Python如何精准判断某个进程是否在运行

《Python如何精准判断某个进程是否在运行》这篇文章主要为大家详细介绍了Python如何精准判断某个进程是否在运行,本文为大家整理了3种方法并进行了对比,有需要的小伙伴可以跟随小编一起学习一下... 目录一、为什么需要判断进程是否存在二、方法1:用psutil库(推荐)三、方法2:用os.system调用

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB