【JavaScript 漫游】【032】Navigator 对象和 Screen对象总结

news2024/11/17 17:32:39

动漫
文章简介

本篇文章为【JavaScript 漫游】专栏的第 032 篇文章,对浏览器模型中 Navigator 对象和 Screen 对象的知识点进行了总结。

Navigator 对象

window.navigator 属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。

Navigator.userAgent

返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息。

Nagigator.plugins

返回一个类似数组的对象,成员是 Plugin 实例对象,表示浏览器安装的插件,比如 Flash、ActiveX 等。

var pluginsLength = navigator.plugins.length;

for (var i = 0; i < pluginsLength; i++) {
  console.log(navigator.plugins[i].name);
  console.log(navigator.plugins[i].filename);
  console.log(navigator.plugins[i].description);
  console.log(navigator.plugins[i].version);
}

Navigator.platform

返回用户的操作系统信息,比如 MacIntelWin32Linux x86_64等。

navigator.platform
// "Linux x86_64"

Navigator.onLine

返回一个布尔值,表示用户当前在线还是离线(浏览器断线)。

navigator.onLine // true

有时,浏览器可以连接局域网,但是局域网不能连通外网。这时,有的浏览器的onLine 属性会返回 true,所以不能假定只要是 true,用户就一定能访问互联网。不过,如果是 false,可以断定用户一定离线。

用户变成在线会触发 online 事件,变成离线会触发 offline 事件,可以通过window.ononlinewindow.onoffline 指定这两个事件的回调函数。

window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });

Navigator.languageNavigator.languages

Navigator.language 属性返回一个字符串,表示浏览器的首选语言。该属性只读。

navigator.language // "en"

Navigator.languages 属性返回一个数组,表示用户可以接受的语言。Navigator.language 总是这个数组的第一个成员。HTTP 请求头信息的 Accept-Language 字段,就来自这个数组。

navigator.languages  // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

如果这个属性发生变化,就会在 window 对象上触发 languagechange 事件。

Navigator.geolocation

Navigator.geolocation 属性返回一个 Geolocation 对象,包含用户地理位置的信息。注意,该 API 只有在 HTTPS 协议下可用,否则调用下面方法时会报错。

Geolocation 对象提供下面三个方法。

  • Geolocation.getCurrentPosition():得到用户的当前位置
  • Geolocation.watchPosition():监听用户位置变化
  • Geolocation.clearWatch():取消 watchPosition() 方法指定的监听函数

注意,调用这三个方法时,浏览器会跳出一个对话框,要求用户给予授权。

Navigator.cookieEnabled

返回一个布尔值,表示浏览器的 Cookie 功能是否打开。

navigator.cookieEnabled // true

注意,这个属性反映的是浏览器总的特性,与是否储存某个具体的网站的 Cookie 无关。用户可以设置某个网站不得储存 Cookie,这时 cookieEnabled 返回的还是 true

Navigator.sendBeacon()

Navigator.sendBeacon() 方法用于向服务器异步发送数据。

Screen 对象

Screen 对象表示当前窗口所在的屏幕,提供显示设备的信息。window.screen 属性指向这个对象。

该对象有下面的属性。

  • Screen.height:浏览器窗口所在的屏幕的高度(单位像素)。除非调整显示器的分辨率,否则这个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率
  • Screen.width:浏览器窗口所在的屏幕的宽度(单位像素)
  • Screen.availHeight:浏览器窗口可用的屏幕高度(单位像素)。因为部分空间可能不可用,比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区,这个属性等于height 减去那些被系统组件的高度
  • Screen.availWidth:浏览器窗口可用的屏幕宽度(单位像素)
  • Screen.pixelDepth:整数,表示屏幕的色彩位数,比如24表示屏幕提供24位色彩
  • Screen.colorDepthScreen.pixelDepth 的别名。严格地说,colorDepth 表示应用程序的颜色深度,pixelDepth 表示屏幕的颜色深度,绝大多数情况下,它们都是同一件事
  • Screen.orientation:返回一个对象,表示屏幕的方向。该对象的 type 属性是一个字符串,表示屏幕的具体方向,landscape-primary 表示横放,landscape-secondary 表示颠倒的横放,portrait-primary 表示竖放,portrait-secondary
