最靠谱的判断浏览器类型JS方法

2017年08月13日 23:21:36益点益滴4911

Web开发者一般都知道不同的浏览器拥有不同的属性和特征,通常判断浏览器类型我们会用到获取浏览器UserAgent参数的方法,JS代码一般这样写:

<script>
var explorer = window.navigator.userAgent ;  
if (explorer.indexOf("MSIE") >= 0) { alert('ie'); } //判断还是否为IE浏览器
else if (explorer.indexOf("Firefox") >= 0) {  alert('Firefox');  } //判断还是否为Firefox浏览器 
else if(explorer.indexOf("Chrome") >= 0){ alert('Chrome');  } //判断还是否为Chrome浏览器
else if(explorer.indexOf("Opera") >= 0){ alert('Opera'); } //判断还是否为Opera浏览器
else if(explorer.indexOf("Safari") >= 0){ alert('Safari'); } //判断还是否为Safari浏览器
</script>

然而,通过检测 userAgent 的值来判断浏览器类型其实是不可靠的,相对严谨的Web开发项目也不会推荐这种方法,因为用户可以修改userAgent 的值。比如:

Firefox 中,你可以通过在 about:config 页面添加并修改general.useragent.override选项的值来覆盖默认的用户代理字符串。一些Firefox扩展也可以用其他方式修改这个值,但它们通常只会修改发送到服务器的User-Agent请求头的值,而不会影响 JavaScript 代码中获取的 window.navigator.userAgent 属性的值。

Opera 6+ 中允许用户通过菜单选择不同的用户代理字符串。

Microsoft Internet Explorer 使用注册表来配置自己的用户代理字符串。

Safari 和 iCab 也允许用户修改其用户代理字符串,来将自己伪装成 Internet Explorer 或 Netscape。

通过分析各个浏览器的特征后大家总结了如下规律:

IE只有IE支持创建ActiveX控件,它有一个其他浏览器没有的东西,就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是IE;

SafariSafari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志;

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

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

OperaOpera提供了专门的浏览器标志,就是window.opera属性;

结合以上不同浏览器的独有特征,我们可以写出如下判断代码:

 <script>
 if (window.ActiveXObject) alert("IE");
 else if (document.getBoxObjectFor) alert("Firefox");
 else if (window.MessageEvent && !document.getBoxObjectFor) alert("Chrome");
 else if (window.opera) alert("Opera");
 else if (window.openDatabase) alert("Safari");
 </script>

超赞,真给力!嗯,必须鼓励~

打赏0
账号:mxy310@163.com[复制]
账号:77940140[复制]