怎么设置在新选项卡中打开_如何使用HTML在新选项卡中打开链接

最新推荐文章于 2023-03-01 15:53:52 发布

cumian9828

最新推荐文章于 2023-03-01 15:53:52 发布

阅读量1.3k

点赞数

文章标签： java javascript python css js ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-use-html-to-open-a-link-in-a-new-tab/

版权

怎么设置在新选项卡中打开

User experience is extremely important for a successful website or web application. There are times when we want to redirect a user from our site to an external site without leaving our site. For example if a user clicks a link we might want the user to be redirected to another site in a new tab.

用户体验对于成功的网站或Web应用程序极为重要。有时候，我们想将用户从我们的网站重定向到外部网站，而又不离开我们的网站。例如，如果用户单击链接，我们可能希望将用户重定向到新选项卡中的另一个站点。

Let's say we are building a photo sharing application, and every time the user selects the download link it needs to open that photo in a new tab. How do we do this?

假设我们正在构建一个照片共享应用程序，并且每次用户选择下载链接时，都需要在新标签页中打开该照片。我们如何做到这一点？

Well, the simplest way to do this is to use HTML's target attribute.

好吧，最简单的方法是使用HTML的target属性。

When a user clicks on a link in our web-page we can open that link in a separate browser tab with the target HTML attribute. The code below will open the link in a new browser tab:

当用户单击我们网页上的链接时，我们可以在具有target HTML属性的单独浏览器选项卡中打开该链接。以下代码将在新的浏览器标签中打开链接：

<a href="www.google.com" target="_blank">Open link in new tab</a>

Open link in new tab 在新标签页中打开链接

The _blank value indicates that we want our link to open in a new blank tab. We can accomplish the same with JavaScript as well. Below is the JavaScript code snippet to do so.

_blank值表示我们希望在新的空白标签中打开链接。我们也可以使用JavaScript完成相同的操作。下面是执行此操作JavaScript代码段。

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}


// html snpippet
// <div onclick="openInNewTab('www.test.com');">Some Link</div>

In the code above, we are using the window global object to open a URL in a new blank tab. We are also focusing on the window after it is opened.

在上面的代码中，我们使用窗口全局对象在新的空白标签中打开URL。打开窗口后，我们还将重点放在窗口上。

If you are using a JavaScript framework (like Angular, React, or Vue) or if you already have a lot of JavaScript code in your project, feel free to use JavaScript to open links in a new window.

如果您使用的是JavaScript框架(例如Angular，React或Vue)，或者您的项目中已经有很多JavaScript代码，请随时使用JavaScript在新窗口中打开链接。

But there are some projects where you might want to use as little JavaScript possible.

但是在某些项目中，您可能希望使用尽可能少JavaScript。

For instance let's say you are building an optimized mobile site for slow networks. In that case, you'd want to limit your JavaScript code.

例如，假设您正在为慢速网络构建优化的移动站点。在这种情况下，您希望限制JavaScript代码。

Another example is HTML email templates. When you are developing HTML templates to send through via email engines (like Mailchimp or Mailgun) you can not include JavaScript with it because of security concerns (you can learn more about this topic here).

另一个示例是HTML电子邮件模板。当您开发HTML模板以通过电子邮件引擎(例如Mailchimp或Mailgun)发送时，出于安全方面的考虑，您不能在其中包含JavaScript(您可以在此处了解更多有关此主题的信息 )。

Alright let's go back to our HTML target attribute. Besides _blank we can pass in several other values in this attribute. Below is a list of all values for the target attribute:

好了，让我们回到我们HTML target属性。除了_blank之外，我们还可以在此属性中传递其他几个值。以下是target属性的所有值的列表：

Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window

值	描述
_空白	在新窗口或选项卡中打开链接的文档
_自	在与单击相同的框架中打开链接的文档(默认设置)
_父母	在父框架中打开链接的文档
_最佳	在整个窗口中打开链接的文档

We have already seen how blank works. The self value is the default behavior which opens the link in the same tab. _parent and _top are the two interesting ones.

我们已经看到了多么blank 作品。的 self value是默认行为，它将在同一选项卡中打开链接。 _parent和_top是两个有趣的。

Let's say we have an iframe element embedded in our site, and inside that iframe there is another iframe. Here's the code:

假设我们在网站中嵌入了一个iframe元素，并且在该iframe中有另一个iframe。这是代码：

<div id="main">
    <iframe name="first_frame">
        <iframe name="nested"></iframe>
    </iframe>
</div>

Now let's say we have a link in the nested iframe. If we were to set the target attribute to top it will open the link in the main browser div . In other words it skips all the iframes and opens the link in the main browser window.

现在假设我们在嵌套iframe中有一个链接。如果我们将target属性设置为top 它将在主浏览器中打开链接 div 。换句话说，它会跳过所有iframe，并在主浏览器窗口中打开链接。

On the other hand, if we were to use parent it would open the link in its parent iframe. In this case it will open in the first_frame.

另一方面，如果我们要使用parent 它将在其父iframe中打开链接。在这种情况下，它将在 first_frame 。

如何在单独的窗口中打开链接 (How to open a link in a separate window)

We can also open the link in a separate window instead of a new tab. We can use the onclick HTML attribute and bind it with a JavaScript window.open command to achieve this.

我们也可以在单独的窗口中打开链接，而不是在新标签页中打开。我们可以使用onclick HTML属性并将其与JavaScript window.open命令绑定以实现此目的。

Notice that we can also specify a width and a height for our new window where the link will be opened.

请注意，我们还可以为将要打开链接的新窗口指定宽度和高度。

The target feature is currently supported in the following browsers:

当前在以下浏览器中支持目标功能：

Although target element is supported by most of the modern browsers, there are some legacy browsers where the target feature is not available. For your reference here's a list of them.

尽管大多数现代浏览器都支持目标元素，但是在某些旧版浏览器中，目标功能不可用。供您参考，下面是它们的列表。