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

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

　　如何使用打開新的瀏覽器選項(xiàng)卡

　　target="_blank"

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

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

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

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

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

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

　　noopener

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

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

　　關(guān)鍵字更新noopener

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

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

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

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

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

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

　　結(jié)論

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

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

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

　　您必須仔細(xì)考慮何時(shí)是使用該屬性的好時(shí)機(jī)，因?yàn)槟幌Ｍ偸歉逆溄拥哪J(rèn)行為。target="_blank"