• 欢迎大家分享资料!前往留言板评论即可!

js的window对象简单看

合宙 模组资料网 2年前 (2021-05-15) 293次浏览 0个评论 扫描二维码
文章目录[隐藏]

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 是全局对象,因此所有的全局变量都会被被解析为该对象的属性。

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社区页点击评论定位到编辑器位置

提示页面退出

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

……


转载请注明原文链接:js的window对象简单看
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址