JS对不同浏览器的检测问题

news2024/12/23 21:05:02

Navigator对象也称浏览器对象,该对象包含了浏览器的整体信息,如浏览器名称,版本号等。Navigator对象由Navigator浏览器率先使用,后来各方浏览器都开始支持Navigator对象,逐步成为一种标准。

一、Navigator对象的属性

以大多数浏览器都支持的版本为例,其属性有如下:

属性

说明

appName

返回浏览器的名称

appVersion

返回浏览器的版本号

userAgent

返回浏览器用于HTTP请求的用户代理头的值

appCodeName

返回浏览器的代码名

platform

返回运行浏览器的操作系统或硬件平台

例如,使用Navigator对象将浏览器的名称和版本号等打印出来。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body bgcolor="#ffffff" onLoad="whatBrowser()">

<SCRIPT>

<!-- Begin

function whatBrowser() {

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

}

</SCRIPT>

<FORM NAME="Browser">

你的浏览器名称: <INPUT TYPE="txt" NAME="Name" Size="45"><br />

你的浏览器信息: <INPUT TYPE="txt" NAME="Version" Size="45"><br />

你的浏览器密码信息:<INPUT TYPE="txt" NAME="Code" Size="45"><br />

使用信息: <INPUT TYPE="txt" NAME="Agent" Size="45"><br />

</FORM>

</body>

</html>

运行后,显示的结果为:

二、浏览器对象的子对象

Navigator对象的mimeTypes属性返回的是包含mimeType对象的数组,plugins属性返回的是包含Plugin对象的数组。因此,mimeType对象和Plugin对象是Navigator对象的子对象。

(一) mimeType对象

mimeType对象所代表的浏览器支持MIME类型数据格式,如属性如下:

属性

说明

description

返回对mimeType对象描述

enabledPlugin

返回一个数组,数组中的元素为Plugincf对象,该数组用于那些有插件支持的数据格式,如果没有,则返回null

suffixes

返回MIME类型文件的扩展名,如果有多个扩展名,则用逗号隔开

type

返回MIME类型的名称,该名称是唯一个可以用来描述当前MIME类型的字符串

由于Navigator对象的mimeTypes属性返回值是一个数组,因此,可以使用以下代码得到mimeType对象。

navigator.mimeTypes[i]

navigator.mimeTypes[“typename”]

(二)Plugin对象

Plugin对象用来描述浏览器所安装的插件,可以通过如下语句来获得:

navigator.plugins[i]

navigator. plugins[“typename”]

Plugin对象的属性如下:

属性

说明

description

插件的说明,由插件的创建者提供,用于说明插件的功能、厂商信息和版本信息等

filename

插件程序的文件名,不同的操作系统下,文件可能不同

length

插件所支持的MIME数组格式的个数,即该插件支持多少种数据格式

name

插件的名称

三、检测浏览器是否支持某些特性

要检测某些函数和属性在当前浏览器上是否存在,最简单的方法是使用typeof操作符。

例如,检测当前浏览器是否支持XMLHttpRequest类,代码如下:

var xmiExiests=typeof XMLHttpRequest;

如果返回的是undefined,则表示当前浏览器不支持XMLHttpRequest类。

四、检测当前浏览器是处于标准模式还是Qurks模式

通过读取document.compatMode属性,可以确定浏览器在处理文档时使用的是标准模式还是Quirks模式,可以用以下代码进行检测。

function QuirksMode(){

    if(typeof document.compatMode!=”undefined” && CSS.Compat/.text(doucment.compatMode)){

}

     return true;

}

如果文档使用Quirks模式渲染的,那么将返回True,否则将返回false。至于使用哪种模式,也会在DOCTYPE声明中体现出来,没有DOCTYPE的HTML文档,将自动按照Quirks模式进行处理。但是,有DOCTYPE声明并不意味着文档一定按Quirks模式渲染,它还与CSS规则有关,因此需要在CSS进行适当的处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2172940.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

检查索引对象中是否存在缺失值pandas.Index.hasnans

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 检查索引对象中是否存在缺失值 pandas.Index.hasnans [太阳]选择题 题目代码中执行结果是&#xff1f; import pandas as pd import numpy as np idx1 pd.Index([1, 2, np.nan, 4]) print…

破局证券公司结算业务系统信创国产化建设难点,探索实现路径与策略

数字化和国产化是金融IT行业目前的两大趋势。在金融行业&#xff0c;除了数字化以外&#xff0c;国产化也是核心趋势。信创建设从政府办公电脑开始&#xff0c;目的是借助政府的力量培养自主可控生态&#xff0c;而真正的繁荣还要靠行业大客户的支持&#xff0c;其中金融行业是…

spring揭秘24-springmvc02-5个重要组件

文章目录 【README】【1】HanderMapping-处理器映射容器【1.1】HanderMapping实现类【1.1.1】SimpleUrlHandlerMapping 【2】Controller&#xff08;二级控制器&#xff09;【2.1】AbstractController抽象控制器&#xff08;控制器基类&#xff09; 【3】ModelAndView(模型与视…

【x**3专享#2】编译 uboot 和 kernel 的文件结构

虚拟机交叉编译环境配置及内核编译步骤说明书 请先查看前篇文章内容 1. 获取虚拟机 IP 地址 打开虚拟机终端&#xff0c;执行以下命令查看虚拟机 IP 地址&#xff1a;ifconfig或者ip addr记录 eth0 或 ens33 等网络接口的 inet 后面的 IP 地址 2. 使用 Xftp 连接虚拟机 打开…

