如何在 JavaScript 中在新标签页中打开 href 链接？

JavaScript href 标签简介

JavaScript 中的超文本引用缩写为 href。在锚点 (<a>) 标签内，可以访问此属性。此 href 用于网站 URL，例如 www.google.com、www.gmail.com、www.facebook.com 等。

实时示例：我们在日常生活中访问许多网站。您有没有想过我们如何访问这个网站的 URL？多亏了 href 标签，我们可以访问任何网站 URL。我们只需要在 href 属性的双引号（href="website"）中输入一个网站。

JavaScript href 属性如何工作？

根据我们使用的 href 标签，JavaScript href 属性的功能有所不同。除了一个小例外，所有可用的 href 标签的目的都相同，即访问 Web URL。

href 属性允许存在于 4 个标签中。它们如下

<a>：此标签使用 href 属性指定链接需要出现在其中的页面的 URL。

语法

<area>：此标签使用 href 属性指定链接需要出现在其中的页面的 URL。

语法

<base>：当链接需要出现在 href 属性中时，此标签用于指定所有相对页面 URL 的基本 URL。

语法

<area>：在 href 属性中，此标签用于指定外部文件的位置，例如 styles.css、javascript.js 等。

语法

有两种方法可以在新标签页中打开 href 链接

1. 使用 window.open() 方法
2. 使用锚点元素（HTML DOM）

使用 window.open() 方法

就像我们在观看视频或玩游戏时遇到的各种弹出窗口一样，openWindow 是一个 JavaScript 函数，它打开一个包含输入数据的新窗口。一个名为 openWindow 的 JavaScript 函数使用户能够启动一个新窗口。提供的 URL 将被重定向到一个新打开的弹出窗口。用户还可以为此窗口大小提供一个参数。大多数现代浏览器都设置为打开标签页而不是单独的窗口。

如何使用它？

1. 为了在新标签页中打开，我们必须在 window.open() 方法的第二个参数中使用 _blank。
2. 当调用 window.open() 时，如果操作不成功，它将返回 null，或者返回对新创建的窗口或标签页的引用。
3. 避免向其添加第三个参数，因为它会导致打开一个新窗口而不是一个标签页。

语法

上面语法的参数如下所示

url：需要在新窗口中打开的 URL 名称。

windowName：窗口的名称。每个窗口都有唯一的名称，并且写为 window.name。如果已存在具有指定名称的窗口，则 URL 将在该窗口中打开；否则，将打开一个新窗口。

windowParameters：窗口功能列表以“name = value”格式输入，并带有相应的值。将出现一个功能列表，例如工具栏、窗口位置和默认大小。字符串中不应包含任何空格。

输出

利用 HTML DOM 的锚点元素

在使用锚点元素（HTML DOM）时，会动态创建一个“a”元素，将其 target 属性设置为“_blank”，并将其 href 属性设置为所需的 URL。最后，当在该元素上触发点击事件时，URL 将在新标签页中打开。

示例：在此示例中，我们创建了一个按钮，该按钮在新标签页中打开“JavaTpoint.org”。当单击该按钮时，它会动态创建一个具有所需 URL 和“_blank”目标的“a”元素，这会导致发送点击事件并在新标签页中打开链接。

代码

输出

总结

在新标签页中打开 URL 时，当前页面会被保留，它会在另一个浏览器标签页中打开 Web 地址。这通过 HTML 链接中的 target="_blank" 或 JavaScript 中的 window.open() 来实现，并确保在兼容的浏览器中流畅浏览。