在新選項卡中打開頁面上的鏈接 - javascript

Question

我們如何使頁面上的每個鏈接都在新標簽頁中打開？

因此每個鏈接重定向都會 go 到新標簽。 並且網站在它的位置將是安全的

我們做得到，

<a href="there_links.com" target="_blank">there_links.com</a>

但由於用戶可以在支持 markdown 的評論部分添加自己的鏈接。

很難在頁面上的每個鏈接上設置target="_blank" 。 因為這些鏈接將通過markdown 。

例如，單擊此處將在此處加載頁面本身。 寧願重定向。

Answer 1

Select 頁面中的所有錨點，然后使用setAttribute function 更新目標屬性

 let anchors = document.querySelectorAll('a'); for (let i = 0; i < anchors.length; i++) { anchors[i].setAttribute('target', '_blank') }

 <a href="there_links.com" target="_blank">link 1</a> <a href="a.com">link 2</a> <a href="there_links.com">link 3</a>

上面的腳本可以設置在 Vue 組件的掛載鈎子中

Answer 2

您可以查詢沒有目標的<a>並將其設置為：

document.querySelectorAll('a:not([target])').forEach(el => el.target = "_blank")

只有在您將 markdown 處理為元素后，關鍵部分才運行它