Window
Window 接口是浏览器中最顶层的全局对象接口,代表一个浏览器窗口或 <iframe>。它继承自 EventTarget
Event
resize
类型:Event
resize 事件在文档视图(窗口)调整大小时触发。
ts
addEventListener("resize", (event) => {});
onresize = (event) => {};load
load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。
beforeunload
页面即将卸载(关闭)(可弹出确认框)
unload
文档正在卸载(已无法阻止)
pageshow
当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)
| 属性 | 值 |
|---|---|
| Bubbles | No |
| Cancelable | No |
| Interface | PageTransitionEvent |
| Event handler property | onpageshow |
pagehide
页面进入 bfcache 或卸载
visibilitychange
选项卡可见状态变化(切 Tab/最小化等)
hashchange
URL hash(# 后面)部分变化
popstate
因用户点击后退/前进导致历史记录条目变化
online
当浏览器能够访问网络,且 Navigator.onLine 的值被设为 true 时,Window 接口的 online 事件将被触发。
offline
offline 事件在浏览器失去网络连接时,在 Window 接口上触发。并且 Navigator.onLine 的值变为 false。
Properties
| 属性 | 类型 | 说明 |
|---|---|---|
window.document | Document | 当前文档对象 |
window.innerWidth / innerHeight | number | 视口宽高,包括滚动条 |
window.outerWidth / outerHeight | number | 浏览器窗口整体宽高,包括边框和工具栏 |
window.screen | Screen | 屏幕信息,如宽高、色深 |
window.location | Location | 当前 URL 相关信息 |
window.navigator | Navigator | 浏览器信息,如 userAgent、平台等 |
window.localStorage / sessionStorage | Storage | 本地存储与会话存储 |
window.console | Console | 调试输出 |
history
类型:History
历史记录控制,如 back() / forward()
location
类型:Location
Window.location 只读属性返回一个 Location 对象,其中包含有关文档当前位置的信息。
Methods
| 方法 | 说明 |
|---|---|
alert(message) | 弹出提示框 |
confirm(message) | 弹出确认框 |
prompt(message, default) | 弹出输入框 |
open(url, name, specs) | 打开新窗口 |
close() | 关闭当前窗口(脚本打开的) |
setTimeout(fn, ms) / setInterval(fn, ms) | 定时器 |
clearTimeout(id) / clearInterval(id) | 清除定时器 |
requestAnimationFrame(fn) | 下一帧执行回调,用于动画 |
scrollTo(x, y) / scrollBy(dx, dy) | 滚动窗口 |
getComputedStyle
用来获取元素最终生效后的样式(包含 CSS、继承、计算值)
ts
getComputedStyle(element)- element:用于获取计算样式的
Element - Return:返回的
style是一个实时的CSSStyleDeclaration对象,当元素的样式更改时,它会自动更新本身
