BOM（浏览器对象模型详解）

摘要

如果想在Web中使用JavaScript，那么BOM无疑是真正的核心。BOM提供了许多对象用于访问浏览器的功能，这些功能与任何网页内容无关。

这一篇就来说一下BOM对象的核心内容。

1.Window 对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAscript规定的Global对象。

（1）全局作用域

这意味着在网页中定义的任何变量，方法和对象，都是在以window为Global对象的下面定义的。
我们来看一下这段代码：

var age = 29;
function sayAge(){
    console.log(this.age);
}

console.log(age); //29
console.log(window.age);  //29
sayAge();  //29

不管定义的变量还是方法，都是以window来定义的。
所以在sayAge方法里面的this指向的是调用该方法的window对象。

（2）不同定义的区别

那这个时候我们要想一个问题了，我们直接定义变量和给window添加变量有什么区别吗？
让我们看一下这段代码：

var name = 'lisi';
window.age = 29;

delete window.name; //返回false
delete window.age; // 返回true

这里我们可以看到，通过var来定义在window下的变量，不能通过delete删除。

这里面的原理，其实是在定义属性的时候，将一个叫Configurable属性设置为了false，从而不能被delete删除（这里面不懂可以看一下之前的文章）

Object.defineProperty方法（详解）

2.窗口位置

用来确定和修改window对象位置的属性和方法有很多。
获取窗口位置，针对于不同的浏览器，有两对属性。

1.screenLeft和screenTop

2.screenX和screenY

使用下面的方法可以解决浏览器的兼容问题

        var leftPos = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;
        var topPos = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;

而用来移动窗口的方法我们可以使用moveTo和moveBy这两个方法。
前者是接收新位置的x和y坐标的值，后者接收的是水平和竖直方向上移动的像素数。

说白了就是moveTo可以移动到给定位置，moveBy就是以原先为基础进行移动。

像这两段代码：

        window.moveTo(0,0); // 将窗口移动到屏幕的左上角
        window.moveBy(0,100); // 将窗口向下移动100像素

3.窗口大小

想要获取窗口的大小并且解决浏览器的兼容问题，可不是那么简单。
针对于不同的浏览器，确定窗口大小的属性也有两对。

1.innerWidth，innerHeight

2.outerWidth，outerHeight

但如果浏览器不允许上面的属性使用，我们可以采用其他的方法

1.标准模式下：

document.documentElement.clientWidth
和document.documentElement.clientHeight
可以进行获取

2.混杂模式下

document.body.clientWidth
和document.body.clientHeigh
t可以进行获取

所以针对于浏览器的兼容，我们可以这样去写：

        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;

        if(typeof pageWidth != 'number'){
        	//判断是否为标准模式
            if(document.compatMode == 'CSS1Compat'){
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            }else{
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }

另外，使用**resizeTo()和resizeBy()**这两个方法可以调整浏览器窗口的大小：

        window.resizeTo(100,100); //调整到100 * 100
        window.resizeBy(100,50); // 调整到（100 + 100） * （100 + 50）

前者是调整到指定大小。
后者是根据原先的值进行调整。

4.导航和打开窗口

使用window.open()可以导航到一个特定的URL，也可以打开一个新的窗口。
这个方法接收4个参数：

URL,窗口目标，一个特定的字符串，一个布尔值。

正常来讲我们一般只传递第一个参数。

所以后面的三个参数在这里面不进行特殊说明，如果需要了解可以查阅资料进行学习。

5.间接调用和超时调用

OK，现在该说所有人都很熟悉的两个方法了。

先说一下超时调用：

        //设置超时调用
        var timer = setTimeout(() => {
            console.log('超时调用');
        }, 3000);

        //把它取消
        clearTimeout(timer);

使用起来应该也是很熟悉了。

再说一下间接调用：

        //设置间接调用
        var interval = setInterval(() => {
            console.log('间接调用');
        }, 3000);

        //把它取消
        clearInterval(interval)

6.系统对话框

1.alert() 提示框

他的效果是这个样子的，平时也是我们调试用的最多的。

2.confirm() 警告框

他的效果是这样的：

根据点击确定还是取消我们可以有不同的操作：

        var flag = confirm('Are you srue');
        if(flag){
            alert('yes')
        }else{
            alert('no')
        }

3.prompt() 输入框

他的效果是这个样子：

我们可以根据输入来进行操作：

        var result = prompt('enter your name','');
        if(result != null){
            alert(result)
        }

7.location对象

location是最有用的BOM对象之一，他提供了与当前窗口中加载的文档的信息，还提供了一些导航功能。
现在我们来看一下它的属性：

属性名	例子	说明
hash	"#contents	返回#后面跟着的零或多个字符，如果URL不包含散列，则返回空字符串
host	“www.wrox.com:80”	返回服务器名称和端口号
hostname	“www.wrox.com”	返回不带端口号的服务器名称
href	“http://www.wrox.com”	返回当前加载页面的完整URL
pathname	“/WillyCDA/”	返回URL的目录或文件名
port	“8080”	返回URL中指定的端口号
protocol	“http:”	返回页面使用的协议
search	“?name = lisi”	返回URL的查询字符串

然后还有方法：

方法名	说明
assign()	加载新文档
reload	重新加载当前文档
replace	用新的文档替换当前文档

当我们需要用到location对象的时候就可以查阅这个表格啦。

8.history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
使用go()方法可以在用户的历史记录任意跳转：

        history.go(-1); //后退一页
        history.go(1); // 前进一页
        history.go('wrox.com');// 跳转到最近的wrox页面

另外还有back和forward方法来代替go，顾名思义，就是前进和后退的意思。

        history.back();//后退一页
        history.forward();// 前进一页

除了上述几个方法以外，history还有一个length属性，用来表示用户历史记录的数量，根据这个属性我们可以确定用户是否只打开了一个页面：

        if(history.length == 0){
            console.log("用户只打开了一个页面");
        }

OK，关于BOM下的对象，也就说到这里！