HTML--BOM window对象（实例：放大镜）

目录

简介：

1、BOM结构

2、window对象

3、location对象

4、history对象

5、navigator对象

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)清除定时器;

示例：

放大镜