BOM（JavaScript基础013）

Browser Object Model，即浏览器对象模型。

window.XXXX

1.浏览器的信息（window.navigator.）

浏览器的名称、版本等信息。关于浏览器的信息，window交给了他的子对象navigator去记录。

console.log(navigator.appCodeName); // 返回浏览器的代码名
console.log(navigator.appName); // 返回浏览器的名称
console.log(navigator.appVersion); // 返回浏览器的平台和版本信息
console.log(navigator.cookieEnabled); // 返回指明浏览器是否启用cookie的布尔值
console.log(navigator.platform); // 返回运行浏览器的操作系统平台
console.log(navigator.userAgent); // 返回由客户机发送服务器的user-agent头部的值

2.浏览器的历史记录（window.history.）

历史记录的操作是window的子对象history。可以操作网页的前进和后退。

history.back(); // 返回到上一个页面，相当于浏览器的后退按钮
history.forward(); // 前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮
history.go()

3.浏览器的地址栏信息（window.location. ）

浏览器的地址栏操作，window对象交给了自己的子对象location对象去处理。

// 跳转    
location.href = 'http://www.qq.com';
    
// 获取地址栏的参数    
 var res = location.search;    
console.log(res);
    
// 设置地址栏参数    
location.search = "?name=zhangsan&age=12";
    
// 获取锚点    
var res = location.hash;    
console.log(res);
    
// 设置锚点    
location.hash = '#bottom';
    
// 跳转页面    
location.assign('http://www.baidu.com');
    
// 跳转页面    
location.replace('http://163.com');
    
// 刷新页面    
location.reload();

跳转页面的三种方法：
location.href = ‘http://www.qq.com’;
location.assign(‘http://www.baidu.com’);
location.replace(‘http://163.com’);

4.浏览器的弹出层（window.）

window.alert("恭喜你！");
window.prompt("请输入数字：",1);
window.confirm("你确定要删除吗？")

5.浏览器窗口尺寸（window.innerWidth）

window的innerWidth和innerHeight 是包含滚动条尺寸的
window.innerWidth
window.innerHeight

6.浏览器的事件（window.）

1.onload事件：当网页中的所有资源都加在完成之后执行这个事件

window.onload = function(){  
	console.log("当网页中所有资源加载完成才打印");
}

使用说明：通常是将script标签放到head标签中的时候使用。因为放在head中默认是获取不到body中的内容的，但是有了这个事件后，就可以了。
2.onunload事件：当浏览器关闭的时候触发这个事件

window.onunload=function(){    
	alert("浏览器要关闭了");
}

使用说明：只有在ie浏览器中能看到效果
3.onscroll 滚动事件：当网页滚动条的位置发生改变的时候触发这个事件

window.onscroll = function () {  
	console.log('浏览器滚动了')
}

使用说明：浏览器要有滚动条才行。
4.浏览器窗口改变事件：resize

window.onresize = function(){    
	// 当浏览器的窗口大小发生改变的时候触发这个事件
}

5.获取文档向下滚动的距离，以下两个都可以：

• document.documentElement.scrollTop
• document.body.scrollTop

window.onscroll = function () {  
var t = document.documentElement.scrollTop;  
console.log(t);  
var t1 = document.body.scrollTop;  
console.log(t1);}

使用说明：这两个的区别在于当前文档有没有doctype，有就用document.documentElement.scrollTop，没有就用document.body.scrollTop
获取页面向右滚动的距离：

• document.body.scrollLeft
• document.documentElement.scrollLeft
  使用方式同上。
  这两个方法在ie和edge下有兼容性问题。
  使用兼容写法：

var t = document.documentElement.scrollTop || document.body.scrollTop;
var t = document.documentElement.scrollLeft || document.body.scrollLeft;

7.定时器

延迟执行：

var timerId1 = setTimeout(function () {  
	console.log('我执行了')
}, 1000)
console.log(timerId1) // 1

使用说明：第一个参数是要执行的函数，第二个参数延迟的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。
每间隔一段时间执行：

var timerId = setInterval(function () {  
	console.log('我执行了')
}, 1000)

使用说明：第一个参数是要执行的函数，第二个参数是间隔的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。
关闭定时器：
定时器返回的数字，就是用来关闭定时器的

clearTimeout(timerId); 
// 关闭延迟执行的定时器
clearInterval(timerId); 
// 关闭间隔执行的定时器

使用说明：这两个关闭定时器的方法可以混用。