BOM相关01

一、BOM——浏览器对象模型

BOM的核心对象是window，它表示浏览器的一个实例；
在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象。
所有在全局作用域中声明的变量，函数都会变成window对象的属性和方法。

看几个例子

var age = 29;
function sayAge(){
    alert(this.age);
}
alert(window.age);   //29
sayAge();            //29
window.sayAge();     //29

需要注意的是

定义全局变量与在window对象上直接定义属性还是有一点差别的：全局变量不能通过delete操作符删除，而直接定义在window对象上的定义属性可以。

看例子

var age  = 29;
window.color = 'red'

//在IE < 9 时抛出错误，在其他所有浏览器都会返回false
delete window.age ;  //false

//在IE < 9 时抛出错误，在其他所有浏览器都会返回true
delete window.color;    //return true 

alert(window.age);    //29
alert(window.color);  //undefined

尝试访问未声明的变量回抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

var newValue = oldValue;   ////oleValue is not define

var newValue = window.oldValue  //这里不会抛出错误，因为这是一次属性查询
 console.log(newValue)   //undefined

二、窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中
在frames集合中，可以通过数值索引(从0开始，从左到右，从上到下)或者框架名称来访问相应的window对象。
每个window对象都有一个name属性，其中包含框架的名称。

//访问框架不同的方式
window.frames[索引]
window.frames['framename']
top.frames[索引]
top.frames['framename']
frames[索引]
frames['framename']

需要主要的是 top对象始终指向最高(最外)层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确访问另一个框架。因为对于在一个框架中编写的任何代码来说，其中window对象指向的都是那个框架的特定实例，而非最高层的框架。
与top相对的，另一个window对象是parent，parent对象始终指向当前框架的直接上层框架。某些情况下，parent有可能等于top.但是没有框架的情况下，paren一定等于top(此时它们都等于window)

三、窗口位置

用来确定和修改window对象位置的属性和方法有很多。
IE，Safari，Opera，Chrome都提供了screenLeft和screenTop属性，分别表示窗口相对于屏幕左边和上边的位置。
Firefox则在screenX和screenY属性中提供了相同的窗口位置信息。

使用下列代码可以跨浏览器取得窗口左边和上边的位置


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

这个例子运营二元操作符，先确定screenLeft 和screenTop 属性是否存在，如果是(在IE,Safari,Chrome中)，则取得这两个属性的值，如果不存在(在Firefox中)，则取得screenX和screenY的值。

由于浏览器差异问题，通常情况下，我们是无法在跨浏览器情况下取得窗口左边和上边的精确坐标值。然而，使用moveTo()和moveBy()方法有可能将窗口精确移动到一个新的位置。
这两个方法都接受两个参数。

moveTo() 方法接受新位置的x和y坐标。
moveBy() 方法接受水平和垂直方向上的移动的像素。

window.moveTo(0,0)    //将窗口移动到窗口左上角
window.moveBy(200,300)   //将窗口移动到 （200,300）

这两个方法，有可能会被禁用。而且不适用于框架，只能对最外层window对象使用

四、窗口大小

跨浏览器确定一个窗口的大小不是一件简单的事。

IE9+ ， Firefox , Safari , Opera , Chrome均为此提供了4个属性。

别分是：
innerWidth innerHeight
outerWidth outerHeight

在 IE9+ ， Firefox , Safari 中outerWidth outerHeight返回浏览器本身的尺寸。(无论是从最外层的window对象还是从某个框架访问)
Opera中 outerWidth 和 outerHeight 表示页面视图容器的大小，而 innerWidth、innerHeight则表示该容器中页面视图区的大小(减去边框的宽度)
在Chrome中，这四个属性返回相同的值，即视口大小而非浏览器窗口大小。

IE8以及更早版本没有提供取得当前浏览器窗口尺寸的属性；不过它通过DOM提供了页面可见区域的相关信息。

在IE ， Firefox , Safari , Opera , Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口信息。
在IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。
而对于混杂模式下的Chrome,则无论是通过
documentdocument、还是document.body。都可以取得视口大小。

虽然最终无法确定浏览器窗口本身的大小，但是却可以取得页面视口的大小。

 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;
            }
        }

上边代码，我们首先将window.innerWidth和window.innerHeight的值，分别赋值给了pageWidth和pageHeight，然后检查pageWidth 中保存的是不是一个数值，如果不是，则通过检查docuemnt.compatMode来确定页面是否处于标准模式。然后再根据页面模式取不同的值。

对于移动设备

window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小。移动IE不支持这些属性，但是通过document.documentElement.clientWidth和documentElement.clientHeight提供了相同的信息。
随着页面的缩放，这些值也会相应变化。
其他移动浏览器中 document.documentElement 度量的是布局视口，即渲染后页面的实际大小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动IE把这些信息保存在document.body.clientWidth和document.body.clientHeight中。这些值不会随着页面缩放变化。

调整浏览器窗口大小

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接受两个参数，其中resizeTo接受的是浏览器窗口的新宽度和新高度。而resizeBy接受新窗口和原窗口的宽度和高度之差。

//调整到 100*100
window.resizeTo(100,100);

//调整到200*150
window.resizeBy(100,50)