8.3　创建新窗口

Web浏览器允许我们打开一个新的窗口并定制其很多属性，例如，宽度、高度、在屏幕上的位置，甚至是否显示滚动条、菜单或者定位（地址）栏。基本的技术是使用open（）方法，其基本结构如下：

open（URL, name, properties）

open（）方法接收3个参数。第一个参数是希望在新打开的窗口中显示的页面的URL，和用于一个链接的href属性是同样的值（例如，http：//www.google.com、/pages/map.html或者../../portfolio.html）。第二个参数是窗口的名字，它可能是想要使用的任何名字，遵从本书2.4.1节所述的同样的命名规则。最后，可以传递包含了新窗口的设置的一个字符串（例如，其高度和宽度）。

此外，当打开一个新的窗口的时候，通常创建一个变量来存储对该窗口的引用。例如，如果想要在一个200像素的方形窗口中打开Google的主页，可以这样编写代码：

var newWin=open（'http：//www.google.com/’，8

'theWin'，'height=200，width=200'）；

注意：一行代码末尾的8符号表示下一行应该是作为第一行的一部分输入。但是，由于JavaScript代码的实际长度超过了本书的宽度，只好将其分为两行。

这段代码打开了一个新的窗口并且把对该窗口的一个引用存储在变量newWin中。本节下面“使用窗口引用”部分将介绍如何使用这个引用来控制新打开的窗口。

注意：提供给新窗口的名字（在这个例子中是'theWin'）不会做太多事情。然而，一旦提供了一个名字，如果试图使用同样的名字打开另一个窗口，将不会得到一个新的窗口。相反，使用open（）方法请求的页面只是载入之前创建的具有相同名字的窗口。

窗口属性

浏览器窗口有很多不同的部分：滚动条、调整大小指针、工具栏等（参见图8-1）。此外，窗口还有宽度和高度，以及在屏幕上的位置。当创建一个新窗口时，可以通过创建一个字符串，其中包含逗号隔开的每个属性及其设置的列表，以此作为open（）方法的第三个参数，从而来设置这些属性中的大多数。例如，要设置一个新窗口的宽度和高度，并且确保地址栏的出现，可以这样编写：

var winProps='width=400，height=300，location=yes'；

var newWin=open（'about.html'，'aWin'，winProps）；

图　8-1　浏览器窗口的不同属性，例如滚动条、工具栏和调整大小指针组合在一起叫做“边框”（chrome）。每个浏览器对这些属性都有自己的选择，并且通常浏览器开发者几乎不能操控它们的功能和外观。然而，当使用JavaScript创建一个新的窗口的时候，可以关闭这些功能中的某些

使用像素值来设置控制窗口的大小或位置的属性，而其他的属性的值使用yes（打开该属性）或no（关闭该属性）。在yes/no属性的任何情况下（例如，toolbar或location），如果没有指定一个属性值，Web浏览器就关闭该属性（例如，如果没有设置location属性，Web浏览器会隐藏通常出现在窗口顶端的location字段）。只有height、width、left、top和toolbar在不同浏览器中都一致地工作。正如下面的列表所介绍的，一些浏览器会完全忽略这些属性中的一些，因此，如果你要使用JavaScript创建弹出窗口的话，确保在可能使用的每款浏览器中进行测试。

·height表示窗口的高度，以像素为单位。可以指定百分比值，或者任何其他单位。如果没有指定高度，Web浏览器会匹配当前窗口的高度。

·width指定窗口的宽度。和height一样，只能使用像素，并且，如果漏掉了这个属性，Web浏览器会匹配当前窗口的宽度。

·left是距离屏幕的左边界的位置，以像素为单位。

·top是距离屏幕的上边界的位置，以像素为单位。

·scrollbars出现在浏览器窗口的右边界或下边界，不管页面是否大于窗口本身。要完全隐藏滚动条，可以把这个属性设置为no。不能控制隐藏哪个滚动条（要么都出现，要么都隐藏）。

·status控制窗口底部的状态栏的外观。Firefox和Internet Explorer通常不允许隐藏状态栏，因此，它在浏览器中总是可见的。

·toolbar设置包含导航按钮、书签按钮和特定的浏览器可用的其他空间的工具栏的可见性。在Safari上，工具栏和地址栏设置是相同的：打开任何一个显示，都会同时显示工具栏按钮和地址栏字段。

·location指定地址栏是否可见。这个字段显示了页面的URL，并且允许访问者通过输入一个新的URL到达另一个页面。Opera、IE和Firefox不允许完全隐藏一个页面的地址栏。如果不想打开location属性，那么页面的URL将出现在标题栏的上方。这种功能用来防止对JavaScript的滥用，例如，打开一个新的窗口并且把你送到另外一个和刚刚离开的站点看上去相似的站点。此外，当这个属性打开的时候，Safari会把工具栏和地址栏一起显示。

·menubar适用于那些窗口顶端有一个菜单的浏览器（例如，出现在大多数程序上的常见的File和Edit菜单）。这个设置只适用于Windows浏览器，Mac在屏幕顶端而不是单独的窗口中拥有菜单。并且，它也不适用于IE 7及其以上的版本，这些浏览器通常不会显示一个菜单栏。

注意：要查看使用window.open（）方法的令人惊讶的JavaScript编程示例，请访问http：//experiments.instrum3nt.com/markmahoney/ball/和http：//thewildernessdowntown.com/。