【C++拓展(四)】秋招建议与心得

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; C拓展 1. 前言2. 今年秋招形势到底如何?3. 学历…

基于微信小程序的旅游助手的设计与实现(源码+定制+文档讲解)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

【hot100-java】【零钱兑换】

R9-dp篇 class Solution {public int coinChange(int[] coins, int amount) {int ncoins.length;int [][] fnew int[n1][amount1];//除2防止下面1溢出Arrays.fill(f[0],Integer.MAX_VALUE/2);f[0][0]0;for (int i0;i<n;i){for (int c0;c<amount;c){if(c<coins[i]) f[i…

webpack打包Vue项目【完整版】

文章目录 前言Vue 相关包&#xff1a;项目搭建1. 初始化项目2. 安装 Vue 和 Webpack3. 创建目录结构4. 创建文件项目5. 配置 Webpack6. 配置 Babel7. package.json8. 打包和运行 前言 基于 上一篇 webpack 的配置详解 &#xff0c;我们已经知道了 webpack 在项目中的常用的配置…

IP地址与智能家居能够碰撞出什么样的火花呢?

感应灯、远程遥控空调&#xff0c;自动感应窗帘——智能家居已经在正逐步走入我们的生活&#xff0c;为我们带来前所未有的便捷与舒适体验。而在这一进程中&#xff0c;IP地址又能够与智能家居碰撞出什么样的火花呢&#xff1f; 一、IP地址&#xff1a;智能家居的连接基石 智…

SOLIDWORKS 2025新版本揭秘 | 设计、协作和数据管理篇

除非另有说明&#xff0c;否则所有增强功能均适用于 3DEXPERIENCE SOLIDWORKS 和 SOLIDWORKS Cloud Services。 1&#xff5c;更髙效的协作和数据管理 直接从 SOLIDWORKS 访问社区&#xff0c;轻松与业界同行建立联系并开展协作。 利用实时通知时刻关注蕞新动态&#xff0c;…

基于Hive和Hadoop的图书分析系统

本项目是一个基于大数据技术的图书分析系统&#xff0c;旨在为用户提供全面的图书信息和深入的图书销售及阅读行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以…

腾讯云SDK产品功能

本文主要介绍音视频终端 SDK&#xff08;腾讯云视立方&#xff09;的核心功能。 直播推流 音视频终端 SDK&#xff08;腾讯云视立方&#xff09;为终端直播场景提供强大的 RTMP、RTC 推流能力&#xff0c;配合云直播&#xff08;CSS&#xff09;全球布局的2000节点&#xff0…

山丹县综能智慧新能源:“智能二维码”,推动班组管理信息化

近日&#xff0c;为了提升管理效率&#xff0c;国电投建业光伏电站将二维码引入设备巡视和班组建设中。 首先&#xff0c;使用传统纸质巡视作业卡&#xff0c;巡视工作强度大&#xff0c;容易出现错误&#xff1b;此外&#xff0c;“三会一活动”和培训记录等班组建设过程材料…

DCDC电源PCB设计

环路 高频电流环路面积越小越好&#xff1a; 电感所在的支路不属于高频电流环路 对于BUCK电路&#xff0c;电容Ci的越靠近芯片Vi引脚越好&#xff0c;D1越靠近SW引脚越好&#xff0c;同时另一端越靠近芯片GND引脚越好&#xff1a; 示例&#xff1a; 然后是布局输出&#…

一次性使用唾液采集器:唾液样本常温收集保存及运输的较佳选择工具!

一次性使用唾液采集器确实是进行唾液样本常温收集、保存及运输的较佳选择工具之一&#xff0c;尤其适用于需要非侵入性、便捷且成本效益高的样本采集场景&#xff0c;如基因检测、药物监测、疾病筛查等领域。以下是其作为较佳选择的几个主要原因&#xff1a; 非侵入性采集&…

Linux安装tomcat及配置环境变量超详细教程

微服务Linux解析部署使用全流程 linux系统的常用命令 Linux安装vim超详细教程 Linux安装JDK及配置环境变量超详细教程 1、上传压缩包 统一创建目录&#xff1a;/usr/local/tomcat&#xff0c;将压缩包上传到这个目录下。拖动文件到这个目录下即可。 2、执行解压命令 先进…

ESP01S连接新版OneNET物联网平台

ESP01S连接OneNET ESP01S模块连接新板OneNET物联网平台OneNET创建产品创建设备创建物模型 ESP01S1、烧录MQTT固件2、发送AT指令连接到OneNET1、AT2、ATCWMODE13、ATCWDHCP1,14、ATCWJAP"WIFI名称","WIFI密码"5、ATMQTTUSERCFG0,1,"设备名称",&qu…

18.Linux-配置DNF仓库

DNF仓库产生背景 在现实的场景中&#xff0c;我们经常要安装一些软件包&#xff0c;但由于现场不提供网络。 需要使用光盘或文件下载的方式去安装。 对于linux有两种离线安装方式&#xff1a;二进制文件安装和源码安装 其中二进制文件是比较简单的安装方式&#xff0c;不同的l…

【IAPP源码】仿奇异社区UI

【IAPP源码】仿奇异社区UI 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89801612 更多资源下载&#xff1a;关注我。

【Linux网络】详解TCP协议(2)

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux网络 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 TCP协议的三次握手和四次挥手 的相关内容。 如果看到最后您觉得…