〖大前端 - 基础入门三大核心之JS篇㊼〗- BOM基础之window对象

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker全栈领域优质创作者

  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书


文章目录

  • ⭐ BOM
    • 🌟 window对象
    • 🌟 navigator对象
    • 🌟 history对象
    • 🌟 location对象

⭐ BOM

BOM(Browser Object Model,浏览器对象模型)是JS与浏览器窗口交互的接口

一些与浏览器改变尺寸、滚动条滚动等相关的特效,都需要借助BOM技术

🌟 window对象

window对象是当前JS脚本运行所处的窗口,而这个窗口中包含DOM结构,window.document属性就是document对象

在有标签页功能的浏览器中,每个标签都拥有自己的window对象;也就是说,同一个窗口的标签页之间不会共享一个window对象

全局变量是winddow的属性
示例代码:

var a = 10;
console.log(window.a);  //10

这就意味着,多个js文件之间是共享全局作用域的,即js文件没有作用域隔离功能。全局变量是window属性是js建立的一种的机制,多个js文件可以共同作用这些全局变量,使用起来更加的方便。

内置函数普遍是window的方法

不仅仅是全局变量,内置函数普遍是window的方法。比如alert()、setInterval()等内置函数,普遍是window的方法

示例代码:

console.log(window.alert == alert); //true
console.log(winddow.setInterval == setInterval); //trueconsole.log(window.hasOwnProperty('setInterval'));  //true,hasOwnProperty返回是否具有指定名称的属性/方法window.setInterval(function () {    //可以用window打点调用内置函数console.log('你好')
}, 2000);

window中关于窗口尺寸相关属性

属性意义
windinnerHeight浏览器窗口的内容区域的高度,包含水平滚动条(如果有的话)
innerWidth浏览器窗口的内容区域的宽度,包含垂直滚动条(如果有的话)
outerHeight浏览器窗口的外部高度
outerWidth浏览器窗口的外部宽度

获得不包含滚动条的窗口宽度,要用documnet.documentElement.clientWidth

示例代码:获得窗口的内宽、外宽、不包含滚动条的内宽

console.log("浏览器内宽(包含滚动条):" + window.innerWidth);
console.log("浏览器外宽:" + window.outerWidth);
console.log("浏览器内宽(不包含滚动条):" + document.documentElement.clientWidth);

当浏览器窗口最大化时,浏览器内宽和浏览器外宽值是一样的(都不包含浏览器的边框),当把浏览器窗口缩小,浏览器的外宽就会大一些,因为多了一个浏览器的边框:

当窗口最大化时:

image-20230427142839575

当窗口缩小时:

image-20230427142952341

resize事件

在窗口大小改变之后,就会触发resize事件,可以使用window.onresize或者window.addEventListener(‘resize’)来绑定事件处理函数

示例代码:给窗口改变尺寸添加事件监听

//监听窗口尺寸改变
window.onresize = function () {console.log("浏览器窗口的内高:" + window.innerHeight);console.log("浏览器窗口的外高:" + window.outerHeight);
};

image-20230427144032224

已卷动高度

window.scrollY属性表示在垂直方向已滚动的像素值

document.documentElement.scrollTop属性也表示窗口卷动高度

在实际工作中,考虑到浏览器之间的兼容性,在得到已滚动的像素值时,通常会这么写:

var scrollTop = window.scrollY || document.documentElement.scrollTop;  //当浏览器支持window.scrollY时,就取window.scrollY值,如果不支持,则取document.documentElement.scrollTop值

window.scrollY和document.documentElement.scrollTop区别:

window.scrollY是只读的;document.documentElement.scrollTop不是只读的,我们可以设置这个值来改变浏览去的卷动高度

示例代码:

var scrollTop = window.scrollY || document.documentElement.scrollTop;
console.log("窗口已卷动高度:" + scrollTop);

image-20230427152857044

scroll事件

在窗口被卷动之后,就会触发scroll事件,可以使用window.onscroll或者window.addEventListener(‘scroll’)来绑定事件处理函数

示例代码:

//监听窗口卷动高度
window.onscroll = function () {console.log("窗口卷动了:" + window.scrollY);
};

image-20230427153254269

scroll事件监听在某些特定场景是非常常用的,比如实现H5页面中的落地页等

🌟 navigator对象

navigator:航行者、领航员、驾驶员

window.navigator属性可以检索navigator对象,它内部含有用户此次活动的浏览器的相关属性标识

属性意义
appName浏览器官方名称
appVersion浏览器版本
userAgent浏览器的用户代理(含有内核信息和封装壳信息)
platform用户操作系统

示例代码:

