如何在新選項卡中打開鏈接–HTML目標(biāo)空白屬性說明

　　有時，您希望用戶單擊網(wǎng)站鏈接并在新的瀏覽器選項卡中打開它。但是，如何在 HTML 中做到這一點呢？在本文中，我將通過代碼示例向您展示如何使用該特性。我還將討論何時應(yīng)該考慮使用此屬性。target="_blank"

　　如何使用打開新的瀏覽器選項卡

　　target="_blank"

　　該屬性在開始錨點標(biāo)記內(nèi)使用，如下所示：target="_blank"

　　當(dāng)用戶單擊該鏈接時，一個新的瀏覽器選項卡將自動打開該頁面。

　　在這個例子中，我在一組段落標(biāo)簽中嵌套了一個鏈接，以將人們引導(dǎo)到 freeCodeCamp。

　　當(dāng)您單擊“免費代碼營”鏈接時，它將為您打開一個新的瀏覽器選項卡。

　　如果我省略該屬性，則默認(rèn)行為是離開當(dāng)前網(wǎng)頁并直接轉(zhuǎn)到鏈接，而無需打開新的瀏覽器選項卡。target="_blank"

　　什么是關(guān)鍵字？

　　noopener

　　該屬性中的關(guān)鍵字主要用于安全原因，以防止惡意用戶通過該屬性弄亂原始網(wǎng)頁。如果惡意用戶獲得了對您的窗口對象的訪問權(quán)限，那么他們可以將您的頁面重定向到惡意URL。noopenerrelWindow.opener

　　您可以使用關(guān)鍵字來幫助防止該安全問題的發(fā)生。關(guān)鍵字的使用方式如下：noopener noopener

　　關(guān)鍵字更新noopener

　　在2021年，進(jìn)行了更新，現(xiàn)代瀏覽器現(xiàn)在使用該屬性設(shè)置為任何鏈接。正如你在這個可以使用表格中看到的，除了IE Explorer 11之外，大多數(shù)瀏覽器都支持該關(guān)鍵字。rel=noopenertarget=_blanknoopener

　　即使進(jìn)行了此更新，許多開發(fā)人員仍將使用該屬性進(jìn)行鏈接。rel=noopener target=_blank

　　是否應(yīng)始終使用該屬性？target="_blank"

　　當(dāng)用戶單擊鏈接時，默認(rèn)行為是在當(dāng)前頁面上打開該鏈接，而不打開新的瀏覽器選項卡。在很多情況下，您不希望更改此默認(rèn)行為，因為用戶已經(jīng)逐漸期望這樣做。

　　您必須仔細(xì)考慮何時是使用該屬性的好時機(jī)。一個很好的例子是，如果用戶正在處理一個頁面，如果他們點擊鏈接，他們不想離開該頁面。target="_blank"

　　在此示例中，我們鏈接到 DevDocs 文檔，以便用戶可以留在其當(dāng)前頁面上，并在新選項卡上查找引用。

　　結(jié)論

　　如果您希望用戶單擊打開新瀏覽器選項卡的鏈接，則可以使用該屬性。target="_blank"

　　該屬性在開始錨點標(biāo)記內(nèi)使用，如下所示。target="_blank"

　　添加屬性中的關(guān)鍵字是為了防止惡意用戶通過屬性弄亂原始網(wǎng)頁。noopenerrelWindow.opener

　　您必須仔細(xì)考慮何時是使用該屬性的好時機(jī)，因為您不希望總是更改鏈接的默認(rèn)行為。target="_blank"