全称为浏览器对象模型(BOM)。是用来获取浏览器相关信息的对象,并且可以操纵浏览器
Window
window对象是js中最大的对象,所有的对象都在这个对象中存在。在ES6之前,我们创建的变量会变成window对象的属性,创建的函数,会变成window对象的方法。我们在调用window对象的相关属性和方法时,可以不写window.
location
location包含了浏览器访问的网址的所有信息。网页url的改变会改变location获取到的信息。
一般我们会在url中修改的内容就是search和hash
- hash 表示url中”#“后跟着的的内容 hash内容不管怎么改变,访问的网页是不变
- host 域名 和 hostname 一致
- hostname
- href 当前网页的url
- origin 只包含协议和域名
- pathname 路径
- port 端口
- protocol 协议
- search ?后面的参数
页面跳转
js可以实现页面的跳转操作。js跳转更灵活。在历史记录中新增一条历史记录
location.href = "url" location.assign("url")
reload
重新加载(刷新)
location.reload() // 或者 location.href = location.href
replace
跳转页面,替换当前的历史纪录
location.replace(url)
history
历史记录,每当一个页面访问,就会在历史记录中新增一条新的历史记录。通过对历史记录的操作,我们可以在历史记录中进行跳转。
back
history.back() 在历史记录中返回上一页,前提是上一页得有记录
forward
history.forward() 在历史记录中前进下一页,前提是下一页得有记录
go
history.go() 中写数字,正值表示向下一页跳转,负值是上一页,数字写几,就跳转几页。
如果使用history.go(0)
则刷新页面。
history中新增方法
在HTML5中对于historyApi中新增了pushState和replaceState,不跳转页面,然后在历史记录中新增一个历史记录
pushState
在历史记录中新增一个假的历史记录,可以达到改变url,但是页面不跳转的目的。来模拟历史记录的操作
replaceState
替换掉当前的历史记录,他不会进行实际页面的跳转,只会改变url
hash和改新增api在未来的框架中会有应用,但不是我们写,是他们实现框架借助这些api来实现一些新的特性。未来了解了什么是单页面应用后,再去学习一个东西,单面应用路由的实现原理。
navigator
userAgent
获取浏览器信息
appVersion
获取浏览器版本
判断浏览器版本的操作,如果需要,我们可以找到对应的js代码
地理定位
地理定位涉及到隐私,所以需要询问用户是否同意,当我们调用相关方法时自动出现。
navigator.geolocation
所有的定位操作,都在这里了。
navigator.geolocation.getCurrentPosition((position) => { // position就是我们的位置信息 }, (err) => {})
position中包含哪些信息
- accuracy 精度
- altitude 海拔
- altitudeAccuracy 海拔精度
- heading 方向
- latitude 纬度
- longitude 经度
- speed 速度
如果我们想要观察位置的变化,可以使用watchPosition
navigator.geolocation.watchPosition((position) => { // position就是我们的位置信息 }, (err) => {})
注意注意!!!!正常的地理定位需要功能,我们在项目中是借助现成的地图api来解决的。