BOM
1.BOM的概述
BOM(Browser Object Model)是浏览器对象模型,js是通过BOM来操作浏览器
2.window对象
window是浏览器内置顶级对象
3.window对象上的一些属性
innerWidth 获得浏览器窗口的内容区域的宽度,包含垂直滚动条
innerHeight 获得浏览器窗口的内容区域的高度,包含水平滚动条
scrollTop 纵向滚动高度
scrollLeft 横向滚动条宽度
4.window的一些子对象
- location对象
①location对象上记录着当前地址的信息,部分属性如下(具体的我们可以console.log(window.location)打印出来在控制台看):
②location对象上的两个常用方法
<body>
<button onclick="fn1()">刷新</button>
<button onclick="fn2()">跳转</button>
<script>
// location具体的各种属性我们可以打印出来在控制台上看
console.log(window.location)
function fn1 () {
// 刷新
location.reload()
// 传参数true指的是强制刷新(也就是清除缓存再刷新)
// location.reload(true)
}
function fn2 () {
// 跳转,参数就是我们要跳转的地址
location.replace('http://www.baidu.com')
}
</script>
</body>
- navigator对象
该对象上记录着当前浏览器的信息,部分属性如下:
navigator.appName 获取当前浏览器名称
navigator.appVersion 获取当前浏览器的版本号
navigator.platform 返回当前计算机的操作系统
navigator.userAgent 返回浏览器信息 - history对象
该对象上记录着用户的上网记录,一些方法如下:
history.go() 参数可以写任意整数,整数前进,负数后退
history.back() 后退
history.forward() 前进 - screen对象
该对象包含客户端屏幕的相关信息,部分属性如下:
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
5.window下的弹框方法
- alert() 警告框
// 打开网站会弹出一个框框,内容是 欢迎帅哥
alert('欢迎帅哥')
- prompt() 输入框
var age = prompt("您好,请输入年龄");
if ( age > 18 ) {
alert('恭喜你,你可以谈恋爱了')
} else {
alert('好好学习')
}
- confirm()确认框
// confirm()确认框,点击确定返回true,点击取消返回false
if (confirm('我帅吗?')) {
// 点击了确定
console.log('瞎说什么大实话')
} else {
// 点击了取消
console.log('不要脸')
}
6.window中一些常用事件
- window.onload
页面加载完成后执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var box = document.getElementById('box')
console.log(box) // null 因为我们代码是从上往下执行的,所以获取不到box
/* window.onload = function () {
代码块
}
等页面加载完成才执行函数内的代码
*/
window.onload = function () {
var box = document.getElementById('box')
console.log(box) // <div id="box"></div>
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html
- window.onscroll
滚动条滚轮事件
<body>
<div id="box" style="width: 1000px; height: 1000px;"></div>
<script>
window.onscroll = function () {
// window.scrollTop和window.scrollLeft有兼容性,直接取取不到
// 下面是兼容写法
var top = document.documentElement.scrollTop || document.body.scrollTop
var left = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(top,left)
}
</script>
</body>
- window.onresize
窗口缩放事件
window.onresize = function () {
// 当窗口大小发生改变时触发
console.log(window.innerWidth,window,innerHeight)
}