BOM

一、window对象

1.全局作用域

所有在全局作用域中声明的变量、函数都会成为window对象的属性和方法

        var title = "i am window";
        function sayHi() {
            console.log("hi!");
        }

        console.log(title);
        console.log(window.title);
        sayHi();
        window.sayHi();

而全局变量不能通过delete操作符删除，window对象的属性可以

        var title = "i am window";
        window.desc = "window is my name";
        delete title;
        delete window.desc;
        console.log(title);
        console.log(window.desc);

尝试访问未定义的变量可能会出错，但是访问不存在window的属性会返回undefined

2.窗口位置

不同浏览器对于窗口位置获取可能存在不同标准，有兼容性问题。

窗口相对屏幕左边、上边的位置：

IE、Safari、Oper、Chrome 支持 screenLeft、screenTop

Safari、Chrome 支持 screenX、screenY

跨浏览器取窗口左边和上边的位置：

        var leftPos = (typeof window.screenLeft === "number")?window.screenLeft:window.screenX;
        var topPos = (typeof window.screenTop === "number")?window.screenTop:window.screenY;
        console.log(leftPos);
        console.log(topPos);

注意点：

1.IE、Opear中，这两个值是页面可视区相对于屏幕左边和上边的位置，而Chrome、Firefox、Safari中是浏览器窗口相对于屏幕的位置。（上图使用的是Chrome）

2.对于中间的任何框架（frame）使用screenLeft、screenTop、screenX、screenY，返回的总是这些框架的top（最外层框架，即window）的位置值。

移动窗口（window）的方法：

        window.moveTo(50, 50);  // 参数为新位置
        window.moveBy(30, 30);  // 参数为相对移动的位移

不过基本上时被浏览器禁用的，用处不大。

3.窗口大小

outerWidth、outerHeight：

IE9+、Safari、Firefox中，返回浏览器窗口的宽、高

Oper中，返回单个标签页对应的浏览器窗口宽、高

Chrome中，返回页面视口的宽、高

innerWidth、outerHeight：

返回页面视口的宽、高

document.documentElement.clientWidth、document.documentElement.clientHeight：

标准模式下（针对document文档解析方式），返回页面视口的宽、高（Chorme浏览器通用）

document.body.clientWidth、document.body.clientHeight：

怪异模式下，返回页面视口的宽、高（Chorme浏览器通用）

        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;
        if (typeof pageHeight !== "number"){
            if(document.compatMode == "CSS1Compat"){  // 检查是否为标准模式
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            }else{
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }
        console.log(pageWidth);
        console.log(pageHeight);

同样有window.resizeTo() 和 window.resizeBy() 来改变页面视口的尺寸，仍常被浏览器禁用。

4.间歇调用和超时调用

超时调用：setTimeout（func, sec），第一个参数时函数或者包含执行语句的字符串，第二个参数时间隔时间（毫秒），执行到这条语句时，经过sec秒后将参数一的方法加入执行队列。setTimeout（func，0）是js中实现异步的方法。超时调用中的this指向window对象。

间歇调用：setInterval（func, sec），参数类型同上，间隔sec执行一次方法。

若间歇调用时，轮到下一次执行方法时，上一次方法的执行还未完成仍在执行，则容易产生混乱，所以可用超时调用来模拟间歇调用。如下例：

        var num = 0;
        var max = 10;
        function incrementNum() {
            num++;
            if(num < max){
                setTimeout(incrementNum, 500);
            }else{
                console.log("Done");
            }
        }
        setTimeout(incrementNum, 500);

5.系统对话框

alert（msg）：显示msg信息

confirm（msg）：显示msg信息，并有 "OK" 和 "Cancel" 按钮，点击分别返回 true、false

prompt（msg，default）：显示msg信息和一个输入框，并有 "OK" 和 "Cancel" 按钮，点击 "OK" 则返回输入框的值（可设默认值），点击 "Cancle" 返回 null

二、location对象

window.location 等同于 document.location

        console.log(location.hash);  // 返回URL 的 hash值
        console.log(location.host);  // 返回服务器名称和端口
        console.log(location.hostname);  // 返回服务器名称
        console.log(location.href);  // 返回完整URL
        console.log(location.pathname);  // 返回URL目录和文件名
        console.log(location.port);  // 返回端口
        console.log(location.protocol);  // 返回协议
        console.log(location.search);  // 返回URL查询字符

三、history对象

back（）后退

forward（）前进

history.length  历史记录数量，当目前为第一个页面时，length属性为0，可用此判断当前页面是否为第一个页面