浏览器中BOM(浏览器对象模型)对象Navigator和Screen的简单了解

简介: 本文为 系列文章 ,之后会讲解所有的BOM中重要的对象如何使用,感兴趣的小伙伴可以持续关注一下~想必大家很奇怪,为什么本文是简单了解。其实BOM虽然提供了很多对象供我们去使用,但是有些对象其实是不那么重要的,例如本文要讲的两个对象——Navigator和Screen。所以大家只需要看一看,了解一下有这样的属性和用法就可以啦

Navigator对象


Navigator对象主要是用来帮助我们获取浏览器的一些信息的,例如浏览器的名称 、浏览器编译版本 、浏览器的语言 、浏览器使用的插件信息…… 并且该对象被所有支持javascript语言的浏览器支持,每个浏览器中的navigator对象都有一套自己的属性,所以我们就来列举一些大多数浏览器都通用的Navigator对象的属性吧


属性 描述
appName 完整的浏览器名称
appVersion 浏览器的版本
userAgent 浏览器的用户代理字符串
platform 浏览器所在的系统平台
cookieEnabled 表示cookie是否被启用
plugins 浏览器中所安装的插件信息数组

这里我就直接放上图给大家看,大家也可以自己用浏览器去进行尝试


d6199dcc574f80f7fd831cb08aef513e.png


Screen对象


该对象可以获取浏览器窗口外部显示器的信息,例如像素宽度和高度之类的。那因为每个浏览器的Screen对象都有他们各自支持和不支持的属性,那我在这里就列举所有浏览器的支持的属性给大家,如果有想深入研究的可以去搜索更多的属性,以及他们的版本支持


属性 描述
availHeight 屏幕的像素高度减系统部件的高度之后的值(只读)
availWidth 屏幕的像素宽度减系统部件的宽度之后的值(只读)
colorDepth 用于表示颜色的位数(只读)
height 屏幕的像素高度
width 屏幕的像素宽度


这里讲解一下 availHeight 和 height 的区别,前者是不把系统的任务栏的高度算在内的;后者是屏幕的高度。


这个就是系统的任务栏


16c2da689594d130353ee8ab1fda0f5c.png


结束语


好了,这两个简单的对象就了解到这里。虽然这两个对象很简单,但是还希望大家将一些别的核心的对象给了解透彻。


本系列文章之后会写到的核心对象还有window对象location对象history对象,欢迎大家持续关注。

相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
148 2
|
2月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
23 2
|
3月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
4月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
55 1
|
4月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
52 1
|
4月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
85 0
|
4月前
|
JavaScript UED
js之探索浏览器对象模型
js之探索浏览器对象模型
55 0
|
5月前
|
存储 JSON JavaScript
数据库操作对象 db,用于与浏览器的 localStorage 交互
数据库操作对象 db,用于与浏览器的 localStorage 交互
42 0
|
26天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式