console.log("浏览器品牌:" + navigator.appName);
console.log("浏览器版本:" + navigator.appVersion);
console.log("浏览器用户代理:" + navigator.userAgent);
console.log("浏览器用户操作系统:" + navigator.platform);

image-20230427160225663

🌟 history对象

history:历史

window.history对象提供了操作浏览器会话历史的接口

常用操作就是模拟浏览器回退按钮,尤其在移动端常用

属性意义
history.back()等同于点击浏览器的回退按钮
history.go(-1)等同于history.back()

示例代码:比如从一个列表页点击进入详情页,详情页中有一个“返回列表页”的按钮,点击可直接返回列表页

<!--列表页-->
<body><h1>列表页</h1><div><ul><li><a href="BOM_history_详情页.html">点击查看详情</a></li></ul></div>
</body><!--详情页-->
<body><p>详情页</p><button id="back">返回列表页</button><script>var back = document.getElementById('back');back.onclick = function () {history.back();   //或者history.go(-1)};</script>
</body>

image-20230428095948913

🌟 location对象

location:地址

window.location对象标识了当前所在网址,可以通过给这个属性赋值命令浏览器进行页面跳转

属性/方法意义
window.location赋值网址,可命令浏览器跳转到对应网址,window.location.href也可以实现这样的效果
window.reload(true)重新加载网页

示例代码:页面上新增按钮,分别可以实现跳转到百度、刷新本页面

<body><div><a href="" script="javascript:window.location.reload(true)">刷新页面</a><button id="btn">点我去百度</button></div><script>var btn = document.getElementById('btn');btn.onclick = function () {// window.location = 'https://www.baidu.com';window.location.href = 'https://www.baidu.com';};</script>
</body>

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

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

相关文章

监控WebLogic

1.脚本监控weblogic Linux Shell 脚本监控 WebLogic 的运行状态、健康状态、打开的套接字数 通常情况下&#xff0c;我们不建议在脚本中直接明文写入密码。因为这很容易被他人窃取并滥用。 例如&#xff0c;在终端中使用以下命令设置环境变量&#xff1a; export WEBLOGIC_PAS…

ElasticSearch 谈谈你对段合并的策略思想的认识

段合并是Elasticsearch中的一个重要概念&#xff0c;它在数据索引和查询过程中起着关键的作用。Elasticsearch使用Lucene作为其全文搜索库&#xff0c;Lucene中使用的数据结构就是段&#xff08;Segment&#xff09;合并。 段合并的策略思想主要体现在以下几个方面&#xff1a…

算法工程师-机器学习面试题总结(4)

目录 1.常用的距离衡量公式都有哪些&#xff1f;具体说明它们的计算流程&#xff0c;以及使用场景&#xff1f; 2.介绍一下Kd树&#xff1f;如何建树&#xff0c;以及如何搜索最近节点&#xff1f; 3.简单讲解SVM模型原理&#xff1f; 4.SVM为什么会对缺失值敏感&#xff1f…

【7】PyQt布局layout

目录 1. 布局简介 2. 水平布局QHBoxLayout 3. 竖直布局QVBoxLayout 4. 表单布局QFormLayout 5. 布局嵌套 1. 布局简介 一个pyqt窗口中可以有多个控件。所谓布局,指的就是多个控件在窗口中的展示方式 布局方式大致分为: 水平布局竖直布局网格布局表单布局 2. 水平布局Q…

OpenCV-python下载安装和基本操作

文章目录 一、实验目的二、实验内容三、实验过程OpenCV-python的安装与配置python下载和环境配置PIP镜像安装Numpy安装openCV-python检验opencv安装是否成功 openCV-python的基本操作图像输入和展示以及写出openCV界面编程单窗口显示多图片鼠标事件键盘事件滑动条事件 四、实验…

51单片机程序

利用动态扫描和定时器1在数码管上显示出从765432开始以1/10秒的速度往下递减直至765398并保持显示此数&#xff0c;与此同时利用定时器O以500MS速度进行流水灯从土至下移动,当数码管上数减到停止时&#xff0c;实验板上流水灯也停止然后全部开始闪烁&#xff0c;3秒后&#xff…

【Gradle】mac环境安装Gradle及配置

官网安装说明&#xff1a;Gradle | Installation 由于Gradle运行依赖jvm&#xff0c;所以事先需要安装jdk&#xff0c;并确认你的jdk版本和gradle版本要求的对应关系&#xff0c;这个官网上有说明&#xff0c;但是我试了一下不太准确&#xff0c;供参考&#xff0c;链接如下&a…

鸿蒙一出,android开发处境再受重创

华为宣布其自研操作系统鸿蒙HarmonyOSNEXT开发者预览版将不再兼容安卓系统&#xff0c;这一消息引起了广泛关注和热议。这一决策标志着华为正式告别安卓&#xff0c;摆脱了外部的制约&#xff0c;开始着手打造一个全新的生态系统。 鸿蒙系统4发布一个月&#xff0c;截至目前&a…

Apache Flink(七):Apache Flink快速入门 - DataStream BATCH模式

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 下面使用Java代码使用DataStream…

介绍 Apache Spark 的基本概念和在大数据分析中的应用。

Apache Spark 是由 Apache 软件基金会开发的开源框架&#xff0c;帮助在多台计算机上以分布式方式执行计算任务。Spark 提供了一种高度可扩展的计算模型&#xff0c;能够快速地在大规模数据集上进行数据处理和分析。 Spark 有以下几个核心概念&#xff1a; RDD&#xff08;Res…

Apache Ofbiz XML-RPC RCE漏洞复现(CVE-2023-49070)

0x01 产品简介 Apache OFBiz是一个开源的企业资源规划(ERP)系统,提供了多种商业功能和模块。 0x02 漏洞概述 漏洞成因 2020年,为修复 CVE-2020-9496 增加权限校验,存在绕过。2021年,增加 Filter 用于拦截 XML-RPC 中的恶意请求,存在绕过。2023年四月,彻底删除 xmlrp…

链路追踪详解(三):分布式链路追踪标准的演进

目录 Google Dapper Twitter Zipkin Uber Jaeger OpenTracing 和 OpenCensus OpenTelemetry 小结 分布式链路追踪是现代云计算和微服务架构中一个关键技术&#xff0c;可以让开发者和运维团队理解和监控服务请求在复杂系统中的完整流转路径。分布式链路追踪技术的发展经历…

C/C++,数值计算——快速幂(Quick Pow)的几种算法源代码

1 文本格式 // C Version long long binpow(long long a, long long b) { if (b 0) return 1; long long res binpow(a, b / 2); if (b % 2) return res * res * a; else return res * res; } // C Version long long binpow(long long a,…

10.Java程序设计-基于SSM框架的微信小程序家教信息管理系统的设计与实现

摘要是论文的开篇&#xff0c;用于简要概述研究的目的、方法、主要结果和结论。以下是一个简化的摘要示例&#xff0c;你可以根据实际情况进行修改和扩展&#xff1a; 摘要 随着社会的发展和教育需求的增长&#xff0c;家教服务作为一种个性化的学习方式受到了广泛关注。为了更…

nodejs微信小程序+python+PHP新闻发布系统的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

短视频购物系统源码:构建创新购物体验的技术深度解析

短视频购物系统作为电商领域的新宠&#xff0c;其背后的源码实现是其成功的关键。本文将深入探讨短视频购物系统的核心技术和源码设计&#xff0c;以揭示其如何构建创新购物体验的技术奥秘。 1. 技术架构与框架选择 短视频购物系统的源码首先考虑的是其技术架构。常见的选择…

近期复习三

目录 nginx.conf文件介绍 一.文件共享功能 1.清空html目录下文件并新建你要共享的文件 2.修改nginx.conf文件&#xff0c;开启autoindex功能 3.测试 二.状态模块 1.修改nginx.conf文件 2.测试 &#xff08;1&#xff09;使用刚才定义的IP/nginx_status进行访问 &#…

TypeScript中的单件设计模式

基本概念 &#xff08;1&#xff09; 了解设计模式 设计模式通俗的讲&#xff0c;就是一种更好的编写代码方案&#xff0c;打个比喻&#xff1a;从上海到武汉&#xff0c;你可以选择做飞机&#xff0c;做轮船&#xff0c;开车&#xff0c;骑摩托车多种方式&#xff0c;把出行…

Caché/M 数据库系统 InterSystems IRIS 的 Windows 安装

针对 InterSystems IRIS 数据库的一些基本概念。 InterSystems IRIS 是什么 InterSystems IRIS 是基于 Cach/M 语言开发的一个数据库&#xff0c;这个数据库被大量使用在医疗系统中&#xff0c;也是北美地区医疗系统病历和文件管理中默认使用的事实标准。 Cach/M 是什么 Ca…

德迅猎鹰(云蜜罐)有什么用

蜜罐&#xff08;Honeypot&#xff09;是一种安全技术&#xff0c;用于吸引和欺骗攻击者&#xff0c;以便收集关于攻击行为的信息和情报。它模拟了一个脆弱的系统、服务或网络资源&#xff0c;看起来对攻击者具有吸引力&#xff0c;但实际上是为了引诱攻击者暴露其攻击手法和意…