js中哪些地方会用到window?

前言

        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.xdnf.cn/news/142179.html

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

相关文章

Css 美化滚动条

/*设置滚动条宽度为 6px*/ ::-webkit-scrollbar {width: 6px; } /*设置背景颜色,并设置边框倒角,设置滚动动画,0.2 */ ::-webkit-scrollbar-thumb {background-color: #0003;border-radius: 10px;transition: all .2s ease-in-out; } /*设置滚…

【算法分析与设计】算法概述

目录 一、学习要点二、算法的定义三、算法的性质四、程序(Program)五、问题求解(Problem Solving)六、算法的描述七、算法分析的目的八、算法复杂性分析(一)算法时间复杂性分析(二)算法渐近复杂性1、渐进上界记号-大O符号2、渐进下…

Java笔记三

包机制: 为了更好地组织类,Java提供了包机制,用于区别类名的命名空间。 包语句的语法格式为:pack pkg1[. pkg2[. pkg3...]]; 般利用公司域名倒置作为包名;如com.baidu.com,如图 导包: 为了能够…

顺序读写函数的介绍:fscanf fprintf

目录 函数介绍: fprintf: 将结构体变量s的成员列表内容写入文件中: 文件效果:已经进行了格式化,3.140000是最明显的效果,因为float需要补齐0来补充精度 和printf的对比: 不同之处&#xff…

苹果电脑专业的条形码工具iBarcoder:助力高效条形码生成,提升工作效率

iBarcoder for mac是Mac os平台上的一款优秀条码生成软件。它可以帮助用户建立不同类型的条形码,并允许用户设计并打印自己的条码标签,创建条码图形的零售包装、书籍、贴纸等。 在iBarcoder中,用户可以方便地创建专业的条形码标签&#xff0…

Java8实战-总结34

Java8实战-总结34 重构、测试和调试使用 Lambda 重构面向对象的设计模式观察者模式责任链模式 重构、测试和调试 使用 Lambda 重构面向对象的设计模式 观察者模式 观察者模式是一种比较常见的方案,某些事件发生时(比如状态转变)&#xff0…

【excel密码】如何给excel设置带有密码的只读模式

大家提起只读模式,应该都不会联想到密码,想起excel密码可能会想到打开密码或者工作表保护。今天给大家分享如何设置带有密码的只读模式。 打开excel文件,将文件进行【另存为】设置,然后停留在保存路径的界面中,我们点…

笔记2.2:网络应用基本原理

一. 网络应用的体系结构 (1)客户机/服务器结构(Client-Server, C/S) (2)点对点结构(Peer-to-Peer,P2P) (3)混合结构(Hybrid&#x…

js制作柱状图的x轴时间, 分别展示 月/周/日 的数据

背景 有个需求是要做一个柱状图, x 轴是时间, y 轴是数量. 其中 x 轴的时间有三种查看方式: 月份/周/日, 也就是分别查看从当前日期开始倒推的最近每月/每周/每日的数量. 本篇文章主要是用来制作三种不同的 x 轴 从当前月开始倒推月份 注意 getMonth() 函数可以获取当前月份…

【数学建模】2023华为杯研究生数学建模F题思路详解

强对流降水临近预报 我国地域辽阔,自然条件复杂,因此灾害性天气种类繁多,地区差异大。其中,雷雨大风、冰雹、龙卷、短时强降水等强对流天气是造成经济损失、危害生命安全最严重的一类灾害性天气[1]。以2022年为例,我国…

基于C++实现的3D野外赛车驾驶游戏源码+项目文档+汇报PPT

项目介绍:本项目实现了一个户外场景下的赛车游戏,可以通过键盘控制赛车的移动,视角为第二人称视角。场景中有汽车,建筑,道路,天空等物体,拥有光照和阴影的效果。通过粒子系统模拟尾气效果&#…

Spring Boot与Spring Security的跨域解决方案

目录 一、什么是跨域问题 二、Spring Boot和Spring Security介绍 三、如何解决Spring Boot与Spring Security的跨域问题 一、什么是跨域问题 跨域问题(Cross-Origin Resource Sharing,简称CORS)是指在Web开发中,浏览器出于安全…

vue+express、gitee pm2部署轻量服务器

一、代码配置 前后端接口都保持 127.0.0.1:3000 vue创建文件 pm2.config.cjs module.exports = {apps: [{name: xin-web, // 应用程序的名称script: npm, // 启动脚本args: run dev, // 启动脚本的参数cwd: /home/vue/xin_web, // Vite 项目的根目录interpreter: none, // 告…

[动物文学]走红年轻人化身“精神动物”,这届年轻人不想做人了

数据洞察流行趋势,敏锐把握流量风口。本期千瓜与您分享近期小红书八大热点内容,带您看热点、追热门、借热势,为您提供小红书营销布局风向标。 「动物文学」走红 年轻人化身“精神动物” 其实,这届年轻人“不想做人”很久了………

Kubernetes组件和架构简介

目录 一.概念简介 1.含义: 2.主要功能: 3.相关概念: 二.组件和架构介绍 1.master:集群的控制平面,管理集群 2.node:集群的数据平面,为容器提供工作环境 3.kubernetes简单架构图解 一.概…

使用vue-cli脚手架工具搭建vue工程项目以及配置路由

vue-cli是用node编写的命令行工具,我们需要进行全局安装。打开命令行终端,输入如下命令: 1 $ npm install -g vue-cli 这里使用的是npm,为了开发的便利,推荐安装cnpm,这样运行指令会更迅速,安…

描述符——设备描述符

文章目录 描述符定义描述符实现描述符含义 描述符定义 描述符实现 /*** brief Device descriptor.*/ typedef struct __attribute__ ((packed)) {uint8_t bLength ; /**< Size of this descriptor in bytes. */uint8_t bDescriptorType ; /**< DEVICE D…

基于springboot+vue的大学生创新创业系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

Vue组件库Element

目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单…

Chatbot UI集成LocalAI实现自托管的ChatGPT

本文比惯例提前了一天发&#xff0c;因为明天一早&#xff0c;老苏就踏上回乡的路了&#xff0c;三年没回老家&#xff0c;这次专门请了 2 天的假 难得回家&#xff0c;打算多陪陪家人&#xff0c;和多年不见的朋友聚聚&#xff0c;当然如果有网络条件&#xff0c;还是会正常发…