使用 JavaScript 或 HTML 定位窗口
- PHPz轉載
- 2023-09-04 18:13:021129瀏覽
在本文中，我們將學習如何使用 TARGET 屬性在新視窗中開啟網站 HTML 和 JavaScript
HTML 的 TARGET 屬性
使用 錨點的 Target 屬性指定連結的名為框架或視窗的開口 標籤。 HTML 內容中的結束 標記必須出現在每個開始 標記之後 因為 元素是配對的。雖然錨點的 href（超文本引用）元素 標籤還有其他幾個選項，它是必要的，因為它包含該網頁所在的 https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 點擊後連結就會消失。
文法
<a href="https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561" target="_top"> Linked Text </a>
屬性值 - href 屬性指定的 https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 的目標視窗由此引用 屬性。它可能具有以下任何值 -
_top - 它取代任何現有框架，以便使用全文將網頁載入到瀏覽器視窗。
_self - 預設情況下，_self 是目標屬性的預設值。它會在開啟連結的相同視窗或框架中開啟網頁。
_blank - 網頁載入後會開啟一個新的瀏覽器視窗。
_parent - 此方法在父視窗或框架集中載入網頁。
HTML 的 元素（將顯示連結網站的內容）必須具有 如果您希望將網頁內容載入到其他框架中，則提供 NAME 屬性。 此外，必須指定 元素的 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.php.cn/link/1a09a1f048354ae7570bf137f30abd21" target="_blank">Welcome to Tutorialspoint website!</a> </body> </html>
使用 JavaScript，在新分頁中開啟 https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561
HTML 中的錨標記是在新分頁中開啟 https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 的簡單而直接的方法。本節有 有關此標籤的詳細資訊。然而，有些情況下必須使用Javascript來實現 同一個任務。 window.open() 方法在這種情況下很有用。基於瀏覽器 配置和參數值，window.open()方法可用來開啟一個新視窗 瀏覽器視窗或新分頁。
策略
我們必須在第二個參數中使用 _blank 才能使用 window.open() 方法開啟新分頁。
window.open() 傳回的值。 window.open() 傳回的參考要不是新產生的視窗或選項卡，就是 null（如果失敗）。
避免在其中新增第三個參數，因為這樣做會導致開啟新視窗而不是選項卡。
文法
window.open(https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561, '_blank');
範例
在此範例中，讓我們了解如何使用 JavaScript 在新分頁中開啟連結 (https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561) window.open() 方法。
<!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.php.cn/link/1a09a1f048354ae7570bf137f30abd21", "_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.php.cn/link/1a09a1f048354ae7570bf137f30abd21javascript/index.htm", "_blank");
}
</script>
</body>
</html>
簡介
在 HTML 中，您必須在錨點的 href 屬性中包含目標頁面的 https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 如果您想將使用者引導至另一個網站，請使用該元素。如果您希望連結在新視窗中打開 瀏覽器視窗中，您還必須包含目標。
您可以使用 window.open() 方法在 JavaScript 中完成相同的任務。甚至 雖然我們也可以使用 HTML 來完成此操作，但 JavaScript 選項是有益的。
以上是使用 JavaScript 或 HTML 定位窗口的詳細內容。更多資訊請關注PHP中文網其他相關文章！