BOM的学习（1）

Browser Object Model（浏览器对象模型）
他的核心对象是window，他表示浏览器的一个实例。即是Javascript访问浏览器窗口的一个借口，又是ES中的Global对象。

由于window对象同时扮演着ECMAscript中的Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

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

在这个例子中，我们定义了一个age，一个sayAge函数，他们被自动归在了window对象名下，于是，可以通过window.age访问到age，可以通过window.sayAge()访问到sayAge()函数。

我们知道全局对象不能通过delete删除，但是定义在window对象上定义的属性可以

var age=29;window.color="red";delete window.age;alert(age)//29delete window.color;alert(color)//报错

这就回到了面向对象中，用var添加的window属性有一个名为[[configurable]]属性，这个值被设置为了false，所以不能被delete删除。

//在一般情况下，使用未声明的变量会抛出错误，而用window进行查询，就不会抛出错误。var a=b;//抛出错误var a=window.b//不会抛出错误，这是一次属性查询，这样就可以知道是否存在b属性

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

//我们经常使用这种方法来确定窗口左边和上边的位置var leftPos=(typeof window.left=="number")?    window.screenLeft:window.screenX;var topPos=(typeof window.top=="number")?    window.screenTop:window.screenY;

我们在某些情况下需要获取到浏览器的窗口大小，跨浏览器确定窗口大小可不是简单的事情，在主流浏览器中为我们提供了四个属性，innerWidth,innerHeight,outerWidth,outerHeight 在IE9+、Safari和FireFox中，outerWidth和outerHeight返回的是浏览器窗口本身的尺寸。在Opera中，这两个属性的值表示页面视图容器的大小，而innerHeight和innerWidth表示的是页面视图的大小。在chrome中，四个值都是viewport大小而非浏览器窗口大小.

document.documentElement.clientWidth，document.documentElement.clientHeight中保存了页面视口的信息，在IE6中，这些属性必须是在标准模式下才有用的;如果是混杂模式下的chrome，无论通过document.documenElement还是document.body中的clientWidth和clientHeight属性都可以取得视口的大小，虽然无法确定浏览器窗口本身的大小，但是我们却可以获取页面视口的大小。

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;    }}console.log(pageWidth)console.log(pageHeight)

在以上代码中，我们首先将window.innerWidth和window.innerHeight保存在了两个变量中，然后检查这俩pageWidth中保存的是否是一个数值，如果不是则检查document.compatMode来确定页面是否属于标准模式。如果是则分别使用
document.documentElement.clientWidth和document.documentElement.clientHeight

否则就使用document.body.clientWidth和document.body.clientHeight

另外使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新高度和宽度，而resizeBy()接收新窗口和原窗口的高度和宽度之差，如同moveTo()和moveBy()，默认都是被禁用的。

导航和窗口打开

使用window.open()既可以导航到一个特定的URL，还可以打开一个新的浏览器窗口。这个方法可以接受四个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加在页面的布尔值。通常只要传递一个参数，最后一个参数只在不打开新窗口的情况下使用.

window.open("http://www.baidu.com","_blank");//打开百度页面window.open("http://www.baidu.com","_blank","height=400,width=500,resizable=yes");

第三个参数可以设置打开页面的基本样式，可以设置以下样式

• fullscreen（yes或者no）IE中设置窗口是否最大化
• height和width（数值）宽度和高度
• top和left（数值）距离电脑上面和左侧的距离
• location（yes或者no）是否显示地址栏
• resizable（yes或者no）表示是否能够拖动边框来改变弹出窗口大小
• menubar（yes或者no）表示是否显示菜单栏
• scrollbars（yes或者no）表示在屏幕无法全部显示下是否使用滚动条
• status（yes或者no）表示是否显示状态栏，默认：no

• toolbar（yes或者no） 表示是否在浏览器窗口显示工具里，默认值：no

  大多数浏览器都屏蔽了弹窗程序，我们如果需要通过弹窗来显示内容，可以通过下列语句来判断用户是否开启了屏蔽程序

var openPage=window.open("http://www.baidu.com","_blank","width=500,height=500,left=10");if (openPage==null) {    alert("your broswer was blocked")