【JavaScript】BOM

BOM(浏览器对象模型)

1、window对象

BOM对象的核心是window，他表示浏览器的一个实例。window对象既是通过JavaScript访问浏览器窗口的一个接口，有事ECMAScript规定的Global对象。

（1）全局作用域

所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法。
定义全局变量与在window对象上直接定义属性的差别：
全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。

（2）窗口关系及框架

如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。
top对象：始终指向最高（外）层的框架，也就是浏览器窗口，使用它可以确保在一个框架中正确的访问另一个框架
parent对象：始终指向当前框架的直接上层框架；
self对象：它始终指向window

（3）窗口位置

IE\Safari\Opera\Chrome:
screenLeft：用于表示窗口相对于屏幕左边的位置；
screenTop：用于表示窗口相对于屏幕上边的位置；
Firefox/Safari/Chrome：
screenX：用于表示窗口相对于屏幕左边的位置；
screenY：用于表示窗口相对于屏幕上边的位置；

---

moveTo():接收的是新位置的x和y坐标值
moveBy():接收的是在水平和垂直方向上移动的像素数；

（4） 窗口大小

innerWidth，innerHeight：视口区域大小；
outerWidth，outerHeight：浏览器窗口本身的大小；
resizeTo():接收浏览器窗口的新宽度和新高度；
resizeBy():接收新窗口与原窗口的宽度和高度之差。

取得页面视口大小的函数：

//取得页面视口大小
function getViewSize () {
    var pageSize = {
        pageWidth: window.innerWidth,
        pageHeight: window.innerHeight
    };

    if (typeof pageSize.pageWidth != "number") {
        if (document.compatMode == "CSS1Compat") {//确定页面是否处于标准模式
            pageSize.pageWidth = document.documentElement.clientWidth;
            pageSize.pageHeight = document.documentElement.clientHeight;
        } else {
            pageSize.pageWidth = document.body.clientWidth;
            pageSize.pageHeight = document.body.clientHeight;
        }
    }
    return pageSize;
}

（5）打开窗口

window.open( ):该方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。可以接受4个参数，要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。该方法会返回一个指向新窗口的引用。

新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象，但原始窗口中没有指向弹出框口的对象。将新创建的标签页的opener属性设置为null，即表示在单独的进程中运行新标签页，浏览器的新创建的标签页不需要与原窗口进行通信。

系统对话框：

alert/confirm/prompt

2、location对象

location对象是最有用的BOM对象之一。
location对象既是window对象的属性也是document对象的属性。

（1）解析查询字符串函数：

//解析查询字符串
function getQueryStringAgs() {
    //取得查询字符串并去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : "");
    //保存数据的对象
    var args = {};
    //取得每一项
    var items = qs.length ? qs.split("&") : [];
    var item = null;
    var name = null;
    var value = null;
    var i = 0;
    var len = items.length;
    //逐个将每一项添加到args对象中
    for (i = 0;i < len;i++) {
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if (name.length) {
            args[name] = value;
        }
    }
    return args;//args是一个对象，args[name] = value
}

（2）位置操作

location.assign("http://baidu.com");//立即打开新URL并在浏览器的历史纪录中生成一条记录。
location.href="http://baidu.com";//打开新URL
location.raplace("http://baidu.com");//打开新URL，但是后退功能不能使用
location.reload();//重新加载页面

每次修改location的属性，页面都会重新加载。

3、history对象

history对象保存着用户上网的历史纪录，从窗口被打开的那一刻算起。
使用go（）方法可以在用户的历史纪录中任意跳转，可向前也可向后。