LinkedText<"/> LinkedText<">
在本文中,我們將學習如何使用 TARGET 屬性在新視窗中開啟網站 HTML 和 JavaScript
使用 錨點的 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>
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中文網其他相關文章!