js中哪些地方会用到window?

2023-09-19 10:24:16

前言

        Window 对象是JavaScript中的顶层对象,它代表了浏览器中打开的窗口或者标签页。浏览器中打开的每一个窗口/标签页都会有一个对应的 Window 对象。在浏览器中,全局作用域的 this 就是指向 Window 对象。

正文

        在 JavaScript 中,window 对象表示浏览器窗口(通常也称为浏览器窗口或浏览器窗口)。以下是一些在 JavaScript 中经常使用的 window 对象的方法和属性:

1.常见的window用法:

window: 指浏览器打开的那个窗口
window.alert(message):显示一个对话框,其中包含指定的消息。
window.confirm(message):显示一个对话框,其中包含指定的消息,并等待用户点击“确定”或“取消”。
window.prompt(message, default):显示一个对话框,其中包含指定的消息,并等待用户输入一个字符串。如果用户点击“确定”,则返回输入的字符串;如果用户点击“取消”,则返回指定的默认值(如果未指定默认值,则返回 null)。
window.setTimeout(function, delay, ...args):延迟指定的毫秒数后执行函数。
window.setInterval(function, delay, ...args):每隔指定的毫秒数执行一次函数。
window.navigator:表示浏览器的信息,如浏览器名称、版本、插件等。
window.screen:表示屏幕的信息,如屏幕的宽度、高度、可用屏幕大小等。
window.innerHeight:获取浏览器窗口的高度(不包括工具栏和滚动条)。
window.innerWidth:获取浏览器窗口的宽度(不包括工具栏和滚动条)。
window.outerHeight:获取浏览器窗口的高度(包括工具栏和滚动条)。
window.outerWidth:获取浏览器窗口的宽度(包括工具栏和滚动条)。
window.scrollY:获取或设置浏览器窗口的垂直滚动位置。
window.scrollX:获取或设置浏览器窗口的水平滚动位置。
window.scrollTo(x, y):将浏览器窗口的滚动位置设置为指定的坐标。
window.scrollBy(x, y):将浏览器窗口的滚动位置向前移动指定的像素数。
window.scrollIntoView(element):将指定的元素滚动到可视区域内。
window.addEventListener(event, callback):向窗口添加事件。
window.removeEventListener(event, callback):从窗口中移除事件。
window.documnet: 对整个个HTML页面进行增删改查
window.history: 历史记录
window.frames: 返回当前窗口,一个类数组对象,列出了当前窗口的所有直接子窗口
Window.localStorage: 会将键值对数据存储在本地中,浏览器关闭也还是存储,除非手动清除!

window.location:表示当前页面 URL 的对象。可以使用该对象来更改页面 URL。
window.location.reload():重新加载当前页面。
window.location.replace(url):替换当前页面为指定的 URL。
window.location.href:获取当前页面的完整 URL。
window.location.port:这个是判断访问链接中是否带端口
window.location.protocol: 获取当前浏览器链接所使用的协议(如http\https)
window.location.origin:获取 URL 的协议、主机名(域名)和端口号
window.location.host: 返回当前访问链接中的域名 + 端口
window.location.hostname:返回的是访问链接(URL)的主机/域名
window.location.hash: 仅针对于路径中带#,返回#后跟随的锚点或是片段标识符
window.location.pathname: 返回文件地址或者当前访问的路径
window.location.search: 返回当前链接中?后面部分(如:?user=admin&pdw=123456)

2.window和Window的关系:

注:__proto__属性(原型指针) 和 prototype 属性(原型对象)

> window.prototype === window.__proto__     // false
> Window.prototype === window.__proto__     // true
> window.constructor === Window             // true
> window instanceof Window // true
> Window.__proto__.__proto__.__proto__.__proto__ // null

        直白来说,比如我们去吃饭要点菜,Window 类似一个菜单,window 是端上桌子的一道菜,至于这道菜色香味以及制作方法和 Window 无关,只和 window 有关。

3.window 和 this的关系

        this对象是在运行时基于函数的执行环境绑定的:在全局变量中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。不过,匿名函数的执行环境具有全局性,因此this对象通常指向window。但是在通过call()或apply()改变函数执行环境的情况下,this就会指向其他对象。

4.页面中宽高获取

window.innerHeight------浏览器正文可见区域的高度

window.innerWidth------浏览器正文可见区域的宽度

window.document.body.scrollHeight------浏览器所有正文部分的高度(即你一眼看不完的区域的高度和宽度也算在里面)

window.document.body.scrollWidth------浏览器所有正文部分的高度(即你一眼看不完的区域的高度和宽度也算在里面)

window.document.body.clientHeight------网页可见区域高度(包括padding但不包括border、水平滚动条、margin的元素的高度)

window.document.body.clientWidth------网页可见区域宽度 (包括padding但不包括border、水平滚动条、margin的元素的高度)

window.outerHeight------浏览器可见区域(除了正文内容,还有顶部的高度也在内的全部,你整一眼看到的高度)

window.outerWidth------浏览器可见区域(除了正文内容,还有顶部的高度也在内的全部,你整一眼看到的宽度)

注意:在没有滚动条时scrollHeightclientHeight相等恒成立。单位px。如下图

