JavaScript 教程：使用 window.open 打开新窗口及参数详解

JavaScript 打开新窗口基础

本课的目标是掌握如何调用目标名称，在本例中具体指代窗口名称，例如 yer_new_window。

在简要回顾 href 目标属性后，我们将正式进入 JavaScript 中打开窗口的学习。

在 HTML 中通过链接打开新窗口虽常见，但存在局限性：用户浏览器决定了窗口的样式，开发者无法控制其大小和外观。JavaScript 提供了对此的控制权。

了解其背后的原理：

window.open("URL","name","features");

该语句使用第一个参数 URL 来打开一个窗口。这里的 URL 可以是具体的地址，如 "http://www.jsfan.org/basic" 或其他类似链接。

第二个参数指定窗口名称。这与之前看到的名称类似，如果已有一个同名窗口打开，新的 URL 将加载到该已有窗口中，而非创建新窗口。

第三个参数 features 用于定义窗口的各种特征。这是一个可选参数，我们先专注于前两个参数的练习。

以下是使用 JavaScript 打开窗口的几个示例。

尝试点击以下三个链接观察效果。注意在三个链接全部打开前，不要关闭其中任何一个。（注：原文中三行代码在转载过程中丢失，链接已失效，故无法点击，后续会修正——jsfan 注）

这是名为 javascript_1 的窗口。

名为 javascript_2 的窗口。

这里是另一个将进入 javascript_1 的 HTML 页面。

语句的第一行代码：

<a href="#" onClick="window.open('javascript_window_1.html','javascript_1');">Here's a window named javascript_1</a>.

点击该链接时，会打开一个名为 javascript_1 的窗口，其中显示 javascript_window_1.html 网页。由于 features 参数是可选的，此处暂不讨论。

注意这里使用了 onClick 事件来调用打开窗口的操作。当然，不必非要在 onClick 中调用 window.open()，稍后你将看到在 <script> 标签中直接调用 window.open() 的例子。

第二个示例与第一个几乎相同，只是使用了不同的窗口名称，并调用了不同的 HTML 页面。

<a href="#" onClick="window.open('javascript_window_2.html','javascript_2');">Here's a window named javascript_2</a>.

第三个链接将一个新的 HTML 页面放入第一个窗口中。这是因为你要打开的窗口与第一个链接重名，都称为 javascript_1。

<a href="#" onClick="window.open('javascript_window_3.html','javascript_1');">Here's another HTML page going into javascript_1</a>.

窗口特性参数 (features) 详解

精彩部分即将开始。我们加入第三个参数 features，看看会发生什么。

好的，让我们加入 window features 再试一次！

window.open() 中的第三个参数是一组你希望窗口表现的特性。如果你不确定具体参数，浏览器将使用默认值。

然而，如果你指定了某些特性参数，窗口将按照参数设定的值显示。特性参数以逗号分隔的序列形式出现。

例如，如果你这样编写：

window.open("some_url","window_name","location,menubar");

你将得到一个包含指定 URL、窗口名及菜单条（文件、编辑等条目）的窗口。注意不要在字符串中加入空格，这会导致某些浏览器出错。

看另一个例子：

window.open("some_url","window_name","location,height=100,width=100");

这将打开一个高宽各为 100 像素的窗口。再次请注意不要在字符串中加入空格。

常用窗口特性参数列表

以下是一组可以在字符串中引用的特性参数：

menubar （菜单条）

这是大多数软件应用中常见的功能行，通常包括文件、编辑及其他一些条目。

status（状态条）

这是位于窗口底部的信息条。当鼠标悬停在链接上时，链接的 URL 会显示在状态条上。你可以将状态条显示的内容移到滚动的 marquee 中。此处不提供该示例，若想知道如何实现，请自行解决！

scrollbars （滚动条）

允许在需要时出现滚动条。

resizable （可调整大小）

当列出 resizable 参数时，窗口可被调整大小。注意其拼写，我常在此处出错。

width （宽度）

以像素表示的窗口宽度。

height（高度）

以像素表示的窗口高度。

toolbar （工具条）

Home button, among others.

浏览器工具条，包括后退、前进、停止以及 HOME 按钮等。

location （地址栏）

你可以输入 URL 的浏览器文本区域。

directories （目录）

如 Netscape 浏览器中的 "What's new," "What's cool," 等。以下是一些不同类型窗口的示例。

一旦你理解了这些示例，就可以在你的窗口中实现它们了。现在开始学习窗口的具体内容。