BOM 全称 Browser Object Model,译为浏览器对象模型。
BOM 是浏览器为 JavaScript 提供的能够对浏览器进行相关操作的 API。
一、window
-
window 是 JS 中的全局对象, 表示浏览器窗口, 在打开浏览器窗口的时候,window 对象会自动创建
-
所有的全局变量都是 window 的属性,Array、Number、String、isNaN 等都是 window 的属性
var a = 10; console.log(window.a == a); //true -
使用 window 的属性可以省略 window
1. 弹框
| 方法 | 含义 | 返回值 |
|---|---|---|
| alert() | 警告框 | 无 |
| prompt() | 输入框 | 输入的内容(string) |
| confirm() | 确认框 | true/false |
2. 打开新窗口
| 方法 | 含义 |
|---|---|
| open() | 打开窗口 |
| close() | 关闭窗口,只有open打开的才能使用close关闭 |
| print() | 调用预览 |
window.open() //打开空白窗口
window.open('地址') //设置窗口中网页文件地址
window.open('地址','窗口的名字') //覆盖旧窗口,打开新的窗口
window.open('地址','','width=400,height=400') //打开窗口并设置大小
3. 页面滚动
滚动到指定位置:
window.scrollTo(0, 0);
window.scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
})
滚动多少距离:
window.scrollBy(0, 0);
window.scrollBy({
left: 0,
top: 600,
behavior: 'smooth'
})
4. 定时器
-
多次定时器:
可以重复调用一个函数,每次调用之间具有固定的时间间隔
第一个参数是函数,第二个参数是间隔时间,从第三个参数开始表示传入函数内的实参
// 创建一个定时器 function func(a, b) { console.log(a, b); } setInterval(func, 2000, 1, 2); // 清除多次定时器 clearInterval() -
单次定时器:
当指定时间到了,执行函数一次,不再重复执行
// 创建一个单次定时器 function func(a, b) { console.log(a, b); } func(1, 2) setTimeout(func, 2000, 33333, 2323) // 清除单次定时器 clearTimeout()
5. window 对象属性和方法总结
developer.mozilla.org/zh-CN/docs/…
| 属性 | 含义 |
|---|---|
| name | 设置或读取窗口的名字 |
| length | 获取子窗口的数量 |
| innerWidth | 获取视口的宽度 |
| innerHeight | 获取视口的高度 |
| history | 获取浏览器的会话历史 |
| location | 获取当前位置的信息 |
| navigator | 包含有关访问者浏览器的信息 |
| screen | 获取和屏幕有关属性 |
| document | 文档类型,是DOM对象不是BOM对象 |
| 方法 | 含义 |
|---|---|
| alert() | 显示一个带有可选的信息的对话框 |
| confirm() | 显示确认或取消对话框 |
| prompt() | 提示输入一些文本 |
| open() | 打开新窗口 |
| close() | 关闭窗口 |
| print() | 打印当前文档 |
| scrollTo() | 滚动到文档中的某个坐标 |
| setTimeout() clearTimeout() | 延时器 |
| setInterval() clearInterval() | 定时器 |
二、history
history 用于表示本窗口的历史记录,相关属性方法如下:
| 属性/方法 | 含义 |
|---|---|
| length | 获取历史纪录的个数 |
| back() | 后退一步 |
| forward() | 前进一步 |
| go(n) | 前进或后退n步,n是正数前进,n是负数后退 |
三、location
location 用于表示本窗口的地址信息,相关属性方法如下:
| 属性/方法 | 含义 |
|---|---|
| href | 设置或读取完整的url |
| protocol | 设置或读取协议 |
| host | 设置或读取主机名+端口号 |
| port | 设置或读取端口号 |
| pathname | 设置或读取路径名 |
| hash | 设置或读取锚点部分 |
| search | 设置或读取查询字符串 |
| reload() | 重新加载本页面 |
| assign() | 跳转到指定的页面 |
| replace() | 跳转到指定的页面,当前页面在历史纪录中会被覆盖 |
四、navigator
navigator 用于表示浏览器的版本信息以及操作系统的相关信息,属性如下:
| 属性 | 含义 |
|---|---|
| userAgent | 获取浏览器信息 |
五、screen
screen 用于表示屏幕信息,相关属性如下:
| 属性 | 含义 |
|---|---|
| width | 获取屏幕宽度 |
| height | 获取屏幕高度 |