《JavaScript高级程序设计》读书笔记(五):BOM

最新推荐文章于 2024-09-21 11:34:18 发布

沈鸿斌

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量927

点赞数 1

文章标签： BOM web前端开发 javascript window

本文链接：https://blog.csdn.net/u012422829/article/details/50685723

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.window对象

BOM 的核心对象是 window,它表示浏览器的一个实例。在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数,都以 window 作为其 Global 对象,因此有权访问parseInt()等方法。

1.全局作用域

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

var age = 29;
function sayAge(){

alert(this.age);

}

alert(window.age); //29

sayAge(); //29

window.sayAge(); //29

抛开全局变量会成为window对象的属性不谈,定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过 delete 操作符删除,而直接在 window 对象上的定义的属性可以。例如:

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

//在IE < 9 时抛出错误,在其他所有浏览器中都返回false

delete window.age;

//在IE < 9 时抛出错误,在其他所有浏览器中都返回true

delete window.color; //returns true

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

另外,还要记住一件事:尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在。例如:

//这里会抛出错误,因为 oldValue 未定义

var newValue = oldValue;

//这里不会抛出错误,因为这是一次属性查询

//newValue 的值是 undefined
var newValue = window.oldValue;

后面将要讨论的很多全局 JavaScript 对象(如 location 和 navigator)实际上都是 window对象的属性。

2.window和frame

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

<html>
    <head>

        <title>Frameset Example</title>
    </head>

    <frameset rows="160,*">
        <frame src="frame.htm" name="topFrame">
        <frameset cols="50%,50%">

            <frame src="anotherframe.htm" name="leftFrame">

            <frame src="yetanotherframe.htm" name="rightFrame">
        </frameset>

    </frameset>
</html>

以上代码创建了一个框架集,其中一个框架居上,两个框架居下。对这个例子而言,可以通过window.frames[0]或者 window.frames["topFrame"]来引用上方的框架。不过,恐怕你最好使用top 而非 window 来引用这些框架(例如,通过 top.frames[0])。我们知道,top 对象始终指向最高(最外)层的框架,也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。因为对于在一个框架中编写的任何代码来说,其中的 window 对象指向的都是那个框架的特定实例,而非最高层的框架。图 8-1 展示了在最高层窗口中,通过代码来访问前面 6例子中每个框架的不同方式。

与 top 相对的另一个 window 对象是 parent。顾名思义,parent(父)对象始终指向当前框架的直接上层框架。在某些情况下,parent 有可能等于 top;但在没有框架的情况下,parent 一定等于 top(此时它们都等于 window)。

3.移动窗口

无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而,使用 moveTo()和 moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数,其中moveTo()接收的是新位置的 x 和 y 坐标值,而 moveBy()接收的是在水平和垂直方向上移动的像素数。下面来看几个例子:

//将窗口移动到屏幕左上角

window.moveTo(0,0);

//将窗向下移动 100 像素

window.moveBy(0,100);

//将窗口移动到(200,300)

window.moveTo(200,300);

//将窗口向左移动 50 像素

window.moveBy(-50,0);

需要注意的是,这两个方法可能会被浏览器禁用;而且,在 Opera 和 IE 7(及更高版本)中默认就是禁用的。另外,这两个方法都不适用于frame,只能对最外层的 window 对象使用。

4.window.open()

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

如果为 window.open()传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载第一个参数指定的 URL。

//等同于< a href="http://www.wrox.com" target="topFrame"></a>

    window.open("http://www.wrox.com/", "topFrame");

调用这行代码,就如同用户单击了 href 属性为 http://www.wrox.com/,target 属性为"topFrame"的链接。如果有一个名叫"topFrame"的窗口或者框架,就会在该窗口或框架加载这个 URL;否则,就会创建一个新窗口并将其命名为"topFrame"。此外,第二个参数也可以是下列任何一个特殊的窗口名称:_self、_parent、_top 或_blank。

表中所列的部分或全部设置选项,都可以通过逗号分隔的名值对列表来指定。其中,名值对以等号表示(注意,整个特性字符串中不允许出现空格),如下面的例子所示。

    window.open("http://www.wrox.com/","wroxWindow",
                "height=400,width=400,top=10,left=10,resizable=yes");

2.location对象

location 是最有用的 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location 对象是很特别的一个对象,因为它既是 window 对象的属性,也是 3document 对象的属性;换句话说,window.location 和 document.location 引用的是同一个对象。location 对象的用处不只表现在它保存着当前文档的信息,还表现在它将 URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。下表列出了 location 对象的所有属性(注:省略了每个属性前面的 location 前缀)。

//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"

location.hash = "#section1";

//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"location.search = "?q=javascript";

//将 URL 修改为"http://www.yahoo.com/WileyCDA/"location.hostname = "www.yahoo.com";

//将 URL 修改为"http://www.yahoo.com/mydir/"location.pathname = "mydir";

//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"location.port = 8080;

每次修改 location 的属性(hash 除外),页面都会以新 URL 重新加载。

当通过上述任何一种方式修改 URL 之后,浏览器的历史记录中就会生成一条新记录,因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为,可以使用 replace()方法。这个方法只接受一个参数,即要导航到的 URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。在调用 replace()方法之后,用户不能回到前一个页面,如：

 location.replace("http://www.wrox.com/");

与位置有关的最后一个方法是 reload(),作用是重新加载当前显示的页面。如果调用 reload()时不传递任何参数,页面就会以最有效的方式重新加载。也就是说,如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载,则需要像下面这样为该方法传递参数 true。

location.reload(); //重新加载(有可能从缓存中加载)

location.reload(true); //重新加载(从服务器重新加载)

位于 reload()调用之后的代码可能会也可能不会执行,这要取决于网络延迟或系统资源等因素。为此,最好将 reload()放在代码的最后一行。