Navigator对象,获取浏览器类型userAgent,机器类型platform

Navigator对象,获取浏览器类型userAgent,机器类型platformJavaScript常用事件集合,前端小白必备(写的很详细,建议收藏)1.文档加载事件鼠标事件获取浏览器类型,手机机型(容易出问题的地方)事件冒泡与事件委托(面试重点)一、获取浏览器类型letuserAgent=navigator.userAgent;console.log(userAgent);if(userAgent.indexOf(“Opera”)>-1){ //判断是否是Opera浏览器console.log(“Opera”);};

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

@Navigator对象

$属性

  • navigator.appCodeName // 浏览器名称 大多都是Mozilla
  • navigator.appName // 完整的浏览器名称
  • navigator.appVersion // 浏览器版本,一般不与实际的浏览器版本对应
  • navigator.cookieEnabled // 表示cookie是否启用
  • navigator.cpuClass // 客户端计算机使用的CPU类型
  • navigator.javaEnabled() // 表示当前浏览器中是否启用了java
  • navigator.language // 浏览器的主语言
  • navigator.systemLanguage // 操作系统的语言
  • navigator.userLanguage // 操作系统的默认语言
  • navigator.mimeTypes // 在浏览器中注册的MIME类型的数组
  • navigator.onLine // 浏览器是否联网
  • navigator.platform // 浏览器所在的系统平台
  • navigator.plugins // 浏览器中安装的插件信息的数组
  • navigator.product // 产品名称(如Gecko)
  • navigator.productSub // 关于产品的次要信息(如Gecko的版本)
  • navigator.vendor // 浏览器的品牌
  • navigator.vendorSub // 有关供应商的次要信息
  • navigator.registerProtocolHandler() // 针对特定的协议,将一个站点注册为处理程序
  • navigator.oscpu 返回当前操作系统名。
  • navigator.userAgent // 浏览器的用户代理信息

$方法

javaEnabled()  规定浏览器是否支持并启用了 java

taintEnabled()  规定浏览器是否启用数据污点(data tainting)

一、获取浏览器用户代理信息navigator.userAgent

const userAgent = navigator.userAgent;
      console.log(userAgent);
//我这用的谷歌
//Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

二、获取运行浏览器的操作系统或硬件平台navigator.platform

const platform = navigator.platform;
      console.log(platform);
      //Win32

三、 判断浏览器类型

  1. (Opera、Firefox、Chrome、Safari)
let userAgent= navigator.userAgent;//获取
console.log(userAgent);
if (userAgent.indexOf("Opera") > -1) { 
   	// 判断是否是Opera浏览器
   console.log("Opera");
};
if (userAgent.indexOf("Firefox") > -1) { 
    // 判断是否是Firefox浏览器
   console.log("Firefox");
}
if (userAgent.indexOf("Chrome") > -1) { 
    // 判断是否是Chrome浏览器
   console.log("Chrome");
}
if (userAgent.indexOf("Safari") > -1) { 
   	// 判断是否是Safari浏览器
   console.log("Safari");
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) { 
   
   console.log("IE");      // 判断是否是IE浏览器
  1. 判断是Android或者iOS
 if (/(Android)/i.test(navigator.userAgent)) { 
   
    return 'Android'

  } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 
   
    return 'iOS'
  }

  1. 判断是否是微信浏览器
if (/(MQQBrowser)/i.test(navigator.userAgent)) { 
   
    return true

  } else { 
   
    return false

  }
 if (/(micromessenger)/i.test(navigator.userAgent)) { 
   
    return true

  } else { 
   
    return false

  }

四、判断是手机端、平板还是PC

const type = function (){ 
   
    var ua = navigator.userAgent,

    isWindowsPhone = /(?:Windows Phone)/.test(ua),

    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,

    isAndroid = /(?:Android)/.test(ua),

    isFireFox = /(?:Firefox)/.test(ua),

    isChrome = /(?:Chrome|CriOS)/.test(ua),

    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),

    isPhone = /(?:iPhone)/.test(ua) && !isTablet,

    isPc = !isPhone && !isAndroid && !isSymbian;

    return { 
   
        isTablet: isTablet,

        isPhone: isPhone,

        isAndroid: isAndroid,

        isPc: isPc

    };

}();

