使用JavaScript检测浏览器

使用JavaScript检测浏览器

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

    假设你真的需要检测浏览器的类型,使用JavaScript非常easy达到。

 

Preview image of browser detection demo page.

View Demo

Download Source from GitHub

    JavaScript有一个navigator的标准对象,它包括了关于浏览器使用的信息。

    navigator对象由非常多属性。可是userAgent属性—一个字符串就已经包括了浏览器、操作系统以及其他我们须要的全部信息。

    假设须要显示navigator.userAgent的值。仅仅须要选择以下的一种的方式就能够:


Alert

// Display in an alert box
alert(navigator.userAgent);

使用JavaScript检测浏览器

火狐30在win7上的navigator.userAgent值。

Document.write

// Write it in the HTML document
document.write(navigator.userAgent); 

console.log

// Display it in the browser's developer tool
// This is ideal
// Use console.log() when you're developing/experimenting JavaScript
console.log(navigator.userAgent);

对于IE11,输出例如以下

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

    正如你看到的。使用userAgent.navigator的问题在于。它是一串非常长的字符串,而且可读性不好。

所以。假设我想得到想要的信息,或者把它给用户看,我首先,我要解析这个字符串。问题是我对于正則表達式的使用(在其它一些方面)显得无能为力。所以我非常乐意使用Darcy Clarke写的Detect.js JavaScript 程序库。

    Detect.js可以将一个字符串解析为一个可读和可操作的JavaScript对象。为了显示浏览器的名称、版本号以及所用的操作系统,可參考例如以下代码:

// Create 'user' object that will contain Detect.js stuff
// Call detect.parse() with navigator.userAgent as the argument
var user = detect.parse(navigator.userAgent);

// Display some property values in my browser's dev tools console
console.log(
  user.browser.family
  user.browser.version
  user.os.name
);

Firebug, 将看到:

Firefox 30 Windows 7

Console log of Firebug.

同一台机器上。在Google开发人员工具中的结果是:

Chrome 35 Windows 7

console.log() of Chrome DevTools

能够使用条件语句来针对一个特定的浏览器,比如:仅仅想针对Safari桌面浏览器

if (user.browser.family === 'Safari') {
  alert('You\'re using the Safari browser');   
}

Chrome DevTools console log.

全部被解析过的属性表:

使用JavaScript检测浏览器

注意:假设属性不能被解析,则其值为null或者undefined。假设你想把这些信息给你的用户看,那么你就应该对于可能出现null或者undefined的值地方条件推断。



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/117066.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python集成开发环境(Eclipse+Pydev)「建议收藏」

    Python集成开发环境(Eclipse+Pydev)

    2022年1月24日
    43
  • HDMI接口定义,传输流程

    HDMI接口定义,传输流程全文摘自:https://www.cnblogs.com/TaigaCon/p/3840653.htmlHDMI,全称为(HighDefinitionMultimediaInterface)高清多媒体接口,主要用于传输高清音视频信号。 HDMI引脚…

    2022年5月1日
    67
  • Eclipse背景颜色修改

    Eclipse背景颜色修改Eclipse背景颜色修改: 操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些。设置方法如下: 1、打开window->Preference,弹出Preference面板 2、展开General标签,选中Editors选项,展开。 3、选中TestEditors,右边出现Test

    2022年6月20日
    24
  • Raid0、Raid1、Raid0+1、Raid5

    Raid0、Raid1、Raid0+1、Raid5Raid0:最少需要两块盘,没用冗余数据,不做备份,任何一块磁盘损坏都无法运行。n块磁盘(同类型)的阵列理论上读写速度是单块磁盘的n倍(实际达不到),风险性也是单一n倍(实际更高),是磁盘阵列中存储性能最好的。适用于安全性不高,要求比较高性能的图形工作站或者个人站。Raid1:至少需要两块盘,磁盘数量是2的n倍,每一块磁盘要有对应的备份盘,利用率是50%,只要有一对磁盘没有损坏就可以正常使用…

    2022年7月15日
    13
  • 全景视频拼接关键技术

    全景视频拼接关键技术一、原理介绍图像拼接(ImageStitching)是一种利用实景图像组成全景空间的技术,它将多幅图像拼接成一幅大尺度图像或360度全景图,图像拼接技术涉及到计算机视觉、计算机图形学、数字图像处理以及一些数学工具等技术。图像拼接其基本步骤主要包括以下几个方面:摄相机的标定、传感器图像畸变校正、图像的投影变换、匹配点选取、全景图像拼接(融合),以及亮度与颜色的均衡处理等

    2022年4月16日
    32
  • 什么是重载什么是覆盖_java覆盖和重载的关系

    什么是重载什么是覆盖_java覆盖和重载的关系java中的方法重载发生在同一个类里面两个或者多个方法的方法名相同但是参数不同的情况。与此相对,方法覆盖是说子类重新定义了父类的方法。方法覆盖必须有相同的方法名,参数列表和返回类型。覆盖者可能不会限

    2022年8月2日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号