一、BOM的概念
BOM浏览器对象模型（Browser Object Model）
1、我们通过window对象操控浏览器
2、window与document的关系
document是window的一个对象属性
console.log(window.document);
3、location对象
window.location.href="index.html";//属性 控制浏览器地址栏的内容
window.location.reload();//刷新 带本地缓存
window.location.reload(true);//刷新 不使用本地缓存
4、history对象----用户（在浏览器窗口中）访问过的 URL
window.history.back();//上一个
window.history.forward();//下一个
window.history.go(-2);//参数<0时，跳转到自己后方的第参数个记录。参数>0时，跳转自己前方的第参数个记录
console.log(window.history.length);//获取历史记录的长度
二、window中常用的事件
1、open()打开窗口
既可以导航到一个特定的URL,也可打开一个新窗口。
| 属性 | 值 | 说明 |
|---|---|---|
| width | 数值 | 新窗口的宽度，不能小于100 |
| height | 数值 | 新窗口的高度，不能小于100 |
| top | 乘数值 | 距离屏幕上方的像素 |
| left | 数值 | 距离屏幕上方的像素 |
| toolbar | yes no | 是否显示工具栏，IE浏览器有效 |
| location | yes no | 是否显示地址栏，IE浏览器有效 |
| fullscreen | yes no | 全屏显示 |
window.open("one.html","blank","width=100px,height=400px,top=0px,left=0px,toolBar=yes,location=no;");
2、close()关闭窗口
window.close()关闭窗口，不能关闭非脚本打开的窗口
//在FF浏览器只能关闭通过代码打开的窗口
window.close();
3、onload加载事件
当页面加载完成的时候会触发该事件
window.onload=function(){
console.log('我被触发了')
}
4、onscroll滚动事件
当窗口发生滚动会触发该事件
window.onscroll=function(){
console.log("滚！");
//浏览器支持哪个属性就获取哪个属性
//获取滚动条滚动距离
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
console.log(scrollTop);
}
5、onresize窗口变化事件
//当浏览器窗口大小发生改变的时候 就会触发window.onresize事件
window.onresize=function(){
console.log("变变变！");
//可视区域的宽度
var width = document.documentElement.clientWidth||document.body.clientWidth||document.innerWidth;
var height = document.documentElement.clientHeight||document.body.clientHeight||document.innerHeight;
console.log("宽："+width+"高："+height);
}
三、window常用的方法
1、系统对话框
- 警告框：alert()，没有返回值
alert("你访问的页面含有非法敏感内容!")
- 选择框：confirm("提问的问题")，返回true,false;
var b = confirm("是否同意保存你的密码？");
- 输入框：prompt()返回字符串或者为null
var a = prompt("填写你的姓名");
console.log(a);
2、关于定时器的方法
- 循环定时器setInterva()
- 延迟定时器setTimeout()
- 清除定时器clearInterval()、clearTimeout()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 800px;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<script>
console.log('--------');
//定时器
//延时定时器
//第一个参数：延时执行的函数
//第二个参数：延时的时间
//函数可以作为另外一个函数的参数，这种函数称之为回调函数
var time3 = setTimeout(function(){
console.log('调用了setTimeout');
},0);//时间的单位是毫秒
//延时定时器只能执行一次
//定时器会在程序最后执行，即使延时0秒，也不会马上执行
//循环定时器
//第一个参数：循环每一次执行的函数
//第二个参数：循环的时间
var time1 = setInterval(function(){
console.log('setInterval1');
},1000);
var time2 = setInterval(function(){
console.log('setInterval2');
},1000);
var body = document.querySelector('body');
body.onclick = function(){
console.log('点击了');
//清除循环定时器 参数：要清除的定时器
clearInterval(time1);
//清除延时定时器
clearTimeout(time3);
}
console.log('++++++++++++');
</script>
</body>
</html>
