【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

相关文章

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

破茧 JDBC:MyBatis 在 Spring Boot 中的轻量实践指南

《破茧JDBC:MyBatis在SpringBoot中的轻量实践指南》MyBatis是持久层框架,简化JDBC开发,通过接口+XML/注解实现数据访问,动态代理生成实现类,支持增删改查及参数... 目录一、什么是 MyBATis二、 MyBatis 入门2.1、创建项目2.2、配置数据库连接字符串2.3、入

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因:Dao未注册为Bean,解决:在启... 目录错误描述原因解决方法总结***************************APPLICA编

深度解析Spring Security 中的 SecurityFilterChain核心功能

《深度解析SpringSecurity中的SecurityFilterChain核心功能》SecurityFilterChain通过组件化配置、类型安全路径匹配、多链协同三大特性,重构了Spri... 目录Spring Security 中的SecurityFilterChain深度解析一、Security

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.

Apache Ignite 与 Spring Boot 集成详细指南

《ApacheIgnite与SpringBoot集成详细指南》ApacheIgnite官方指南详解如何通过SpringBootStarter扩展实现自动配置,支持厚/轻客户端模式,简化Ign... 目录 一、背景:为什么需要这个集成? 二、两种集成方式(对应两种客户端模型) 三、方式一:自动配置 Thick

Spring WebClient从入门到精通

《SpringWebClient从入门到精通》本文详解SpringWebClient非阻塞响应式特性及优势,涵盖核心API、实战应用与性能优化,对比RestTemplate,为微服务通信提供高效解决... 目录一、WebClient 概述1.1 为什么选择 WebClient?1.2 WebClient 与

Java.lang.InterruptedException被中止异常的原因及解决方案

《Java.lang.InterruptedException被中止异常的原因及解决方案》Java.lang.InterruptedException是线程被中断时抛出的异常,用于协作停止执行,常见于... 目录报错问题报错原因解决方法Java.lang.InterruptedException 是 Jav

深入浅出SpringBoot WebSocket构建实时应用全面指南

《深入浅出SpringBootWebSocket构建实时应用全面指南》WebSocket是一种在单个TCP连接上进行全双工通信的协议,这篇文章主要为大家详细介绍了SpringBoot如何集成WebS... 目录前言为什么需要 WebSocketWebSocket 是什么Spring Boot 如何简化 We

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd