BOM是什么?
首先BOM全称为浏览器对象模型(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 ?后面的参数
location常用方法
href 页面跳转
不用js也可以实现页面的跳转操作但是js跳转更灵活,比如在历史记录中新增一条历史记录
扫描二维码关注公众号,回复:
15478534 查看本文章
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 根据值跳转
在go()中写数字,正值表示向下一页跳转,负值是上一页,数字写几,就跳转几页
history.go(1) //下一页
history.go(-1) //上一页
history.go(0) //刷新页面。
新增方法
在HTML5中对于historyApi中新增了pushState和replaceState,不跳转页面,然后在历史记录中新增一个历史记录
pushState
在历史记录中新增一个假的历史记录,可以达到改变url,但是页面不跳转的目的。来模拟历史记录的操作
replaceState
替换掉当前的历史记录,他不会进行实际页面的跳转,只会改变url