LinkedText<"/> LinkedText<">

首頁 >web前端 >js教程 >使用 JavaScript 或 HTML 定位窗口

使用 JavaScript 或 HTML 定位窗口

PHPz
PHPz轉載
2023-09-04 18:13:021135瀏覽

使用 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>

簡介

在 HTML 中,您必須在錨點的 href 屬性中包含目標頁面的 https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 如果您想將使用者引導至另一個網站,請使用該元素。如果您希望連結在新視窗中打開 瀏覽器視窗中,您還必須包含目標。

您可以使用 window.open() 方法在 JavaScript 中完成相同的任務。甚至 雖然我們也可以使用 HTML 來完成此操作,但 JavaScript 選項是有益的。

以上是使用 JavaScript 或 HTML 定位窗口的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除