window.screen.orientation
// { angle: 0, type: "landscape-primary", onchange: null }
if (window.screen.width >= 1024 && window.screen.height >= 768) {
  // 分辨率不低于 1024x768
}
if ((screen.width <= 800) && (screen.height <= 600)) {
  window.location.replace('small.html');
} else {
  window.location.replace('wide.html');
}

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

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

相关文章

基于LSTM实现春联上联对下联

按照阿光的项目做出了学习笔记&#xff0c;pytorch深度学习实战项目100例 基于LSTM实现春联上联对下联 基于LSTM&#xff08;长短期记忆网络&#xff09;实现春联上联对下联是一种有趣且具有挑战性的任务&#xff0c;它涉及到自然语言处理&#xff08;NLP&#xff09;中的序列…

校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序

项目描述&#xff1a; 校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序 功能介绍&#xff1a; 表白墙 卖舍友 步数旅行 步数排行榜 情侣脸 漫画脸 个人主页 私信 站内消息 今日话题 评论点赞收藏 服务器环境要求&#xff1a;PHP7.0 MySQL5.7 效果…

开启AI绘画新纪元:让创意在指尖绽放

文章目录 一、了解AI绘画的基本原理二、选择合适的AI绘画工具三、掌握AI绘画的基本技巧四、借鉴与创新&#xff1a;从模仿到创作五、参与社区交流&#xff0c;共同成长《AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通》亮点推荐内容简介作者简介目录 在科技日新…

unicloud 项目创建

什么是unicloud uniCloud为每个开发者提供一个免费的服务空间&#xff0c;更低门槛按量付费是serverless的特色&#xff0c;如果没有消耗硬件资源&#xff0c;就完全不用付款serverless比传统的云主机更便宜传统云主机一旦被攻击&#xff0c;高防价格非常昂贵。而uniCloud无需…

深入探索Transformer时代下的NLP革新

《基于GPT-3、ChatGPT、GPT-4等Transformer架构的自然语言处理》主要聚焦于如何使用Python编程语言以及深度学习框架如PyTorch和TensorFlow来构建、训练和调整用于自然语言处理任务的深度神经网络架构&#xff0c;特别是以Transformer为核心模型的架构。 书中详细介绍了Transf…

Windows环境下搭建chatGLM-6B-int4量化版模型(图文详解-成果案例)

目录 一、ChatGLM-6B介绍 二、环境准备 1. 硬件环境 2. TDM-GCC安装 3.git安装 4.Anaconda安装 三、模型安装 1.下载ChatGLM-6b和环境准备 方式一&#xff1a;git命令 方式二&#xff1a;手动下载 2.下载预训练模型 方式一&#xff1a;在Hugging Face HUb下载&…

STM32day2

1.思维导图 个人暂时的学后感&#xff0c;不一定对&#xff0c;没什么东西&#xff0c;为做项目奔波中。。。1.使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度。 while (1){/* USER CODE END WHILE *//* USER CODE BEGIN 3 */adc_val HAL_ADC_GetValue(&a…

中华环保联合会-- 工业废水处理设施等运维服务认证介绍

为适应市场发展需要,规范环境服务业市场&#xff0c;中华环保联合会[中环联兴(北京)认证中心]于2023年8月经国家认证认可监督管理委员会正式批准增加“工业废水处理、城镇污水处理、农村污水处理设施运维服务认证”等认证领域&#xff0c;并完善环保领域服务认证体系。 一、认…

【PowerMockito:编写单元测试过程中原方法使用@Value注解注入的属性出现空指针】

错误场景 执行到Value的属性时会出现空指针&#xff0c;因为Value的属性为null 解决方法 在测试类调用被测试方法前&#xff0c;提前设置属性值&#xff0c;属性可以先自己定义好 ReflectionTestUtils.setField(endpointConnectionService, "exportUdpList", lis…

飞行汽车首飞成功?一文讲解飞行汽车与其代表的立体交通形式

