目录
一前言
BOM(浏览器对象模型)用于操作浏览器,例如弹出窗口,刷新页面,后退,前进等。BOM提供的常用对象包括window对象,screen对象,location对象,navigator对象等。由于BOM由各个浏览器推出,所以没有统一标准,不同浏览器支持的对象成员也略有差别。
二window对象
window是浏览器的顶级对象,表示浏览器的一个实例,DOM的document对象也是window对象的属性。
1.全局作用域
全局作用域中的变量和函数也都属于window对象的成员,当引用window对象的成员时,可以省略window。
2.常用成员
- 属性
- 方法
- 事件
页面加载事件
方式1:window.onload = function(){ }
window.addEventListener('load',function(){ })
window.onload 是窗口(页面)加载事件,当文档内容完全加载成功,就会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数。
注意:
1.有了 window.pnload 就可以把JS代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
2.window .onload 传统注册事件方式只能写一次,如果有多个,会议最后一个 window.onload 为准。
3.如果使用 addEventListener 则没有限制
方式2:document.addEventListener('DOMContentLoaded',function(){ })
DOMContentLoaded 事件触发时,仅当 DOM 加载完成,不包括样式表,图片,flash等等。IE9以上才支持
注意:
如果页面的图片很多的话,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded 时间比较合适。
调整窗口大小事件
window.onresize = function(){ }
window.addEventLisener('load',function(){});
window.onload 是调整窗口大小加载事件,当触发时就调用是处理函数
注意:
1.只要窗口大小发生像素变化就会触发这个事件。
2.经常利用这个事件完成响应式布局,window.innerWidth 当前屏幕宽度。innerHeight 当前屏幕高度。
例:实现瀑布流布局
在实现时主要在onload和onscroll两个事件中调用waterfall()函数进行图片布局。瀑布流布局时,需要:
- 根据页面宽度和图片所在box宽度,计算每行包含几张照片,即列数。
- 将所有列高度保存在hArr[]数组中,调用minArr()函数求得当前数组最小值和其下标,即最短的一列。
- 创建box和img等元素,将下一幅图片添加到最短一列的下方。图片位置通过设置left和top完成,left由所在列和box宽度,box间隙gap决定,top由列高和gap决定。
三定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
div {
width: 500px;
height: 400px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<img id="imgBox" src="小图标/1.webp" width="100%" />
<button id="btnNext">手动切换</button>
</div>
<script>
window.onload = nextImg;
let imgBox = document.getElementById("imgBox");
let btnNext = document.getElementById("btnNext");
btnNext.onclick = nextImg;
setInterval(nextImg, 3000);
let i = 0;
function nextImg() {
i++;
imgBox.src = "小图标/" + i + ".webp";
if (i == 3) {
i == 1;
}
}
</script>
</body>
</html>
效果为:
四其他对象
- screen对象
- location对象
- navigator对象
- history对象