有時,您希望用戶單擊網站鏈接并在新的瀏覽器選項卡中打開它。但是,如何在 HTML 中做到這一點呢?在本文中,我將通過代碼示例向您展示如何使用該特性。我還將討論何時應該考慮使用此屬性。target="_blank"
如何使用打開新的瀏覽器選項卡
target="_blank"
該屬性在開始錨點標記內使用,如下所示:target="_blank"
當用戶單擊該鏈接時,一個新的瀏覽器選項卡將自動打開該頁面。
在這個例子中,我在一組段落標簽中嵌套了一個鏈接,以將人們引導到 freeCodeCamp。
當您單擊“免費代碼營”鏈接時,它將為您打開一個新的瀏覽器選項卡。
如果我省略該屬性,則默認行為是離開當前網頁并直接轉到鏈接,而無需打開新的瀏覽器選項卡。target="_blank"
什么是關鍵字?
noopener
該屬性中的關鍵字主要用于安全原因,以防止惡意用戶通過該屬性弄亂原始網頁。如果惡意用戶獲得了對您的窗口對象的訪問權限,那么他們可以將您的頁面重定向到惡意URL。noopenerrelWindow.opener
您可以使用關鍵字來幫助防止該安全問題的發生。關鍵字的使用方式如下:noopener noopener
關鍵字更新noopener
在2021年,進行了更新,現代瀏覽器現在使用該屬性設置為任何鏈接。正如你在這個可以使用表格中看到的,除了IE Explorer 11之外,大多數瀏覽器都支持該關鍵字。rel=noopenertarget=_blanknoopener
即使進行了此更新,許多開發人員仍將使用該屬性進行鏈接。rel=noopener target=_blank
是否應始終使用該屬性?target="_blank"
當用戶單擊鏈接時,默認行為是在當前頁面上打開該鏈接,而不打開新的瀏覽器選項卡。在很多情況下,您不希望更改此默認行為,因為用戶已經逐漸期望這樣做。
您必須仔細考慮何時是使用該屬性的好時機。一個很好的例子是,如果用戶正在處理一個頁面,如果他們點擊鏈接,他們不想離開該頁面。target="_blank"
在此示例中,我們鏈接到 DevDocs 文檔,以便用戶可以留在其當前頁面上,并在新選項卡上查找引用。
結論
如果您希望用戶單擊打開新瀏覽器選項卡的鏈接,則可以使用該屬性。target="_blank"
該屬性在開始錨點標記內使用,如下所示。target="_blank"
添加屬性中的關鍵字是為了防止惡意用戶通過屬性弄亂原始網頁。noopenerrelWindow.opener
您必須仔細考慮何時是使用該屬性的好時機,因為您不希望總是更改鏈接的默認行為。target="_blank"