中国的“飞行汽车”从深圳跨越大湾区到珠海首飞成功&#xff0c;既是一次重要尝试&#xff0c;更是交通运输行业发展史中一个全新的起点 关注我&#xff0c;共同交流&#xff0c;一起成长 前言一、基本认识飞行汽车二、发展飞行汽车必要性三、飞行汽车所形成的影响 前言 2月27…

kmc密钥管理的基本功能是什么

KMC(密钥管理中心)在公钥基础设施中占据着举足轻重的地位&#xff0c;它是专门负责为CA(证书授权)系统提供一系列密钥服务的核心组件。这些服务包括但不限于密钥的生成、保存、备份、更新、恢复以及查询等&#xff0c;旨在解决分布式企业应用环境中大规模密码技术应用所带来的密…

44.网络编程/静态库动态库相关知识20240307

一、基于UDP的网络聊天室 项目需求&#xff1a; 如果有用户登录&#xff0c;其他用户可以收到这个人的登录信息如果有人发送信息&#xff0c;其他用户可以收到这个人的群聊信息如果有人下线&#xff0c;其他用户可以收到这个人的下线信息服务器可以发送系统信息。 服务器代码…

CAN总线及通讯的工作原理

一、CAN总线 CAN是控制器局域网络(Controller Area Network)的简称&#xff0c; 它是由研发和生产汽车电子产品著称的德国BOSCH公司开发的&#xff0c; 并最终成为国际标准&#xff08;ISO11519&#xff09;&#xff0c;是国际上应用最广泛的现场总线之一。 二、工作原理 …

智引未来:2024年科技革新引领工业界变革与机遇

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

Sora的“双刃剑”效应:视频生成的革命与就业的反思

在科技的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;如日中天&#xff0c;为众多领域带来了翻天覆地的变革。其中&#xff0c;Sora作为一款基于AI的视频生成工具&#xff0c;凭借其高度逼真的生成能力&#xff0c;引发了社会对…

微信小程序中使用特殊字体

1、首先下载字体文件 推荐几个常用下载字体的网站 https://font.chinaz.com/zhongwenziti.html https://www.hellofont.cn/ 2、转换字体 使用下面这个网站进行字体转换 https://transfonter.org/ 点击add fonts 按钮进行上传刚刚下载的字体文件选择formats格式&#xff1a;可…

VUE_自适应布局-postcss-pxtorem,nuxt页面自适配

postcss-pxtorem是一个PostCSS插件&#xff0c;用于将CSS中的像素值转换为rem单位&#xff0c;以实现响应式布局和适配不同屏幕尺寸的需求。 它的适配原理是将CSS中的像素值除以一个基准值&#xff0c;通常是设计稿的宽度&#xff0c;然后将结果转换为rem单位。这样&#xff0…

如何保证对外接口的安全?

文章目录 前言一、生成及校验Token1.1 生成Token1.2 校验Token1.3 SignUtil 签名工具类 前言 1.什么是安全接口&#xff1f; 通常来说要将暴露在外网的 API 接口视为安全接口&#xff0c;需要实现防篡改和防重放的功能。 1.1 什么是篡改问题&#xff1f; 由于 HTTP 是一种无状…

ThreadLocal :在 Java中隱匿的魔法之力

优质博文&#xff1a;IT-BLOG-CN ThreadLocal 并不是一个Thread&#xff0c;而是 ThreadLocalVariable(线程局部变量)。也许把它命名为 ThreadLocalVar更加合适。线程局部变量就是为每一个使用该变量的线程都提供一个变量值的副本&#xff0c;是 Java中一种较为特殊的线程绑定机…

重建大师在建模过程中,显示中间部分有两个分块建模失败,勾选增强模式重新提交后仍然失败,遇见这种情况该怎么解决?

可以看下失败提示&#xff0c;是不是瓦块太大&#xff0c;显存溢出&#xff1b; 或进行另一种方式&#xff0c;新建一个reconstruction&#xff0c;重新提交这两块尝试一下。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件&#xff0c;输入倾斜照片&a…