JavaScript Window open 方法

JavaScript 提供了内置的方法来打开和关闭浏览器窗口，以执行额外的操作，如机器人窗口等。这些方法有助于打开或关闭浏览器窗口的弹出窗口。以下是窗口方法

• open()
• close()

window.open 方法用于在新窗口中打开一个新网页，而 window.close 方法用于关闭由 window.open 方法打开的网页。下面详细介绍 window.open() 方法

Window.open()

它是 JavaScript 的一个预定义窗口方法，用于在浏览器中打开新的标签页或窗口。具体是打开新窗口还是新标签页，取决于您的浏览器设置或传递给 window.open() 方法的参数。

几乎所有主流网页浏览器都支持此方法，例如 Chrome、Firefox 等。以下是 window open 方法的语法和参数 -

语法

此函数接受四个参数，但它们都是可选的。

或

您也可以不使用 window 关键字来调用此函数，如下所示

两种语法之间没有区别。

参数列表

下面是 window.open() 方法的参数列表。请注意 - 此方法的所有参数都是可选的，并且作用各不相同。

URL: 这是 window.open() 函数的一个可选参数，它包含您想要打开的网页的 URL 字符串。如果您没有在此函数中指定任何 URL，它将打开一个新的空白窗口 (about:blank)。

name: 使用此参数，您可以设置要打开的窗口的名称。它支持以下值

上述指定的值在 window.open() 函数中作为 name 参数传递时，需要放在单引号或双引号内。

specs: 此参数包含由逗号分隔的设置。此参数中使用的元素不能有空格，例如，width=150,height=100。

它支持多个值。

replace: 与 window.open() 方法的其他参数一样，这也是一个可选参数。它可以在历史记录列表中创建新条目或替换当前条目。它支持两个布尔值；这意味着它返回 true 或 false

返回值

它将返回新打开的窗口。

示例

以下是使用 window.open() 函数打开浏览器窗口/标签页的一些示例。默认情况下，指定的 URL 会在新标签页或新窗口中打开。请看下面的示例

1. open() 带有 URL 参数

这是一个简单的 window open 方法示例，其中包含一个网站 URL。我们使用了一个按钮。点击此按钮将调用 window.open() 方法，并在新的浏览器标签页中打开该网站。

复制代码

或

此代码可以编写如下 -

复制代码

输出

当您点击此 Open Window 按钮时，TpointTech 网站将在同一窗口内的新标签页中打开。

请看下面的截图

2. open() 不带参数

在此示例中，我们不向 window.open() 函数传递任何参数，这样新的标签页将在之前的窗口中打开。

复制代码

输出

当您执行上述代码时，会出现一个按钮。

当您点击此 Open Window 按钮时，一个空白窗口将在新标签页中打开。

3. open() 带有 name 参数

在此示例中，我们将在 name 参数处指定 _parent。您可以在其中传递任何这些值（_parent, _blank, _top 等）。

复制代码

输出

执行代码并获得如下所示的输出。这将包含一个按钮，点击后可在同一父窗口中打开新的 URL。

当您点击此按钮时，Gmail 将在同一父窗口下打开。

当您在第二个参数中传递不同的值时，您会看到不同值的差异。

4. 为新窗口定义尺寸

在此示例中，我们将为新窗口指定高度和宽度。为此，我们将使用 window.open() 方法中的第三个参数 (specs)，并将窗口的高度和宽度（用逗号分隔）传递给此函数。这样，窗口将以指定的尺寸打开。

复制代码

输出

执行上述代码并获得如下所示的输出。这将包含一个按钮，点击后可在同一父窗口中打开新的 URL。

当您点击此按钮时，一个指定大小的空白新窗口将在父窗口下打开。

请注意，您也可以将 URL 传递给 window.open() 方法以打开任何网站。

打开一个带名称并包含消息的新窗口

我们可以在即将通过按钮点击打开的新窗口中显示任何用户定义的文本或表单。为此，我们需要为新窗口提供一个名称，并向其中写入一些文本。这个名称将传递给 window.open() 方法。请看下面的代码，了解如何通过实际编码实现它。

复制代码

输出

执行代码并获得如下所示的输出。它将包含一个按钮，点击后可在同一父窗口中打开新的 URL。

当您点击此按钮时，一个大小为 300*150 的新窗口将在父窗口下打开，并带有用户定义的消息。

JavaScript 还提供了内置方法，即 close()，用于关闭浏览器窗口。

关闭由 window.open() 打开的窗口

在此示例中，我们将向您展示如何关闭由 window.open() 方法打开的窗口或标签页。首先，我们将通过点击一个按钮在新窗口（代码中定义了大小）中打开一个网站 URL，然后使用另一个按钮关闭该打开的窗口。请看下面的代码如何实现

复制代码

输出

当您执行该代码时，您将得到如下所示的响应

点击 Open TpointTech 按钮以打开 TpointTech 教程网站。我们已指定了要打开的新弹出窗口的大小（高度和宽度）。

如果您点击 Close TpointTech 按钮，这个已打开的窗口将被关闭。

浏览器支持

多个网页浏览器支持 window.open() 方法，例如

• Chrome
• Mozilla Firefox
• Internet Explorer (IE)
• Opera
• Safari 等。

您可以在上述这些浏览器上使用和运行 window.open() 方法。

注意：您可以使用 JavaScript 的 close() 方法来关闭由 window.open() 打开的浏览器窗口或标签页。我们将在下一章中更详细地讨论它。