資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 JavaScript 或 HTML 定位視窗
在本文中，我們將學習如何使用 TARGET 屬性使用 HTML 和 JavaScript 在新視窗中開啟網站
HTML 的 TARGET 屬性
連結開啟的命名框架或視窗由 <a> 錨標籤的 Target 屬性指定。HTML 內容中的結束 </a> 標籤必須出現在每個起始 <a> 標籤之後，因為 <a> 元素是成對出現的。雖然錨標籤的 href（超文字引用）元素還有其他幾個選項，但它是必需的，因為它包含連結單擊時將跳轉到的網頁的 URL。
語法
<a href="URL" target="_top"> Linked Text </a>
屬性值 - 此屬性指的是 href 屬性指定的 URL 的目標視窗。它可以具有以下任何值 -
_top - 它將替換任何現有框架，以便使用全屏在瀏覽器視窗中載入網頁。
_self - _self 預設情況下是 target 屬性的預設值。它在開啟連結的同一視窗或框架中開啟網頁。
_blank - 網頁載入時將開啟一個新的瀏覽器視窗。
_parent - 此方法在父視窗或框架集中載入網頁。
如果您希望將網頁的內容載入到其他框架中，則 HTML 的 <FRAME> 元素（將顯示連結網站的內容）必須提供 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://tutorialspoint.tw/" 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://tutorialspoint.tw/", "_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://tutorialspoint.tw/javascript/index.htm", "_blank");
}
</script>
</body>
</html>
簡而言之
在 HTML 中，如果要將使用者定向到另一個網站，則必須在錨元素的 <a> href 屬性中包含目標頁面的 URL。如果希望連結在新瀏覽器視窗中開啟，則還必須包含 target 屬性。
您可以使用 window.open() 方法在 JavaScript 中完成相同的任務。即使我們也可以使用 HTML 來完成此操作，但 JavaScript 選項也很有用。
3K+ 次瀏覽