总结

        通过学习我们可以发现,当前环境为全局状态时,window都可以访问!

参考

【1】window属性:menubar_w3cschool

【2】Window.menubar - Web API 接口参考 | MDN

【3】浅谈一下window窗口的各种宽高属性_weixin_33711647的博客-CSDN博客

更多推荐

GDAL库学习

GDAL库学习GDAL是一个操作栅格数据和矢量数据的库,对图像而言,可以进行包括读取、写入、转换、处理各种操作。文章目录GDAL库学习RasterIO()函数1.添加引用2.读取图像3.获取图像基本信息4.保存输出图像5.释放RasterIO()函数RasterIO(GDALRWFlageRWFlag,intnXOff

全网最全知识图谱讲解!

什么是知识图谱知识图谱标准化白皮书定义:知识图谱(KnowledgeGraph)以结构化的形式描述客观世界中概念、实体及其关系,将互联网的信息表达成更接近人类认知世界的形式,提供了一种更好地组织、管理和理解互联网海量信息的能力。简单讲,知识图谱由节点(point)和边(edge)组成,每个节点表示一个实体,实体可以指客

DC电源模块宽电压输入和输出的范围是多少?

BOSHIDADC电源模块宽电压输入和输出的范围是多少?直流电源模块是一种常用的电源设备,可以将交流电转换成稳定的直流电,被广泛应用于各种工业自动化、数字电子、通信设备等领域。在实际使用中,用户需要了解直流电源模块的工作电压范围,以便正确选择和使用。直流电源模块的输入电压范围通常被称为宽电压输入,是指该模块可以接受的输

全栈性能测试工具:RunnerGo

随着自动化测试技术的不断进步,自动化测试已成为企业级应用的重要组成部分。然而,传统的性能测试工具往往复杂、繁琐,让企业陷入了两难的境地。软件测试正逐渐从手动测试向自动化测试转变,各种自动化测试工具和框架层出不穷,极大地提高了测试效率和质量。近年来出现的敏捷开发方法使得软件测试需要更快地跟进开发节奏,不断适应变化。敏捷测

2023年全网最全的软件测试八股文,稳进大厂(含答案)

Part11、你的测试职业发展是什么?测试经验越多,测试能力越高。所以我的职业发展是需要时间积累的,一步步向着高级测试工程师奔去。而且我也有初步的职业规划,前3年积累测试经验,按如何做好测试工程师的要点去要求自己,不断更新自己改正自己,做好测试任务。优势在于我对测试坚定不移的信心和热情,虽然经验还不够,但测试需要的基本

ModStartCMS v7.3.0 富文本MP3支持,后台组件优化

ModStart是一个基于Laravel模块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。系统完全开源,基于Apache2.0开源协议,免费且不限制商业使用。功能特性丰富的模块市场,后台一键快速安装会员模块通用且完整,支持完整的API调用大文件分片上传,进度条显示,已

芯科蓝牙BG27开发笔记8-片上Flash读写

目标熟悉片上Flash的特点,知道如何使用,最好找到示例代码,有完整例程那是最好的查找参考手册除了768K的主空间,还包含:1.USERDATA区域,用户定义数据,可以读写。大小只有1K。2.设备特性和识别信息的DEVINFO空间3.内部生产测试和校准信息的CHIPCONFIG。RAM有两个部分:RAM0:共64K,0

微软(TTS)文本转语音服务API实现

此博客实现与java实现微软文本转语音(TTS)经验总结_javatts_${简简单单}的博客-CSDN博客之上,首先感谢博客源码的提供,本人在上面添加了一些详细的注释,方便大家跟好的理解和使用,毕竟我已经用原文调试了一下午才调通,一些细节的问题给大家标注出来,免得浪费大家的时间,下面直接开始代码吧!首先大家需要去微软

NFTScan 正式上线 TON NFTScan 浏览器!

2023年9月12号,NFTScan团队正式对外发布了TONNFTScan基础设施,将为TON生态的NFT开发者和用户提供简洁高效的NFT数据搜索查询服务。NFTScan作为全球领先的NFT数据基础设施服务商,TON是继Bitcoin、Ethereum、BNBChain、Polygon、Solana、Arbitrum、

删库跑路?掌握rm命令的技巧,高效删除文件和目录!

文章目录前言1.什么是rm命令?简介:认识这位特殊成员,他到底是好还是坏?2.如何使用rm命令?语法和选项:掌握rm命令的技巧和要点3.删除文件使用示例:轻松删除文件,释放磁盘空间4.删除目录使用示例:彻底删除目录及其内容,整理文件系统5.强制删除使用示例:一键强制删除,不再犹豫6.交互式删除使用示例:审慎删除,确保操

安防监控视频AI智能分析网关:人流量统计算法的应用场景汇总

TSINGSEE青犀人流量检测算法是内置在智能分析网关中的一种能够通过AI分析和计算人群数量以及密度的算法技术,在提升城市管理效率、改善用户体验和增加安全性方面发挥着重要作用。人流量检测算法在许多领域都有广泛的应用,如智慧城市、智慧交通、智慧景区等。人流量检测算法在一网统管与智慧城市中,可以用于日常交通管理中,例如实时

热文推荐