HTML--BOM window对象（实例：放大镜）
目录
简介：
1、BOM结构
2、window对象
3、location对象
4、history对象
6、screen对象
BOM 定时器
1、定时器方法
放大镜
简介：
BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。
1、BOM结构
window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法
使用window子对象时，可以使用完整语法，也可以忽略window，如：
window.alert()与alert()效果相同
2、window对象
| 名称 | 描述 |
|---|---|
open() |
打开一个新浏览器窗口 |
alert() |
显示警告框 |
close() |
关闭当前浏览器窗口 |
scrollTo() |
可把内容滑动到指定坐标 |
scrollBy() |
可将内容滑动指定的距离（相对于当前位置） |
innerWidth |
返回窗口的网页显示区域宽度 |
innerHeight |
返回窗口的网页显示区域高度 |
2.1 open(url, name, features, replace)
-
url: 打开指定页面的url，如果没有则打开空白页-
name: 指定target属性或窗口名称，支持以下值：-
_blank–- url加载到新窗口（默认） -
_parent–- url加载到父框架 -
_self–- url替换当前页面 -
_top–- url替换任何可加载的框架集 -
name-- 窗口名称
-
-
-
features: 设置新打开窗口的功能样式（如：width=500） -
replace-
true–- url替换浏览历史中的当前条目 -
false–- 在浏览历史中创建新条目
-
// 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '_self')
// 新窗口打开csdn首页，并设置窗口宽高500px
open('https://www.csdn.net/', '_blank', 'width=500,height=500') 2.2 scrollTo(xpos, ypos)
-
xpos：距离网页左上角x坐标 -
ypos：距离网页左上角y坐标
我是顶部
3、location对象
location对象包含当前url信息，经常用于网址判断，url跳转
| 名称 | 描述 |
|---|---|
href |
返回当前完整网址 |
host |
返回主机名和端口号，通常指完整域名 |
protocol |
返回网址协议 |
port |
返回端口号 |
pathname |
返回网址路径部分 |
search |
返回网址中的?及?后的字符串（查询部分），通常指查询参数 |
hash |
返回网址中的#及#后的字符串，通常指锚点名称 |
assign(url) |
在当前页面打开指定新url（增加浏览记录） |
reload() |
重新加载当前页面 |
replace(url) |
打开新url替换当前页面（替换当前浏览记录） |
3.1 获取网址信息
// 以https://www.csdn.net/nav/python?param1=111¶m2=222#first为例，
查看输出结果
console.log(location.href)
// “https://www.csdn.net/nav/python?param1=111¶m2=222#first”
console.log(location.host) // “www.csdn.net”
console.log(location.protocol) // “https://”
console.log(location.pathname) // “/nav/python”
console.log(location.search) // “?param1=111¶m2=222”
console.log(location.hash) // “#first”3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url
location.href = 'https://www.csdn.net'4、history对象
history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转
| 名称 | 描述 | 示例 |
|---|---|---|
back() |
返回历史记录的上一个url | history.back() |
forward() |
返回历史记录的下一个url | history.forward() |
go(n) |
返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页 | history.go(-1) history.go(1) |
5、navigator对象
navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性
| 名称 | 描述 |
|---|---|
platform |
返回操作系统类型 |
userAgent |
返回用户代理头的值 |
判断是否为谷歌内核：
navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核6、screen对象
screen对象包含用户屏幕的信息
| 名称 | 描述 |
|---|---|
availWidth |
返回屏幕的宽度（不包括windows任务栏） |
availHeight |
返回屏幕的高度（不包括windows任务栏） |
width |
返回屏幕的总宽度 |
height |
返回屏幕的总高度 |
BOM 定时器
1、定时器方法
| 方法名 | 定义 | 清除定时器方法 |
|---|---|---|
setTimeout() |
指定的毫秒数后调用函数或计算表达式 | clearTimeout() |
setInterval() |
按照指定的周期（毫秒）来调用函数或计算表达式 | clearInterval() |
1.1 setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)
setTimeout()可执行代码字符串，如：a+b，但不推荐使用，有安全风险;
定时器到期时，可以通过
setTimeout()的额外参数（参数1, 参数2…）给执行函数传递参数（IE9及以下浏览器不支持此语法）;
定时器清除方法
clearTimeout(id)，id为setTimeout()的返回值;
示例：
1.2 setInterval(代码字符串或函数, 运行间隔毫秒数，参数1, 参数2…)
语法与
setTimeout()相似，区别是setInterval()第二个参数为运行间隔;
由于
setInterval()是循环执行，如果没有特殊需求，则必须限制执行次数，使用clearInterval(id)清除定时器;
示例：
放大镜
Document
