使用 JavaScript 或 HTML 定位窗口
在本文中，我们将学习如何使用 HTML 和 JavaScript 的 TARGET 属性在新窗口中打开网站
HTML 的 TARGET 属性
使用 <a> 锚标记的 Target 属性指定链接的打开命名框架或窗口。HTML 内容中的结束 </a> 标记必须出现在每个开始 <a> 标记之后，因为 <a> 元素是成对的。尽管锚标记的 href(超文本引用)元素有其他几个选项，但它是必需的，因为它包含单击时链接将转到的网页的 URL。
语法
<a href="URL" target="_top"> Linked Text </a>
属性值 − 此属性引用 href 属性指定的 URL 的目标窗口。它可能具有以下任何值 −
_top − 它替换任何现有框架，以便使用 full-body 将网页加载到浏览器窗口中。
_self − 默认情况下，_self 是目标属性的默认值。它在打开链接的同一窗口或框架中打开网页。
_blank − 网页加载后会打开一个新的浏览器窗口。
_parent − 此方法在父窗口或框架集中加载网页。
<FRAME> HTML 元素，其中将显示链接网站的内容，如果您希望将网页内容加载到其他框架中，则必须提供 NAME 属性。此外，必须指定 <a> 元素的 target 属性，以及将显示其内容的框架的名称。
示例
在此示例中，让我们了解 target="blank" 的用法，如下所示。每当用户单击链接文本时，网页都会在新窗口中打开。
<!DOCTYPE html> <html> <title>Target a Window Using JavaScript or HTML - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2 style="color:rgb(6, 92, 157);">The webpage will launch in a new window after clicking the link below.</h2> <a href="https://www.tutorialspoint.com/" target="_blank">Welcome to Tutorialspoint website!</a> </body> </html>
使用 JavaScript 在新选项卡中打开 URL
HTML 中的锚标记是一种在新选项卡中打开 URL 的简单直接的方法。本节有关于此标记的更多信息。但是，有些情况下必须使用 Javascript 来实现相同的任务。window.open() 方法在这种情况下很有用。根据浏览器配置和参数值，window.open() 方法可用于打开新的浏览器窗口或新选项卡。
策略
我们必须在第二个参数中使用 _blank 才能使用 window.open() 方法打开新选项卡。
window.open() 返回的值。 window.open() 返回的引用要么是新生成的窗口或选项卡，要么在失败时返回 null。
避免向其添加第三个参数，因为这样做会导致打开新窗口而不是选项卡。
语法
window.open(URL, '_blank');
示例
在此示例中，让我们了解如何使用 JavaScript window.open() 方法在新选项卡中打开链接(URL)。
<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
<p> Once you click the button <strong>tutorialspoint.com</strong> link will launch in a new tab
</p><br>
<button button type="button" class="btn btn-success" onclick="openNewTab()">
<strong>Open TutorialsPoint</strong>
</button>
<script>
function openNewTab() {
window.open(
"https://www.tutorialspoint.com/", "_blank");
}
</script>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
<p> Click the button to learn <strong>JavaScript</strong> with
<strong>tutorialspoint.com</strong> link, it will launch in a new tab</p><br>
<button button type="button" class="btn btn-success" onclick="myNewTab()">
<strong>Open TutorialsPoint</strong>
</button>
<script>
function myNewTab() {
window.open(
"https://www.tutorialspoint.com/javascript/index.htm", "_blank");
}
</script>
</body>
</html>
简要
在 HTML 中，如果您想将用户引导到另一个网站，则必须在锚元素的 <a> href 属性中包含目标页面的 URL。如果您希望链接在浏览器的新窗口中打开，则还必须包含目标。
您可以使用 window.open() 方法在 JavaScript 中完成相同的任务。尽管我们也可以使用 HTML 完成此操作，但 JavaScript 选项更有益。
