BOM-window

Yukino 343 2021-12-29

window简介

BOM(Browser Object Model)的核心是window对象,表示浏览器的实例。window在浏览器中有两重身份,一个是ECMAScript中的Global对象,另一个就是浏览器窗口中的JavaScript接口。这意味着网页中定义的所有变量、函数和对象都以window为Global对象,都可以访问其上定义的全局变量和方法。

Global作用域

window被复用为ECMAScript的Global对象,所以通过var声明的所有全局变量和全局方法都会成为window对象的属性和方法,而let和const声明的则不会。

视口位置

  1. 可以通过window.scrollX和window.scrollY获取文档相对视口的位置
  2. 通过window.scroll()、scrollTo()和scrollBy()滚动页面,这三个方法接收的都是x、y坐标,前两者是相对窗口的offset,后者是相对当前位置的offset。同时这三者还可以接收一个ScrollToOptions,除了提供offset还可以提供behavior属性告诉浏览器是否平滑移动。
// 正常滑动
window.scrollTo({
    left: 0,
    top: 100,
    behavior: 'auto'
});

// 平滑滑动
window.scrollTo({
    left: 0,
    top: 100,
    behavior: 'smooth'
});

导航和打开新窗口(这部分浏览器限制颇多,不多记录)

window.open()用于导航到指定URL,也可以用于新的浏览器窗口。这个方法接收的4个参数:要加载的URL、目标窗口、特性字符串和表示新窗口是否在浏览记录替代当前加载页的bool值。

定时器

JavaScript在浏览器中是单线程执行的,但是允许定时器在某个指定时间之后或者指定每隔一段时间就执行相应的代码。setTimeout()用于指定在一段时间之后执行某些代码,而setInterval()用于制定每隔一定时间就执行某些代码。

任务队列

JavaScript是单线程的,所以每次只能执行一段代码,为了调度不同代码的执行,JavaScript维护了一个任务队列,其中的任务会按照添加的顺序先后执行。setTimeout只是告诉JavaScript引擎在指定毫秒数后将任务添加到任务队列,如果队列是空的则立即执行,如果不是空的则需要等待前面的任务完成再执行。

clearTimeout

调用setTimeout时会返回一个该超时排期的数值ID,这个超时ID是被执行代码的唯一标识符,可以调用clearTimeout()方法并传入超时ID以取消等待中任务,若调用clearTimeout()方法时,任务已执行,则没有任何效果。

setInterval

setInterval()与setTimeout()类似,只不过指定任务会每隔指定时间就会执行一次,直到取消循环或者页面卸载。

系统对话框

  1. alter(msg):警告框,一个参数,提示的内容
  2. confirm(mag):确认框,一个参数,提示内容,返回值:用户单击了OK返回true,cancel返回false
  3. prompt(msg, default):提示框,两个参数,分别是提示内容和文本框默认值,返回值:用户单击了OK返回文本框内容,cancel返回null
  4. print():打印对话框
  5. find(content):查找对话框,一个参数,查找内容,返回值:页面存在查找值返回true,不存在返回false

# 前端 # 浏览器