使用窗口引用

一旦打开了一个新的窗口，可以使用对这个窗口的引用来控制它。例如，假设使用如下的代码打开了一个新窗口：

var newWin=open（'products.html'，'theWin'，'width=300，height=300'）；

在这个例子中，变量newWin保存了对新窗口的引用。然后可以对该变量应用任何浏览器窗口方法，来控制窗口。例如，如果想要关闭该窗口，可以使用close（）方法，如下所示：

newWin.close（）；

浏览器支持很多不同的方法用于窗口对象，下面列出了最常用来控制窗口本身的方法：

·close（）关闭特定的窗口。例如，命令close（）关闭当前窗口。但是，可以把这个函数应用到一个窗口引用，例如，newWin.close（）。可以使用任何事件来触发这个关闭事件，例如在显示“Close this window.”的按钮上的一次鼠标单击。

注意：如果使用这些命令本身的任何一个，它都应用于运行脚本的窗口。例如，给一个脚本添加语句close（），将会关闭脚本所在的窗口。然而，如果已经打开了一个窗口并且有了对该窗口的一个引用（例如，在窗口打开的时候创建的一个变量，例如newWin），那么，可以从最初创建该窗口的页面关闭该窗口，只要像这样使用该引用：newWin.close（）。

·blur（）迫使窗口“失去焦点”。也就是说，该窗口移动到已经打开的任何窗口的背后。这是隐藏一个打开的窗口的一种方法，并且Web广告商使用它来创建“弹出窗口”广告，它在当前窗口的下方打开一个窗口，这样，当访问者关闭所有的窗口时，就没有恼人的广告等待他了。

·focus（）和blur（）相反，它迫使窗口进入到其他窗口的栈的上方。

·moveBy（）允许向右和向下按照一组像素数来移动窗口。我们为该方法提供两个参数，第一个指定了向右移动的像素数，第二个指定了把窗口向下移动多少像素。例如，newWin.moveBy（200，300）；把newWind变量引用的窗口向右移动200像素，向下移动300像素。

·moveTo（）通过指定一个向左值和一个向上值，把窗口移动到显示器上的一个指定位置。这条命令和打开一个新窗口的时候设置left和top属性是相同的。例如，要把窗口移动到显示器的左上角，可以运行这段代码：moveTo（0，0）；。

注意：要查看这些方法中的大多数的实际应用，请访问All Is Not Lost网站：http：//www.allisnotlost/。

·resizeBy（）改变窗口的宽度和高度。它接收两个参数：第一个参数指定了让窗口加宽多少像素，第二个参数指定窗口应该增高多少像素。例如，resizeBy（100，200）；使得当前窗口增高100像素并加宽200像素。使用负数会使得窗口变小。

·resizeTo（）把窗口的尺寸更改为一组宽度和高度。例如，resizeTo（200，400）；把当前窗口改为200像素宽和400像素高。

·scrollBy（）通过指定向右和向下的像素数在窗口中滚动文档。例如，scrollBy（100，200）；把当前文档向下滚动200像素，向右滚动100像素。如果文档没有滚动（换句话说，文档恰好在窗口之中而没有滚动条，或者文档已经滚动到头），那么这个函数没有效果。

·scrollTo（）在窗口中把文档从页面的顶部和左端向下和向右滚动指定的像素位置。例如，scrollTo（100，200）；把当前文档滚动到距顶部200像素、距离左边界100像素的位置。如果这个文档没有滚动（换句话说，文档刚好在窗口中，而没有滚动条或者文档已经滚动到头），那么这个函数没有效果。

注意：jQuery ScrollTo插件提供了一种简单的方式来使用JavaScript控制文档滚动。要找到关于这个插件的更多信息，请参见http：//plug-ins.jquery.com/project/ScrollTo。

可以打开一个新窗口的事件

在Web的简短历史中，弹出式窗口恶名远扬。遗憾的是，很多Web站点滥用open（）方法来强制对那些没有疑心的访问者使用讨厌的弹出式广告。现在，很多浏览器都有弹出窗口阻截功能，防止讨厌的窗口，因此，即便我们可以添加JavaScript代码使得只要页面载入或者当访问者关闭了一个窗口，就打开一个新窗口，而大多数浏览器是不会让这种情况发生的。访问者要么看到一条消息告诉他浏览器阻止打开新窗口，或者可能根本不会得到任何关于阻止弹出窗口的提示。

实际上，很多浏览器不允许使用大多数事件（例如，mouseover、mouseout和kepress）来打开浏览器窗口。使用JavaScript来打开窗口的唯一可靠方式是，当用户单击一个链接或提交一个表单的时候触发操作。为了做到这一点，我们给任何HTML元素（不一定必须是一个链接）添加一个click事件，并且打开一个新窗口。例如，假设想让页面上的某些链接在一个300像素的方形的新窗口中打开，带有滚动条，并且可以调整大小，但是没有像工具栏这样的任何其他的浏览器边框。例如，可以为那些特定的链接添加一个名为popup的类，然后，向页面添加如下的jQuery代码：

$（'.popup'）.click（function（）{

var winProps='height=300，width=300，resizable=yes, scrollbars=yes'；

var newWin=open（$（this）.attr（'href'），'aWin'，winProps）；

}