Skip to content

Window

Window 接口是浏览器中最顶层的全局对象接口,代表一个浏览器窗口或 <iframe>。它继承自 EventTarget

Event

resize

类型:Event

resize 事件在文档视图(窗口)调整大小时触发。

ts
addEventListener("resize", (event) => {});

onresize = (event) => {};

load

load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。

beforeunload

页面即将卸载(关闭)(可弹出确认框)

unload

文档正在卸载(已无法阻止)

pageshow

当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)

属性
BubblesNo
CancelableNo
InterfacePageTransitionEvent
Event handler propertyonpageshow

pagehide

页面进入 bfcache 或卸载

visibilitychange

选项卡可见状态变化(切 Tab/最小化等)

hashchange

URL hash(# 后面)部分变化

popstate

因用户点击后退/前进导致历史记录条目变化

online

当浏览器能够访问网络,且 Navigator.onLine 的值被设为 true 时,Window 接口的 online 事件将被触发。

offline

offline 事件在浏览器失去网络连接时,在 Window 接口上触发。并且 Navigator.onLine 的值变为 false

Properties

属性类型说明
window.documentDocument当前文档对象
window.innerWidth / innerHeightnumber视口宽高,包括滚动条
window.outerWidth / outerHeightnumber浏览器窗口整体宽高,包括边框和工具栏
window.screenScreen屏幕信息,如宽高、色深
window.locationLocation当前 URL 相关信息
window.navigatorNavigator浏览器信息,如 userAgent、平台等
window.localStorage / sessionStorageStorage本地存储与会话存储
window.consoleConsole调试输出

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 对象,当元素的样式更改时,它会自动更新本身