使用 JavaScript 或 HTML 定位窗口-js教程-PHP中文網

使用 JavaScript 或 HTML 定位窗口

PHPz

發布： 2023-09-04 18:13:02

轉載

1091 人瀏覽過

使用 JavaScript 或 HTML 定位窗口

在本文中，我們將學習如何使用 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>

登入後複製