js的window对象简单看 [ Luat doc 社区文章静态页面 ]

Window 对象

概念

window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

window对象集合

frames[] 返回窗口中所有命名的框架

生命周期

DOMContentLoaded 浏览器完成HTML的加载, 并构建DOM树, 图片和样式等外部资源还没加载完成
load 浏览器加载完所有资源, 包括HTML文档, 图片, 样式等
beforeunload 用户即将离开, 用来检查用户是否保存了修改, 并询问是否真的要离开
unload 用户几乎已经离开, 但是可以启动一些操作, 比如发送统计数据

常用属性

属性	用法
document	对document的只读引用
history	对 History 对象的只读引用
Screen	对 Screen 对象的只读引用
innerheight	返回窗口的文档显示区的高度
innerwidth	返回窗口的文档显示区的宽度
location	用于窗口或框架的 Location 对象
top	返回最顶层的先辈窗口，window

……

常用方法

方法	描述
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
alert()	显示带有一段消息和一个确认按钮的警告框。
scrollTo()	把内容滚动到指定的坐标。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
prompt()	显示可提示用户输入的对话框。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
……

常见应用

全局作用域

由于 window 是全局对象，因此所有的全局变量都会被被解析为该对象的属性。

1 2	var a = 100 console.log(window.a) // 100

我们也可将一些内部作用域的变量或数据挂载到window上，实现变量提升

function fn(){
    var a = 1
    window.a = a
}
fn()
console.log(window.a)    // 1

定时器

下面是一段获取手机验证码的函数代码

getVcode() {
  const { mobile, dispatch } = this.props
  const { vTime, vTimer, mobileReg } = this.state
  let time = vTime
  /* if (!mobile || !mobileReg.test(mobile)) return message.error("请正确填写手机号") */
  if (vTimer) return false
  this.setState({ vTimer: true, vText: `重新获取(${time}s)` })
 /* dispatch({
    type: "user/fetch_get_captcha",
    payload: { phone: mobile }
  }) */
  let timer = setInterval(() => {
    time--
    if (time === 0) {
      clearTimeout(timer)
      timer = null
      this.setState({ vTimer: false, vText: "获取验证码" })
      return
    }
    this.setState({ vText: `重新获取(${time}s)` })
  }, 1000)
  this.setState({ timer })
}

页面滑动

doc社区页点击评论定位到编辑器位置

提示页面退出

文章发布页退出页面的未保存提示

……