Js 获取、判断浏览器版本信息的简单方法_javascript技巧

Navigator 对象包含有关浏览器的信息:

•appCodeName -- 浏览器代码名的字符串表示

•appName -- 官方浏览器名的字符串表示

•appVersion -- 浏览器版本信息的字符串表示

•cookieEnabled -- 如果启用cookie返回true,否则返回false

•javaEnabled -- 如果启用java返回true,否则返回false

•platform -- 浏览器所在计算机平台的字符串表示

•plugins -- 安装在浏览器中的插件数组

•taintEnabled -- 如果启用了数据污点返回true,否则返回false

•userAgent -- 用户代理头的字符串表示

navigator中最重要的是userAgent属性,返回包含浏览器版本等信息的字符串;

cookieEnabled也很重要,使用它可以判断用户浏览器是否开启cookie。

javaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断(版本只能通过分析userAgent获得);

只有在浏览器类型 和 浏览器版本都判断出后,才能处理兼容性问题。

1、通过userAgent中的特征来判断浏览器类型及版本(常用、保险做法)

function getBrowserInfo() {
  var Sys = {};
  var ua = navigator.userAgent.toLowerCase();
  var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
  (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
  (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
  (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
  (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

  if(Sys.ie) {
    return 'IE: ' + Sys.ie;
  }
  if(Sys.firefox) {
    return 'Firefox: ' + Sys.firefox;
  }
  if(Sys.chrome) {
    return 'Chrome: ' + Sys.chrome;
  }
  if(Sys.opera) {
    return 'Opera: ' + Sys.opera;
  }
  if(Sys.safari) {
    return 'Safari: ' + Sys.safari;
  }
}
var browser = getBrowserInfo() ;
var verinfo = (browser+"").replace(/[^0-9.]/ig, "");   // 版本号

注意:一些浏览器的userAgent属性值中Chrome、Safari皆有,是因为Chrome的userAgent还包含了Safari的特征,因此这可能是Chrome可运行Safari浏览器应用的基础的原因。

2、通过各浏览器独有特性来分辨浏览器(需注意:这些特征可能会随浏览器版本而变化,或是其他浏览器也就可能跟着加入该特性,从而导致判断失败)

IE:只有IE支持创建ActiveX控件,所以ActiveXObject函数是其他浏览器没有的。只需判断window对象存在 ActiveXObject函数,就明确判断出当前浏览器是IE。

Firefox:FF中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小。这是Firefox独有的,判断它即可分辨当前浏览器是Firefox。(IE对应的中是 getBoundingClientRect函数)

Opera:Opera提供了专门的浏览器标志-- window.opera属性。

Safari:openDatabase函数是其他浏览器没有的,可做为判断Safari的标志。

Chrome:和FF一样都一个MessageEvent函数,但Chrome并没有FF的getBoxObjectFor 函数,根据这两个条件可判断Chrome浏览器。

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if(window.ActiveXObject) {
  Sys.ie = ua.match(/msie ([\d.]+)/)[1]
}else if(document.getBoxObjectFor) {
  Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
}else if(window.MessageEvent && !document.getBoxObjectFor) {
  Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
}else if(window.opera) {
  Sys.opera = ua.match(/opera.([\d.]+)/)[1]
}else if(window.openDatabase) {
  Sys.safari = ua.match(/version\/([\d.]+)/)[1];
}

水平有限,文中错误不妥在所难免,欢迎批评指正建议评论。文章将不定期修改完善斧正。谢谢!

以上这篇Js 获取、判断浏览器版本信息的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js判断浏览器版本
javascript判断浏览器、uc浏览器javascript、浏览器启用javascript、谷歌浏览器javascript、浏览器禁用javascript,以便于您获取更多的相关知识。

时间: 2024-09-21 12:04:47

Js 获取、判断浏览器版本信息的简单方法_javascript技巧的相关文章

Js操作DOM元素及获取浏览器高宽的简单方法_javascript技巧

在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS

js停止冒泡和阻止浏览器默认行为的简单方法_javascript技巧

停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C的stopPropagation()方法 e.stopPropagation(); else //使用IE的cancelBubble = true来取消事件冒泡 window.event.cancelBubble = true; } 阻止浏览器默认行为-通用方法 //阻止浏览器的默认行为 function s

js移动焦点到最后位置的简单方法_javascript技巧

当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好.网上的大部分方法都是针对IE浏览器的. 代码如下: var el = document.getElementById('txtArticle'); var range = el.createTextRange(); range.moveStart('character', el.value.length); range.collapse(false); range.select(); 其实可以将mov

JS动态给对象添加事件的简单方法_javascript技巧

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

js中用cssText设置css样式的简单方法_javascript技巧

如果网页中一个 id为"no"的标签,暂且当div标签来tell: 想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把. 一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create

通过JS获取Request.QueryString()参数的值实现方法_javascript技巧

如下所示: function getArgs(strParame) { var args = new Object( ); var query = location.search.substring(1); // Get query string var pairs = query.split("&"); // Break at ampersand for(var i = 0; i < pairs.length; i++) { var pos = pairs[i].ind

JS获取及验证开始结束日期的方法_javascript技巧

本文实例讲述了JS获取及验证开始结束日期的方法.分享给大家供大家参考,具体如下: function validation() { var startdate=document.getElementById("start_tenancyDate_s").value; var enddate=document.getElementById("end_tenancyDate_s").value; var datesent=dateDiff(enddate,startdat

js获取隐藏元素宽高的实现方法_javascript技巧

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

js 获取元素所有兄弟节点的实现方法_javascript技巧

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i