《高级程序设计》8 BOM

• window对象
• location对象
• navigator对象
• screen对象
• history对象

一、window对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global的对象。

1、全局作用域

由于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";
    delete window.age;  //在IE<9时抛出错误，在其他所有浏览器中都返回false
    delete window.color; //在IE<9时抛出错误，在其他所有浏览器中都返回true
    alert(window.age);  //29
    alert(window.color);  //undefined

使用var语句添加的window属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。IE8及更早版本在遇到使用delete删除window属性的语句时，不管该属性最初是如何创建的，都会抛出错误。IE9及更高版本不会抛出错误。

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

2、窗口关系及框架

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

可以通过window.frames[0]或者window.frames["topFrame"]来引用框架。不过，最好使用top而非window来引用这些框架（例如，top.frames[0]）。

top对象始终指向最高（最外层的框架），也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。因为window对象指向的都是那个框架的特定实例，而非最高层的框架。

与top相对的另一个window对象是parent：始终指向当前框架的直接上层框架。在没有框架的情况下，parent一定等于top（此时它们都等于window）

除非最高层窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值。

self，它始终指向window；实际上self和window对象可以互换使用。引入self的目的只是为了与top和parent对象对应起来。

注意：在使用框架的情况下，浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。例如，top.Object并不等于top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用instanceof操作符。

3、窗口位置

最终结果是无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。

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

IE、Safari、Opera和Chrome提供了screenLeft和screenTop属性，firefox则提供了scrollX和scrollY属性，Safari和Chrome也同时支持这两个属性。

IE、Opera和Chrome中screenLeft和screenTop保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。

而在Firefox和Safari中，scrollX和scrollY保存的是整个浏览器窗口相对于屏幕的坐标值。

注意：moveTo()和moveBy()这个两个方法在Opera和IE7（及更高版本）中默认被禁用。

4、窗口大小

IE9+,fireFox，Safari，Opera和Chrome提供了outerWidth和outerHeight返回浏览器窗口本身的尺寸大小。但是IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性；不过，它通过DOM提供了页面可见区域的相关信息。

    var pageWith = window.innerWidth;
    var pageHeight = window.innerHeight;
    if (typeof pageWith != "number") {
        if (document.compatMode == "CSS1Compat") {  //判断页面是否处于标准模式
            pageWith == document.documentElement.clientWidth;
            pageHeight == document.documentElement.clientHeight;
        } else {
            pageWith = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }
    alert(pageWith + ":" + pageHeight);
    //    在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和
    // document.documentElement.clientHeight保存了页面视口的信息。在IE6中，这些属性必须在标准模式下才有效；
    // 如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。
    // 而对于Chrome，则都可以取得视口的大小。

注意：resizeTo()和resizeBy()这个两个方法在Opera和IE7（及更高版本）中默认被禁用。

5、导航和打开窗口

window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法可以接收4个参数：

要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常指传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。

    window.open("http://www.wrox.com/", "topFrame");
    //等价于<a href="http://www.wrox.com" target="topFrame"></a>
    //    如果有一个名叫“topFrame”的窗口或者框架，就会在该窗口或框架加载这个URL；否则，就会创建一个新窗口并将其
    //    命名为“topFrame”。此外，第二个参数也可以是下列任何一个特殊的窗口名称：_self,_top,_blank。

①弹出窗口

如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏，地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页——根据浏览器设置）。在不打开新窗口的情况下，会忽略第三个参数。

下表列出了可以出现在第三个参数这个字符串的设置选项：

设置	值	说明
fullscreen	yes或no	表示浏览器窗口是否最大化。仅限IE
height	数值	表示新窗口的高度，不能小于100
left	数值	表示新窗口的左坐标。不能是负值
location	yes或no	表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果是设置为no，地址栏可能会隐藏，也可能会被禁用（取决于浏览器）
menubar	yes或no	表示是否在浏览器窗口中显示菜单栏。默认值为no
resizable	yes或no	表示是否可以拖动浏览器窗口的边框改变其大小。默认值为no
scrollbars	yes或no	表示如果内容在视口中显示不下，是否允许滚动。默认值为no
status	yes或no	表示是否在浏览器窗口中显示状态栏。默认值为no
toolbar	yes或no	表示是否在浏览器窗口中显示工具栏。默认值为no
top	数值	表示新窗口的上坐标。不能是负值
width	数值	表示新窗口的宽度。不能小于100

 

    //    浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过window.open()
    // 创建的窗口调整大小或移动位置
    var wroxWin = window.open("http://www.wrox.com/", "topFrame", "height=400,width=400,top=10,left=10,resizable=yes");
    //    调整大小
    wroxWin.resizeTo(600, 600);
    //    移动位置
    wroxWin.moveTo(100, 100);
    //    关闭新打开的窗口，仅适用于通过window.open()打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户
    //    的允许是不能关闭它的。不过，弹出窗口倒是可以调用top.close()在不经用户允许的情况下关闭自己。
    //    wroxWin.close();
    //    新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层window对象（top）
    //    中有定义，而且指向调用window.open()的窗口或框架。
    //    虽然弹出窗口中有一个指针指向打开它的原始窗口，但原始窗口中并没有这样的指针指向弹出窗口。
    alert(wroxWin.opener == window);
    //    将wroxWin.opener设置为null就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此，可以在独立的进程中运行。
    wroxWin.opener = null;

②安全限制

不同浏览器对弹出窗口的限制不同

③弹出窗口屏蔽程序

 

6、间歇调用和超时调用

7、系统对话框

二、location对象

1、查询字符串参数

2、位置操作

三、navigator对象

1、检测插件

2、注册处理程序

四、screen对象

五、history对象