使用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 产品是什么:PMF模型

    产品是什么:PMF模型一,产品是什么1.能够供给市场2.被人们使用和消费3.满足人们的某种需求需求是产品的基石二,PMF模型PMF(productmarketfit)产品和市场达到最佳的契合点,所提供的产品正好满足用户的需求,令客户满意。1.TargetCustomer目标用户:明确目标用户2.UnderservedNeeds目标用户未被满足的需求:需求分为已有需求,潜在需求,未来需求。分析用户属于哪种需求3.ValueProposition产品的价值定位:明确产品的价值定位,确定产品未用户

    2022年5月10日
    98
  • 微商分销代理商城源码带代理等级和升级条件 thinkphp框架「建议收藏」

    微商分销代理商城源码带代理等级和升级条件 thinkphp框架「建议收藏」  介绍:微商分销代理商城源码基于think框架开发是一款微商分销代理商城源码,可以自己设置代理等级和升级条件(如购买指定商品、消费额度)网站搭建方式介绍:测试环境php7.0+mysql5.6数据库配置文件applicationdatabase.php后台/admin用户:admin密码:123456下载链接:thinkphp框架微商分销代理商城源码-代理等级和升级条件…

    2022年5月17日
    46
  • 美女图片采集器 (源码+解析)[通俗易懂]

    美女图片采集器 (源码+解析)[通俗易懂]前言:有一段时间没写博客了,”持之以恒”徽章都暗了,实在不该。前一段确实比较忙,…小小地给自己的懒找个借口吧。大二即将结束,学习iOS也有一段时间了。今天抽点时间,开源一个前几天刚上传的App里面的一个功能,RT,美女图片采集器。 美女..相信没有人不喜欢吧,基于此,这个小Demo应运而生。注: 本文正在参加博

    2022年9月14日
    3
  • python浪漫表白源码(附带详细教程)_python网站开发实例

    python浪漫表白源码(附带详细教程)_python网站开发实例本文实例为大家分享了python七夕浪漫表白的具体代码,供大家参考,具体内容如下fromturtleimport*fromtimeimportsleepdefgo_to(x,y):up()goto(x,y)down()defbig_Circle(size):#函数用于绘制心的大圆speed(1)foriinrange(150):forward(size)right(0….

    2022年9月16日
    0
  • kali装电脑_Kali安装教程(Windows7和kali双系统安装教程)[通俗易懂]

    kali装电脑_Kali安装教程(Windows7和kali双系统安装教程)[通俗易懂]Kali安装教程(一)Windows7+kali双系统安装准备先安装win7,然后安装kali,并且kali的引导项安装在/boot分区而不安装在MBR中,因为这样的话就算重装win7,kali系统经过简单引导仍然可以使用。Win7的安装此处就不在赘述,现在只聊一聊kali的安装。注:教程中个别截图借用了网上某人热心童鞋的截图,在此表示感谢!!1)准备阶段准备4G的优盘一个;刻录工具为:unetb…

    2022年5月5日
    112
  • executorservice和executor_secureconnector是什么软件

    executorservice和executor_secureconnector是什么软件转自:http://victorzhzh.iteye.com/blog/1010359下面是excutor相关的类结果:ExecutorService接口继承了Executor接口,定义了一些生命周期的方法publicinterfaceExecutorServiceextendsExecutor{voidshutdown();List<Runnable&gt…

    2025年10月19日
    2

发表回复

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

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