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

动漫
文章简介

本篇文章为【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.hqwc.cn/news/520946.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

配置JDK环境变量

一、Window系统安装JDK 下载JDK 首先我们需要下载 java 开发工具包 JDK&#xff0c;下载地址&#xff1a;Java Downloads | Oracle&#xff0c;在下载页面中根据自己的系统选择对应的版本&#xff0c;本文以 Window 64位系统为例&#xff1a; 下载后 JDK 的安装根据提示进行&a…

142.环形链表II

142.环形链表II 力扣题目链接(opens new window) 题意&#xff1a; 给定一个链表&#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 为了表示给定链表中的环&#xff0c;使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;索引从 0…

支持向量机 SVM | 线性可分:软间隔模型

目录 一. 软间隔模型1. 松弛因子的解释小节 2. SVM软间隔模型总结 线性可分SVM中&#xff0c;若想找到分类的超平面&#xff0c;数据必须是线性可分的&#xff1b;但在实际情况中&#xff0c;线性数据集存在少量的异常点&#xff0c;导致SVM无法对数据集线性划分 也就是说&…

Unity3D学习之XLua实践——背包系统

文章目录 1 前言2 新建工程导入必要资源2.1 AB包设置2.2 C# 脚本2.3 VSCode 的环境搭建 3 面板拼凑3.1 主面板拼凑3.2 背包面板拼凑3.3 格子复合组件拼凑3.4 常用类别名准备3.5 数据准备3.5.1 图集准备3.5.2 json3.5.3 打AB包 4 Lua读取json表及准备玩家数据5 主面板逻辑6 背包…

查询IP地址保障电商平台安全

随着电子商务的快速发展&#xff0c;网购已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;网络交易安全一直是人们关注的焦点之一&#xff0c;尤其是在面对日益频发的网络诈骗和欺诈行为时。为了提高网购平台交易的安全性&#xff0c;一种有效的方法是通过查询IP地址…

ETL与抖音数据同步,让数据流动无阻

在当今数字化时代&#xff0c;数据的价值日益凸显&#xff0c;企业需要从各种渠道获取有关用户行为、市场趋势和竞争对手活动的数据。作为一家专注于数据集成和转换的领先平台&#xff0c;ETLCloud为企业提供了强大的数据同步和转换功能。而与此同时&#xff0c;抖音作为一款热…

基于React的低代码开发:探索应用构建的新模式

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-OywB1Epu30PrvOJQ {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

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

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

Spring Boot 生成与解析Jwt

Spring Boot 生成与解析Jwt Maven依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version> </dependency>生成&解析 package yang;import io.jsonwebtoken.Claims…

【计算机视觉】图像轮廓与图像分割修复(凸包、图像的矩、分水岭算法、图像修补)

来源&#xff1a;《OpenCV3编程入门》&#xff0c;怀念毛星云大佬&#x1f56f;️ 说明&#xff1a;本系列重点关注各种图像轮廓与图像分割修复方法的原理、作用 图像轮廓与图像分割修复 虽然Canny之类的边缘检测算法可以根据像素之间的差异&#xff0c;检测出轮廓边界的像素…

神经网络8-注意力机制

注意力机制&#xff08;Attention Mechanism&#xff09;源于对人类视觉的研究。在认知科学中&#xff0c;由于信息处理的瓶颈&#xff0c;人类会选择性地关注所有信息的一部分&#xff0c;同时忽略其他可见的信息。这种机制被称为注意力机制。举个例子来说&#xff0c;当我们观…

VS Code引入ECharts

Charts是一个使用 JavaScript 实现的开源可视化库&#xff0c;涵盖各行业图表&#xff0c;提供了丰富的图表类型和交互能力。&#xff08;摘自菜鸟教程&#xff09; 下面我们来介绍一下VS Code引入ECharts的相关操作 检查电脑是否已经安装了Java语言的软件开发工具包 ECharts…