BOM-Browser Object Model
一整套操作浏览器相关内容的属性和方法
-操作浏览器历史记录
-操作浏览器滚动条
-操作浏览器页面跳转
-操作浏览器标签页的开启和关闭
…
1.获取浏览器窗口尺寸
获取可视窗口宽度：window.innerWidth
获取可视窗口高度：window.innerHeight
//获取浏览器可视窗口的宽度
var w=window.innerWidth;
//获取浏览器可视窗口的高度
var h=window.innerHeight;
2.浏览器的弹出层
提示框：window.alert(‘提示信息’)
询问框：window.confirm(‘询问信息’)
用户点击确定返回值为true，点击取消返回值为false
输入框：window.prompt(‘输入信息’)
返回值为用户输入信息，点击取消返回值为null
3.打开和关闭标签页
参数1 路径
参数2 是否在新页面打开
参数3 窗口大小和位置
打开新的页面：window.open(“参数1”,“参数2”,“参数3”)
关闭当前页面：window.close()
4.浏览器常见事件
资源加载完毕：window.onload = function ( ){ }
可视尺寸改变：window.onresize = function ( ){ }
滚动条位置改变：window.onscroll = function ( ){ }
5.浏览器的历史记录操作
回退页面：window.history.back()
前进页面：window.history.forward()
刷新页面：window.location.reload()
前进和后退分别相对于浏览器左上角箭头被点击
6.浏览器卷去的尺寸
卷去的高度：
//当代码中有标签时可以获取的到
document.documentElement.scrollTop
//当代码中没有标签时也可以获取的到
document.body.scrollTop
卷去的宽度：
document.documentElement.scrollLeft
document.body.scrollLeft
可使用 ||(或运算符)进行兼容写法
7.浏览器滚动到
滚动到：window.scrollTo()
参数方式1：window.scrollTo(left,top)
left：浏览器卷去的宽度
top：浏览器卷去的高度
此方法只会瞬间移动到滚动条的位置无法平滑移动
参数方式2：window.scrollTo({
left: xx,
top:yy,
behavior:‘smooth’ 平滑滚动
})