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

2024-03-08 11:44

本文主要是介绍【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');
}

这篇关于【JavaScript 漫游】【032】Navigator 对象和 Screen对象总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/786981

相关文章

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Tomcat版本与Java版本的关系及说明

《Tomcat版本与Java版本的关系及说明》:本文主要介绍Tomcat版本与Java版本的关系及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat版本与Java版本的关系Tomcat历史版本对应的Java版本Tomcat支持哪些版本的pythonJ

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》:本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s