js之BOM

发表于 | 分类于


BOM

1、BOM：Browser Object Model:浏览器对象模型。
2、BOM的顶级是window对象，DOM是BOM的一部分。
3、window对象是JS的顶级对象。

window.open(url, target, param)
1
2
3
4
window.open('https://www.baidu.com', '_blank')
url: 地址
target: _blank(默认), _self等
param: 对窗口的设置
window.close()

关闭窗口

location对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
href: 跳转地址
protocol: 协议 一般是http:、https:
host: 主机名，包括端口
hostname: 主机名
pathname: url中的路径部分
search:	查询字符串
hash: 返回url中#后面的内容，包含#

location.href = 'https://www.baidu.com/document/myBook#hash123?search=123&a=435'
location.hash // '#hash123?search=123&a=435'
location.search // ''

location.href = 'https://www.baidu.com/document/myBook?search=123&a=435'
location.protocol // 'https:'
location.host // 'www.baidu.com'
location.hostname // 'www.baidu.com'
location.pathname // '/document/myBook'
location.search // '?search=123&a=435'
location对象跳转
1
2
3
location.assign() // 等价于location.href = 
location.replace()
location.reload() // 重新加载
history对象

1、后退

1
2
history.back()
history.go(-1) // 0是刷新

2、前进

1
2
history.forward()
history.go(1)

window.navigator 的一些属性可以获取客户端的一些信息。

1
2
3
4
5
6
// userAgent：系统，浏览器)
// platform：浏览器支持的系统，win/mac/linux

navigator.userAgent
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"
navigator.platform // "Win32"

url编码解码

1、编码
1
2
3
4
5
encodeURI():
不会对下列字符编码: 1. ASCII字母，2. 数字，3. ~!@#$&*()=:/,;?+'
encodeURIComponent():
不会对下列字符编码: 1. ASCII字母，2. 数字，3. ~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。
2、解码
1
2
3
4
5
6
decodeURI():
不会对下列字符解码: 1. ASCII字母，2. 数字，3. ~!@#$&*()=:/,;?+'
decodeURIComponent():
不会对下列字符解码: 1. ASCII字母，2. 数字，3. ~!*()'
所以decodeURIComponent比decodeURI编码的范围更大。
*注：浏览器url会对参数进行编码，比如=/，所以需要拿到完整参数，需要用decodeURIComponent()进行解码，这是比较实用的