第二十二节：BOM对象

BOM解析

BOM是browser object model的缩写，简称浏览器对象模型；浏览器本身提供的一些对象。

BOM的几个特殊对象

• window对象
• Location对象
• History 对象
• Navigator 对象（不常用，如果需要获取浏览器名称、代码名等相关内容需要用到此对象）
• Screen 对象（不常用）

1、window对象

每一个window对象就表示浏览器的一个实例，因为window对象是浏览器提供的，除了实现global对象所有功能之外，还实现了浏览器一些功能。
关于global对象的介绍

在全局声明的所有对象都相当于window的对象，例如下面的声明变量：

var ceshi='测试';
xxx=123;
ceshi;//"测试"
window.ceshi;//"测试"
xxx;//123
window.xxx;//123
//使用var与不使用var区别，不使用var可用delete进行删除
delete(xxx); //true
window.xxx;//undefined
delete(ceshi); //false
window.ceshi;//"测试"

页面什么情况出现多个window对象

使用iframe或者frame标签时，相当于页面中嵌入了多个窗口，也就出现了多个window对象；
获取iframe
window.frames是个伪数组，可以通过window.frames[index]或window.frames[name]来获取iframe；window.frames[index],索引是从左往右，从上往下的，从0开始；

获取iframe里的window或者document
iframe.contentWindow、iframe.contentDocument
注意：iframe.contentDocument也可以用iframe.contentWindow.document表示，iframe.contentDocument在 IE8及以下的版本不支持。

window的属性：

1. top 返回最顶层的父窗口
2. parent 返回父窗口
3. self 返回对当前窗口的引用。等价于 Window 属性。
4. frames 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
5. screenTop 返回相对于屏幕窗口的y坐标（窗口距离屏幕上面的距离）
6. screenLeft 返回相对于屏幕窗口的x坐标 （窗口距离屏幕左边的距离）
7. screenX 返回相对于屏幕窗口的x坐标
8. screenY 返回相对于屏幕窗口的y坐标

top / parent / self几个属性：如果页面只有一个窗口，top、parent、self是等价的。
如果页面有多个窗口，每个窗口的window都有自己原生的构造函数，且都是独立的。页面间的传参可能会出现一些问题。
screen几个属性：不同浏览器可能返回的值不太一样，无法取得精确的值；一般用不到这几个属性。

window的方法：

1. open() 打开一个新的浏览器窗口或查找一个已命名的窗口
2. close() 关闭浏览器窗口
3. setTimeout() 在指定的毫秒数后调用函数或计算表达式。
4. setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
5. clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
6. clearInterval() 取消由 setInterval() 设置的 timeout。
7. alert() 显示带有一段消息和一个确认按钮的警告框
8. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
9. prompt() 显示可提示用户输入的对话框

open()方法：很少使用

语法：window.open(URL,name,specs,replace)；所有属性值均为可选。
url表示打开的地址，没有指定url则打开一个空白窗口（有的浏览器是弹出一个页面，有的是新建一个标签，不同浏览器不同）。
name表示指定的窗口名称，一般使用iframe布局页面会用到此属性。支持_blank、_parent、_self、_top、name几个值。
space：其他值得定义，例如宽高、目录按钮、全屏模式、菜单栏的显示等。宽高直接定义数字，不需要单位，其他参数均为yes/no/1/0
replace 是否替换历史记录，true/false
注意：只有使用open()方法创建的窗口才能使用close关闭掉，最顶层及最开始打开的页面是无法使用close方法关闭的

//用新窗口打开百度，宽高为400*300
window.open('https://www.baidu.com','_blank','width=400,height=300');

定时器方法setTimeout()、setInterval()

//1000毫秒后打印11
var x= setTimeout(function(){
  console.log(11)
},1000)
console.log(x);
VM402:4 39372
//每隔1000毫秒打印num值，num值为5时取消
var num=1;
var timeLoop=setInterval(function(){
  console.log('num的值为：'+ num);
  num++;
  if(num==5){
    clearInterval(timeLoop);
  }
},1000)

注意：setInterval()看起来是实现了多线程，其实还是单线程，因为在同一时段只能执行一件事情。
JS运行模式：在同一时段快速切换，执行多个事情，看起来像是多线程，其实本质还是单线程。
注意点一：第一个参数可以是函数，也可以是字符串；但是不建议使用字符串，因为如果使用字符，这个字符串会被当成一个js的代码去执行，相当于调用了eval这个函数（相当于小型解释器，对性能有影响）。所以推荐使用函数
注意点二：setTimeout和setInterval都有一个返回值，这个返回值是一个数字，所以可以将函数赋值给一个变量，将变量传递给clearTimeout或clearInterval停止对应的定时器。
注意点三：这个方法的原理是创建了一个事件队列，将要执行的代码放到事件队列不执行，等待JS代码执行完成会扫描队列，扫描时进行设置的时间的判断，如果到了设置时间就执行代码，没有到则再重新扫描事件队列，重新判断，如是反复…
所以虽然有时候setTimeout设置的时间是0，也是最后执行，就是因为以上的原因。
注意点四：使用setInterval设置间隔时间时，html5规定最小时间间隔为10ms，如果设置比10还小的值，其实与设置10一样。
注意点五：setInterval可能会出现累积效应，也就是说setInterval内部执行代码需要一定的时间，如果这个时间超过间隔时间，那这个代码会不断被触发，而非一定间隔时间后被触发。所以使用setInterval时需要考虑代码执行的时间。所以有时候会使用setTimeout代替setInterval。

var num=1;
var timer = setTimeout(function(){
  console.log('num的值为：'+ num);
  num++;
  if(num<5){ //num小于5时重新调取定时器
   timer = setTimeout(arguments.callee, 3000);
  }
},3000)

注意点六：设置动画时由于显示器的刷新频率和动画无法保持一致，会出现卡顿的问题。可以使用css3实现动画，也可使用window.requestAnimationFrame()

系统对话框方法

//弹出一个带确定和取消按钮的对话框
function myFunction(){
    var x;
    var r=confirm("按下按钮!");
    if (r==true){
        alert('你点击了确定');
    }
    else{
         alert('你点击了取消');
    }
}
myFunction();
//弹出一个可输入的对话框
function myFunction2(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "! 今天感觉如何?";
	    document.getElementById("demo").innerHTML=x;
	}
}

window所有属性和方法参考

2、Location对象

注意：Location对象即是window对象的属性，也是document对象的属性。这个对象本身提供了8个属性，3个方法

location对象属性

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整
pathname	返回的URL路径名
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

location这些属性都是可写的，赋值后页面都会刷新。

Location 对象方法

属性	描述
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

//跳转新文档并且History记录中有记载
window.location.assign("http://www.baidu.com");//跳转至百度
history.back();//返回上一页
//刷新当前页面，默认走缓存
location.reload();
location.reload(true);//绕过缓存，从服务器上重新下载该文档，或者按住shift键点击刷新，效果一样
//打开新文档替换当前文档,history.back()无法返回上一页
window.location.replace("http://www.baidu.com");

3、History对象

history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮
go() 方法可加载历史列表中的某个具体的页面，参数为数字或者url地址

//只有一个length属性
history.length;//0的话表示是打开的第一个页面
//history方法
window.history.back();//返回上一页
//等价于
window.history.go(-1)
window.history.forward();//前进下一页
//等价于
window.history.go(1)
//后退两步
window.history.go(-2)
window.history.go('https://www.baidu.com/')//一般用不到，因为不知道客户前面访问了哪些页面