if (type.isAndroid || type.isPhone) { 
   
  console.log("手机")

} else if (os.isTablet) { 
   
  console.log("平板")

} else if(os.isPc) { 
   
  console.log("电脑")

}

五、 判断手机机型(移动端解决兼容问题常用)

    const type = navigator.userAgent
    const phone = type.indexOf("Android") > -1 || 
                    type.indexOf("Adr") > -1
	console.log(phone)

六、通过屏幕尺寸来进行浏览器类型判断

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

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

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


相关推荐

  • 移动端开发框架

    移动端开发框架总体概述现在比较流行的移动APP开发框架有以下六种:网页、混合、渐进、原生、桥接、自绘。前三种体验与Web的体验相似,后三种与原生APP的体验相似。这六种框架形式,都有自己适用的范围。无所谓好坏,适用就是好。网页应用适用于传统网站APP化,比如淘宝、京东,有大量WEB页面嵌入到APP中。混合应用适用于小成本应用开发,全部代码都基于Web,好处是开发快速、成本低。渐进应用适用于高机会成本的场合,边下载边使用,能快速获取,快速体验。原生应用适用于大型和高体验要求的应用,能做出让人.

    2022年6月24日
    24
  • 安卓应用优化篇

    安卓应用优化篇

    2021年9月1日
    43
  • 图解SM2算法流程——第4章 加密解密[通俗易懂]

    图解SM2算法流程——第4章 加密解密[通俗易懂]A.4第4部分——密钥封装和加解密A.4.1加密(UserA)说明:第3步计算S=[h]PB略,因h=1。A.4.2解密(UserB)说明:第2步计算S=[h]C1略,因h=1。A.4.3原理关键在于说明加密流程第4步计算的[k]PB=(x2,y2)与解密流程第2步计算的[dB]C1=(x2,y2)相等。解密流程第2步计算 …

    2022年10月4日
    3
  • CAN2.0和J1939协议的关系

    CAN2.0和J1939协议的关系转发自http://www.cankau.cn/support/help/can-vs-j1939.html很长时间没搞明白j1939与CAN2.0的关系,这篇文章让我明白了。CAN2.0是一种总线规范,是数据链路层的技术。J1939是SAE(美国汽车协会)定义的基于CAN总线的规范,目的是解决不同发动机厂商、不同ECU厂商的兼容性问题。1、J1939和CAN2.0的关系J1939是在CAN2.0…

    2022年5月18日
    44
  • LaTeX公式自动换行

    LaTeX公式自动换行LaTeX公式自动换行文章目录LaTeX公式自动换行前言一、autobreak宏包二、breqn宏包总结前言在使用amsmath等宏包输入公式的时候,最折腾的就是比较特殊样式的公式和长公式,尤其是长公式在投稿期刊排版的时候经常遇到,有的期刊是双栏的版式,这样公式太大就要面临公式要进行折行的调整,很多时候我们使用align,multiline等环境,现在有个更加灵活的更加自动的宏包来了,可以让长公式自动换行了。一、autobreak宏包\usepackage{amsmath}\usepacka

    2022年6月3日
    201
  • SORT 多目标跟踪算法笔记[通俗易懂]

    SORT 多目标跟踪算法笔记[通俗易懂]sort是一种简单的在线实时多目标跟踪算法。文章要点为:以IoU作为前后帧间目标关系度量指标;利用卡尔曼滤波器预测当前位置;通过匈牙利算法关联检测框到目标;应用试探期甄别虚检;使用FasterR-CNN,证明检测好跟踪可以很简单。技术方案所提方法以检测作为关键组件,传播目标状态到未来帧中,将当前检测与现有目标相关联,并管理跟踪目标的生命周期。Detection为从…

    2025年8月14日
    4

发表回复

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

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