关于 BOM( BrowserObjectModel ) 的学习

1、window 对象

1.1 在浏览器中,window对象有双重角色，一是通过js访问浏览器窗口的一个接口，二是全局对象。

1.2 窗口位置

1）IE、Safari、Opera、Chrome中

     window.screenLeft: 窗口相对于屏幕左边的距离

     window.screenTop: 窗口相对于屏幕上边的距离

2）Firefox中，使用screenX和screenY

3）跨浏览器的方式：

     var leftPos = (typeof window.screenLeft == "number") 

                      ? window.screenLeft : window.screenX;

     var topPos = (typeof window.screenTop == "number")

                      ? window.screenTop : window.screenY;

4）将窗口移至屏幕左上角

window.moveTo(0,0);

5）将窗口向下移100px

window.moveBy(0,100);

ps: 4、5方法经常被浏览器禁用

1.3 窗口大小

1）IE9+、Firefox、Safari、Opera 和 Chrome4提供了四个属性：

     innerWidth、  innerHeight、outerWidth 和 outerHeight。

2）IE9+、Safari 和 Firefox下：

      outerWidth 和 outerHeight返回浏览器本身的大小

3）Opera下：

      outerWidth 和 outerHeight返回单个标签页对应的浏览器窗口大小，

      innerWidth 和 innerHeight返回去掉边框的单个标签页对应的浏览器窗口大小；

4）Chrome下：

    innerWidth、  innerHeight、outerWidth 和 outerHeight返回值相同，即视图区域大小，而非浏览器窗口大小；

5）IE、Firefox、Safari、Opera 和 Chrome下：

document.documentElement.clientWidth 和 document.documentElement.clientHeight保存了页面视口的信息。

IE标准模式：document.documentElement.clientWidth 和 document.documentElement.clientHeight；

IE混杂模式：document.body.clientWidth 和 document.body.clientHeight；

1.4 导航和打开窗口

1）window.open()

可以接收4个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览

器历史记录中当前加载页面的布尔值。

2) window.close()

1.5 间歇调用和超时调用

1）setTimeout()、clearTimeout()

2) setInterval()、clearInterval()

1.6 系统对话框

1) alert()    

2) confirm()

3) prompt()

2、location 对象

location 对象的属性

3、navigation 对象

navigation属性

1）registerContentHandler

2）registerProtocolHandler

4、screen 对象

5、history 对象

1）go() // go(-1);   go(2);

2）history.length

3）history.back(); // 退后一步

4）history.forward();// 前进一步