js中哪些地方会用到window?

news2024/11/23 10:40:59

前言

        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博客

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

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

相关文章

《Python趣味工具》——自制emoji3

今日目标 在上次,我们绘制了静态的emoji图。并且总结了turtle中的常用函数。 本次我们将尝试制作一个动态的emoji,让你的表情包动起来! 文章目录 一、动画原理:二、制作动画:1. 修改eyes_black()函数:2. 绘…

构建可维护的大规模应用:框架架构的最佳实践

文章目录 框架架构的重要性最佳实践1. 模块化设计2. 遵循SOLID原则3. 使用设计模式4. 异常处理5. 代码注释和文档6. 测试 Spring Boot 和 Django:关键框架示例Spring Boot(Java)模块化设计:SOLID原则:设计模式&#xf…

分类散点图 stripplot() 加辅助线axhline() 多图合一

分类散点图 stripplot 加辅助线axhline 多图合一 效果图代码 画图没有什么可说的,直接上图 效果图 代码 # 绘制图, 查看是否数值在阈值上 plt.figure(figsize(30, 18)) n 0 for header, value_list in info_dict.items():ref_value_list ref_info_dic…

three.js——通过顶点和顶点索引创建集合体

通过顶点和顶点索引创建集合体 效果图1、创建顶点数据2、创建顶点属性3、创建材质4、创建网格5、改变网格的位置并添加到场景中6、通过顶点索引创建几何图形 效果图 1、创建顶点数据 // 创建顶点数据 每三个一个顶点 逆时针为正面 const vertices new Float32Array([ -1.0, -…

uTool快捷指令

send("************"); quickcommand.sleep(200); keyTap("enter");

关于微信小程序rich-text中图片宽度超出范围解决办法

问题描述:写一个富文本展示页面时发现一个问题,就是图片宽度超出范围,本能反应是给图片设置一个最大宽度,这里发现不可行。然后又使用正则追加样式还是不行。 // 使用正则提取html里面的图片设置图片最大宽度为100% res[1].data[0…

netty-HashedWheelTimer源码解析

一、案例分析 public void testExecutionOnTaskExecutor() throws InterruptedException {int timeout 10;final CountDownLatch latch new CountDownLatch(1);final CountDownLatch timeoutLatch new CountDownLatch(1);Executor executor new Executor() {Overridepublic…

用纯html写个个人简历!模版分享啦!!!

用纯html写个个人简历!首先得先找个模板! 一个优秀模板所应该具有的素质? 简单? 仅仅一个html页面,完全没有乱七八糟,保证学的明明白白。 漂亮? 该有的内容一个不少! 个人照片&a…

零基础Linux_6(开发工具_下)函数库链接+Makefile+实现进度条+Git

目录 1. 函数库(链接) 1.1 链接 1.2 动态库与静态库 2. makefile 2.1 项目构建 2.2 Makefile的概念 2.3 Makefile的编写 2.4 .PHONY定义伪目标 ACM 时间 3.实现进度条(缓冲区) 3.1 缓冲区的概念 3.2 实现一个简易 &q…

全网最详细的OSPF原理总结,看这篇就够了!

大家好,我的网工朋友。 OSPF是一种基于链路状态的路由协议,也是专为 IP 开发的路由协议,直接运行在 IP 层上面。它从设计上保证了无路由环路。除此之外,IS-IS也是很常见的链路状态协议。 为什么会出现OSPF? 作为目前…

欧拉操作系统在线安装mysql8数据库并用navicat premium远程连接

网上太多安装教程,但是没有一个教程能够一站式解决安装问题,而我不一样,我写的每一个博客,都是我自己试验过很多次,能够确保一站式解决,才会发上去,希望能够帮助到大家 第一步:升级…

Linux工具(一)

前言:Linux是一个开源的操作系统,它拥有庞大而活跃的开发社区,为用户提供了丰富多样的工具和应用程序。这些工具不仅适用于系统管理员和开发人员,也适用于普通用户,可以帮助他们完成各种任务,从简单的文件管…

爬虫 — Scrapy 框架安装问题

整理几个关于安装 Scrapy 框架时会遇到的问题及解决方法。 1、 pip install typing-extensions4.3.0 -i https://pypi.douban.com/simple 2、 pip install pyOpenSSL22.0 -i https://pypi.douban.com/simple 3、 pip install cryptography36.0.2 -i https://pypi.douban.com/s…

基于GBDT+Tkinter+穷举法按排队时间预测最优路径的智能导航推荐系统——机器学习算法应用(含Python工程源码)+数据集(四)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境Pycharm 环境Scikit-learnt 模块实现1. 数据预处理2. 客流预测3. 百度地图API调用4. GUI界面设计5. 路径规划6. 智能推荐 系统测试1. 训练准确率2. 测试效果3. 程序应用 相关其它博客工程源代码下载其它资料下载 …

如何在云服务器上成功安装MongoDB数据库并用Python连接(问题及解决方法)

最近购买了1台腾讯云轻量服务器做测试,想在上面安装MongoDB数据库。但安装过程并不顺利,遇到了几个问题。本文记录一下安装过程及遇到的问题和解决方法。 一、软件下载地址: 1.直接打开MongoDB官网:https://www.mongodb.com/ …

2023 Google 开发者大会:助力传承和弘扬传统文化

文章目录 前言一、关于 Google 开发者大会1.1、什么是 Google 开发者大会?1.2、CSDN 上线 2023 Google 开发者大会专题页 二、敦煌深厚的艺术沉淀2.1、“云想衣裳花想容”?2.2、“大漠孤烟直,长河落日圆” 三、传统文化赋予现代艺术设计灵感四…

1.IAR-8051安装

新版安装教程:IAR EW for 8051 简介与安装 新版软件zhuce:IAR EW for 8051 软件注册 - 知乎 这个新版的我也放到网盘里面了,自己自行选择安装 一、下载IAR-8051 链接:https://pan.baidu.com/s/1mYwSQvSjAiSzltrEbK3yAw?pwd43cd …

IPV4和IPV6,公网IP和私有IP有什么区别?

文章目录 1、什么是IP地址?1.1、背景1.2、交换机1.3、局域网1.4、广域网1.5、ISP 互联网服务提供商 2、IPV42.1、什么是IPV4?2.2、IPV4的组成2.3、NAT 网络地址转换2.4、端口映射 3、公网IP和私有IP4、IPV6 1、什么是IP地址? 1.1、背景 一台…

接口调用三种方式

创建服务端 一个controller,一个启动类,配置端口 controller import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;RestController public class ServerController {Req…

uniapp开发h5 遇到一个刻度尺的需求 实现记录

先上最终实现图 实现这个功能使用的是github上找的一个库 叫slide-ruler 地址 实现思路: 第一步:在终端npm 下载这个依赖 第二步:新建一个刻度尺自定义组件,如果不是自定义组件会不生效,并且这个自定义组件里面放一…